Published
Edited
Jun 30, 2022
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("palmer-penguins.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
Plot // Plot is available in Observable by default
Insert cell
Insert cell
Insert cell
Insert cell
// change the code to replace … by the field’s name, e.g. body_mass
Plot.dot(data, {x: "body_mass", fill: "blue", fillOpacity: 0.3}).plot()
Insert cell
Insert cell
Insert cell
// change the code to replace … by the field’s name, e.g. body_mass
Plot.dot(data,
{x: "body_mass", y: "flipper_length"
, fill:"Black", fillOpacity:0.4}).plot()
Insert cell
Insert cell
Insert cell
// type your code here
Plot.dot(data,
{x:"body_mass",y:"flipper_length",
fill:"species",title:"species"},
).plot()

Insert cell
Insert cell
Insert cell
// type your code here
Plot.dot(data,
{x:"body_mass",y:"flipper_length",
fill:"species"},
).plot({
facet: {
data: penguins,
x: "sex",
marginTop:50
},
marks:[Plot.frame()]
},
)
Insert cell
Insert cell
Insert cell
// type your code here
Plot.barY(data,Plot.groupX({y:"count"},{x:"species"})).plot()
Insert cell
Insert cell
Insert cell
// type your code here
Plot.dot(data, Plot.group({r: "count"}, {x: "species", y: "island" })).plot()
// Plot.barY(
// data,
// Plot.groupX({y:"count"},{x:"species"})
// ).plot({
// facet: {
// data,
// x: "island"
// },
// marks: [
// Plot.frame(),
// ]
// })
Insert cell
Insert cell
Insert cell
// type your code here
Plot.rectY(data, Plot.binX({y: "count"}, {x: "body_mass"})).plot()
Insert cell
Insert cell
Insert cell
// type your code here
Plot.rectY(
data,
Plot.binX({y: "count"}, {x: "body_mass",fill:"blue"})
).plot({
facet: {
data,
x: "sex",
y:"species",
marginLeft:50,
marginRight:150,
fill:"blue",
},
marks: [
Plot.frame(),
],
width:1400
})
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
facet: {
data,
x: "sex",
y: "species",
marginRight: 80
},
marks:[
Plot.frame(),
Plot.rectY(data,Plot.binX({y: "count"}, {x: "body_mass",fill: "species",fillOpacity:0.8})),
Plot.tickX(data,Plot.groupZ({x:"median"},{x:"body_mass",stroke:"black"}))
]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
grid: true,
x: {
font:"10px",
frameAnchor: "top",

},
color: {
legend: true,
type: "ordinal",
scheme: "dark2",
},
facet:{
data,
y:"species",
marginLeft:100,
marginBottom:20
},
marks:[
// Plot.frame(),
Plot.dot(data,
{
x: "body_mass",
filter: d => d.sex === "FEMALE",
fill: "species",
fillOpacity:0.8,
size:10,
r:5,
}
),
Plot.tickX(data,
Plot.selectMinX({
x:"body_mass",
filter: d => d.sex==="MALE",
strokeWidth:5,
stroke:"Green",
strokeOpacity:0.8
})
),
Plot.tickX(data,
Plot.selectMaxX({
x:"body_mass",
filter: d => d.sex==="MALE",
strokeWidth:5,
stroke:"Gray",
strokeOpacity:0.8
})
),
Plot.tickX(data,
Plot.groupZ(
{x:"median"},{
x:"body_mass",
filter: d => d.sex==="FEMALE",
strokeWidth:12,
stroke:"Blue",
strokeOpacity:0.3
})
)
],
width:1500,
height:300,
style: {
fontSize: "15px"
}
})
Insert cell
Insert cell
Insert cell
// type your code here
addTooltips(
Plot.plot({
grid: true,
x: {
font:"10px",
frameAnchor: "top",

},
color: {
legend: true,
type: "ordinal",
scheme: "dark2",
},
facet:{
data,
y:"species",
marginLeft:100,
marginBottom:20
},
marks:[
// Plot.frame(),
Plot.tickX(data,
{
x: "body_mass",
filter: d => d.sex === "FEMALE",
stroke: "species",
strokeWidth:5,
strokeOpacity:0.8,
title:"body_mass"
}
),
],
tooltip: {
fill: "red",
stroke: "blue",
r: 8
},
width:1500,
height:200,
style: {
fontSize: "12px"
}
})
)
Insert cell
// type your code here
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function answer({
title,
questions = [],
guides = [],
hints = [],
solutions = [],
open = !!showAll
}) {

const div = d3.create("div").classed("answer", true);

if (title) {
div.append("hr");
div.append("h2").html(title);
}

div.call(renderGroup, questions, "question", true, d => md`${d}`);
// div.call(renderGroup, guides, "guide", open, d => md`${d}`);
div.call(renderGuide, guides, "guide", open, d => md`${d}`);
div.call(renderGroup, hints, "hint", open, d => code(d, "hint"));
div.call(renderGroup, solutions, "solution", open, d => code(d, "solution", renderSnippet));

return div.node();
}
Insert cell
function Q(q) {
return Object.assign(answer({
...q,
guides: null,
hints: null,
solutions: null
}), {value: q})
}
Insert cell
function A(q) {
return answer({
...q,
title: null,
questions: null
})
}
Insert cell
function renderGroup(div, group, type, open, render) {
if (group?.length) {
const details = div.append(type==="question" ? "div" : "details");
if (open) details.attr("open", "open")
if (type !== "question") details.append("summary").append("strong").text(`${type}${group.length > 1 ? "s" : ""}`);
details.append("ul").selectAll().data(group).join("li").append(render);
}
}
Insert cell
function renderGuide(div, group, type, open, render) {
if (group?.length) {
const details = div.append("div");
if (open) details.attr("open", "open")
// details.append("span").append("strong").text(`${type}${group.length > 1 ? "s" : ""}`);
details.append("ul").selectAll().data(group).join("li").append(render);
}
}
Insert cell
function renderSnippet(str) {
try {
const func = new Function("data", "Plot", "d3", "width", `return ${str}`)
return func(data, Plot, d3, width);
}
catch(e) {}
}
Insert cell
function code(code, type, visual) {
return html`
<div class="copy">${Copier("Copy", {value: code})}</div>
<textarea class=${type} rows=${rows(code)}>${code}</textarea>
${visual ? visual(code) : ""}`;

}
Insert cell
function rows(code) {
const lines = code.trim().split("\n").length;
return Math.max(Math.min(lines, 15), 2);
}
Insert cell
styles = html`<style>
.answer {
font-family: system-ui, sans-serif;
font-size: 14px;
}
.answer summary strong {
text-transform: capitalize;
}
.answer li {
list-style: none;
position: relative;
}
.answer textarea {
font: var(--monospace-font);
font-size: 12px;
width: 100%;
padding: 5px;
border: 2px solid #3b5fc0;
background: #F6F9FF;
border-radius: 5px;
margin-bottom: 2em;
resize: none;
}
.answer .copy form {
position: absolute;
right: -4px;
top: 4px;
width: initial;
}
.answer summary {
display: inline-block;
padding: 2px 6px;
border: 2px solid #3b5fc0;
background: #F6F9FF;
border-radius: 5px;
margin: 2px 0;
outline-offset: -2px;
list-style: none;
cursor: pointer;
min-width: 62px;
text-align: center;
}

.answer details[open] > summary {
background: #3b5fc0;
color: white;
}

`
Insert cell
html = htl.html
Insert cell
import {Copier} from "@mbostock/pbcopy"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more