Built with blockbuilder.org
forked from sxywu's block: DS July: Code 1
forked from sxywu's block: DS July: Code 2
forked from sxywu's block: DS July: Code 3
forked from sxywu's block: DS July: Code 4
forked from sxywu's block: DS July: Code 5
forked from sxywu's block: DS July: Code 6
forked from sxywu's block: DS July: Code 7
forked from sxywu's block: Film Flowers, All
forked from anonymous's block: Film Flowers, Refactored
forked from sxywu's block: Film Flowers, Single Scaled Complete
forked from sxywu's block: Film Flowers, Single Update Complete
forked from sxywu's block: Film Flowers, Single Update Starter
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js'></script>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
<style>
svg {
width: 600px;
height: 20000px;
}
</style>
</head>
<body>
<svg></svg>
<script>
const width = 600;
const height = 600;
const petalPaths = [
[
'M0,0',
'C50,40 50,62 20,117',
'C-50,66 -48,40 0,0'
],
[
'M0,0',
'C-40,-25 -60,-50 0,-75',
'C70,-60 5,-25 0,0'
],
[
'M0,0',
'C50,40 50,100 20,154',
'C-50,66 -48,40 0,0'
],
[
'M0, 0',
'C0,-70 90,-10 100,0',
'C90,10 0,70 0,0',
'C-5,0 -10,-10 100,-20',
'C-10,-10 0,-5 0,0',
'C-5,0 -10,10 100,20',
'C-10,10 0,5 0,0'
]
];
// instantiate scales and petal path lookup
const sizeScale = d3.scaleLinear()
.range([0.1, 1]);
const numPetalsScale = d3.scaleQuantize()
.range(_.range(5, 10));
const pathLookup = {
G: petalPaths[0],
PG: petalPaths[1],
'PG-13': petalPaths[2],
R: petalPaths[3],
};
// grab svg
const svg = d3.select(' svg');
/*****************************************************
** get movie data
******************************************************/
d3.json('movies.json', function(movies) {
movies = _.map(movies, movie => {
return {
rating: ++movie.imdbRating,
votes: parseInt(movie.imdbVotes.replace(/\,/g, '')),
year: ++movie.Year,
title: movie.Title,
pg: movie.Rated,
}
});
// 1. set domain for scales
// size scale = rating
// number of petals scale = number of votes
const sizeExtent = d3.extent(movies, d => d.rating);
const numPetalsExtent = d3.extent(movies, d => d.votes);
// set domain on scales
sizeScale.domain(sizeExtent);
numPetalsScale.domain(numPetalsExtent);
// function that calculates data for the petals
// and draws flower with enter-update-exit
function drawFlower(index) {
const movie = movies[index];
// 2. create petal data for selected movie
const numPetals = numPetalsScale(movie.votes);
const petalData = _.times(numPetals, (i) => {
// 1. rotation of the petal
const rotate = (i / numPetals) * 360;
// 2. path of petal (pg)
// 3. size of petals (IMDB ratings)
return {
rotate,
path: pathLookup[movie.pg],
size: sizeScale(movie.rating),
}
});
const t = d3.transition().duration(500);
// 3. set data and enter-update-exit
const petals = svg.selectAll('path').data(petalData);
// exit
petals.exit().transition(t).attr('transform', d => `translate(150,150)rotate(${d.rotate}).scale(0)`).remove();
//petals.exit().remove();
// enter
const enter = petals.enter().append('path')
.attr('fill', 'none')
.attr('stroke', '#000');
// update
enter.merge(petals)
.attr('transform', d => `translate(200,200)rotate(${d.rotate})scale(${d.size})`)
.attr('fill', (d, i) => d3.interpolateRainbow(i / numPetals))
.attr('d', d => d.path);
}
let index = 0;
drawFlower(0);
// WILL eventually crash your browser,
// uncomment at your own risk.
/* setInterval(() => {
index += 1;
if (index === movies.length) {
index = 0;
}
drawFlower(index);
}, 1000); */
});
</script>
</body>
https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js