Public
Edited
Oct 13, 2022
1 fork
Petal
petalPath = "M 0,0 C -10,-10, -10,-40 0,-50 C 10,-40 10,-10 0,0"
html`<svg width="50" height="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));
petalSize=[]
{
const svg = DOM.svg(petalSize * 2,petalSize * 2);
const ratingMinMax = d3.extent(data, d=> +d.imdbRating);
console.log(ratingMinMax)
const votesMinMax = d3.extent(data, d=> +d.imdbVotes.replace(',',''));
const sizeScale = d3.scaleLinear().domain(ratingMinMax).range([0.25,1]);
const numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([3,6,9,12,15,18])
//Create object within an object
const flowersData = _.map(data, d =>{
const numPetals = numPetalScale(+d.imdbVotes.replace(',',''));
const petSize = sizeScale(+d.imdbRating);
return {
petSize,
petals: _.times(numPetals, i=> {return{angle: 360 * i / numPetals, petalPath}})
}
});
console.log(flowersData)
const flowers = d3.select(svg)
.selectAll ('g')
.data(flowersData)
.enter()
.append('path')
flowers.selectAll('path')
.data(d => d.petals).enter().append('path')
.attr('d', d => d.petalPath)
.attr('transform', d => `rotate(${d.angle})`);
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.
