Public
Edited
Mar 20, 2023
Intro to D3.js with Shirley Wu - The Code Train
petalPath = 'M 0,0 C -10,-10 -10,-40 0,-50 C 10,-40 10, -10 0,0';
petalSize = 50
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().domain(ratingMinMax).range([0.25, 1]);
const numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([3,6,9,12, 15, 18]);
const d = data[5];
const numPetals = numPetalScale(+d.imdbVotes.replace(',',''));
const petSize = sizeScale(+d.imdbRating);
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('g')
.attr('transform', (d, i) => `translate(${(i % 5) * petalSize},${Math.floor(i /5) * petalSize})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')
d3.select("svg") // d3 go find it
.selectAll("path") // returns an empty selection
.data(values).enter().append("path") // take the data and make path elements that are binded to data
.attr("r", d => d) // I want the radius to be my data
// extra example
.data(values, d => d).enter().append("path") // key is the data itself
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.
