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, Refactored
forked from sxywu's block: Film Flowers, Single Scaled Starter
forked from sxywu's block: Film Flowers, Single 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,70 20,100',
'L0,85',
'L-20,100',
'C-50,70 -50,40 0,0'
],
[
'M0,0',
'C0,0 0,70 60,100',
'L20,100',
'C10,120 -10,120 -20,100',
'L-60,100',
'C0,70 0,0 0,0'
],
[
'M0,0',
'C0,0 0,70 60,100',
'L20,100',
'C10,120 -10,120 -20,100',
'L-60,100',
'C0,70 0,0 0,0'
],
[
'M0,0',
'C0,0 0,70 60,100',
'L20,100',
'C10,120 -10,120 -20,100',
'L-60,100',
'C0,70 0,0 0,0'
]
];
// petal lookup for PG ratings
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. create petal data for just the first movie
const movie = movies[0];
const numPetals = 6;
const petalData = _.times(numPetals, (i) => {
// rotation
// petal path
return {
rotate: (360 / numPetals) * i,
path: pathLookup[movie.pg].join(' ')
}
});
console.log(petalData);
// 2. draw the petals using d3's data-binding and enter-append
var svg = d3.select('svg');
const petals = svg.selectAll('path')
.data(petalData)
.enter()
.append('path')
.attr('d', d => d.path)
.attr('transform', (d, i) => {
return `translate(150,150)rotate(${d.rotate})`
})
.attr('fill', 'red')
.attr('stroke', 'black')
});
</script>
</body>
https://d3js.org/d3.v4.min.js
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js