Published
Edited
Dec 8, 2019
Insert cell
md`# Coding train - D3`
Insert cell
petalPath = 'M 0,0 C -10,-10,-10,-40,0,-50 C 10,-40 10, -10 0,0';
Insert cell
petalSize= 50;
Insert cell
html`<svg width="50" height="50"><path transform="translate(25,50)" d="${petalPath}"></svg>`
Insert cell
d3 =require("d3");
Insert cell
data=d3.json("https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json").then(data => _.values(data));
Insert cell
{
const svg = DOM.svg(petalSize * 100, petalSize * 28);
const ratingMinMax = d3.extent(data, d => +d.imdbRating);
const votesMinMax = d3.extent(data, d => +d.imdbVotes.replace(",", ""));
const sizeScale = d3.scaleLinear().domain(votesMinMax).range([0.25, 1]);
const numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([3,6,9,12,15,18]);

const flowersData = _.map(data, d => {
const numPetals = numPetalScale(+d.imdbVotes.replace(',',''));
console.log(numPetals);
const petSize = sizeScale(+d.imdbRating);
return {
petSize,
petals: _.times(numPetals, i => {return {angle: 360 * i / numPetals, petalPath}}),
numPetals,
}
});

const flowers = d3.select(svg)
.selectAll('g')
.data(flowersData)
.enter()
.append('g')
.attr('transform', (d, i) => `translate(${(i % 5) * petalSize + 50},${Math.floor(i / 5) * petalSize + 50})scale(${d.petSize})`);

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.interpolateWarm(d.angle / 360));
return svg;

}
Insert cell
_ = require('lodash')
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