Published
Edited
Jan 20, 2020
1 fork
2 stars
md`# Rubens D3 Extravaganza`
md`### Based on "Introduction to D3.js with Shirley Wu" (https://youtu.be/rQroxWLZiCo)`
petalPath = 'M 0,0 C -10,-10 -10,-40 0,-50 C 10,-40 10,-10 0,0';
petalSize = 50;
html`<svg width="50" height="50"><path transform="translate(25,50)" d="${petalPath}"></svg>`
md`#### Petals quantity means film voting.`
md`#### Flower size means film rating.`
d3 = require('d3');
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.
