Senior Data Visualization Engineer at Graphicacy
Public
Edited
Dec 2, 2022
{
const svg = html`
<svg width=500 height=100 style='border: 1px dashed'>
<path d='${customizedPath}' transform='translate(50, 0)' />
<path d='${customizedPath}' transform='translate(150, 0)' />
<path d='${customizedPath}' transform='translate(250, 0)' />
<path d='${customizedPath}' transform='translate(350, 0)' />
<path d='${customizedPath}' transform='translate(450, 0)' />
</svg>
`;
// select all paths
d3.select(svg)
.selectAll("path")
.data(movies)
.attr("fill", (d) => colors[d.genres[0]] || colors.Other);
return svg;
}
colors = ({
Action: "#ffc8f0",
Comedy: "#cbf2bd",
Animation: "#afe9ff",
Drama: "#ffb09e",
Other: "#fff2b4"
})
customizedPath = "M0,0 C35,35 35,85 0,100 C-35,85 -35,35 0,0"
petalPath = "M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0"
movies = FileAttachment("untitled.json").json()
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.
