Published
Edited
Dec 9, 2020
md`# Charles Carlson - Learning D3.js`
petalPath = 'M 0,0 C-10,-10 -10,-40 0,-50 C 10,-40 10,-10 0,0'
petalSize = 50;
html`<svg width="100" height="100"><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*10,petalSize*10);
const ratingMinMax = d3.extent(data,d=>+d.imdbRating);
const votesMinMax = d3.extent(data,d=>+d.imdbVotes.replace(',',''));
const sizeScale = d3.scaleLinear(ratingMinMax).domain(ratingMinMax).range([0.25,1]);
const numPetalScale = d3.scaleQuantize(votesMinMax).domain(votesMinMax).range([5,7,10]);
const d = data[0];
const flowersData = _.map(data,d=>{
const numPetals = numPetalScale(+d.imdbVotes.replace(',',''))
const pSize = sizeScale(+d.imdbRating);
return {pSize,
petals:_.times(numPetals, i => ({angle:360 *i/numPetals,petalPath}))}
});
const flowers = d3.select(svg)
.selectAll('g')
.data(flowersData)
.enter()
.append('g')
.attr('transform',(d,i)=>`translate(${(i%5)*petalSize},${Math.floor(i/5) * petalSize})scale(${d.pSize})`)
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;
}
_=require('lodash');
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.
