Published
Edited
Mar 18, 2022
1 star
Getting Started with D3
Imports
_ = require('lodash');
petalPath = 'M 0,0 C -10,-10 -10,-40 0,-50 C 10,-40 10,-10 0,0';
petalSize=50
<svg height="50" width="50"><path transform="translate(25,50)" d="${petalPath} "></svg>
d3 = require('d3')
data = d3.json("https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json").then(data => _.values(data))
{
const svg = DOM.svg(petalSize * 20, petalSize * 44);
const ratingMinMax = d3.extent(data, (d) => +d.imdbRating);
const votesMinMax = d3.extent(data, (d) => +d.imdbVotes.replace(",", ""));
const sizeScale = d3.scaleLinear().domain(ratingMinMax).range([0.25, 1]);
const petalScale = d3
.scaleQuantize()
.domain(votesMinMax)
.range([3, 6, 9, 12, 15, 18]);
const d = data[34];
const flowerData = _.map(data, (d) => {
const numPetals = petalScale(+d.imdbVotes.replace(",", ""));
const petSize = sizeScale(+d.imdbRating);
return {
petSize,
petals: _.times(numPetals, (i) => {
return { angle: (360 * i) / numPetals, petalPath };
}),
numPetals,
name: d.Title
};
});
const flowers = d3
.select(svg)
.selectAll("g")
.data(flowerData)
.enter()
.append("g")
.attr(
"transform",
(d, i) =>
`translate(${(i % 5) * (petalSize + 30) + 50},${
Math.floor(i / 5) * (petalSize + 30) + 50
})scale(${d.petSize})`
);
flowers
.append("svg:title")
.data(flowerData)
.text((d) => d.name);
flowers
.selectAll("path")
.data((d) => d.petals)
.enter()
.append("path")
.attr("d", (d) => d.petalPath)
.attr("transform", (d) => `rotate(${d.angle})`)
.attr("fill", (d, i) => d3.interpolateRainbow(d.angle / 360));
return svg;
}
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.
