Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.
data=d3.json('https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json').then(data => _.values(data));
{
const svg = DOM.svg(petalSize * 24, petalSize * 21);
const getRating = d => +d.imdbRating;
const getVotes = d => +d.imdbVotes.replace(',', '');
const ratingMinMax = d3.extent(data, getRating);
const votesMinMax = d3.extent(data, getVotes);
const sizeScale = d3.scaleLinear()
.domain(ratingMinMax)
.range([0.35, 1]);
const numPetalScale = d3.scaleQuantize()
.domain(votesMinMax)
.range([3, 5, 8, 13, 21]);
const flowersData = _.map(data, d => {
const petSize = sizeScale(getRating(d));
const numPetals = numPetalScale(getVotes(d));
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(${petalSize + (i % 12) * petalSize * 1.6},${petalSize + Math.floor(i / 12) * petalSize * 1.65})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;
}
_ = 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.
