31:[] 2f:{"title":"Shirley Wu x Coding Train","cells":[{"id":0,"value":"md`# [Shirley Wu x Coding Train](https://www.youtube.com/watch?v=rQroxWLZiCo) \n\nBuilding SVG Flowers from Data Tutorial: the number of petals and size correspond to imdb rating and votes. Shape corresponds to the rating (G, PG, PG-13, R), and color the genre`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md `## A Single Petal`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"petalPath = 'M 0,0 C -10,-20 -20,-30 0,-50 C 20,-30 10,-20 0,0';","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"petalPath2 = 'M 0,0 C -10,-10 -30,-50 0,-50 C 30,-50 10,-10 0,0';","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"petalPath3 = 'M 0,0 C -10,-20 -20,-30 0,-50 C 20,-30 10,-20 0,0';","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"petalPath4 = 'M0,0 C-1,-15 -25,-30 -10,-50 C-10,-40 10,-40 10,-50 C25,-30 1,-15 0,0'","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"petalSize = 50;","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md `## Data!\n\nWe clean up the data inside our Utils but should probably do that here...`","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"data=d3.json('https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json')\n // use lodash to turn our object into an array!\n .then(data => _.values(data));","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md `## Draw a Single Flower with Data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"d = data[12]","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"d.Rated","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"{\n if (d.Rated === \"G\") return petalPath\n else if (d.Rated === \"PG\") return petalPath2\n else if (d.Rated === \"PG-13\") return petalPath3\n return petalPath4\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"function petPathFunc(x) {\n if (x === \"G\") return petalPath\n else if (x === \"PG\") return petalPath2\n else if (x === \"PG-13\") return petalPath3\n return petalPath4\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"// index.html you'd just create an svg element\n// here we will create a const\n\n{\nconst svg = DOM.svg(petalSize * 2, petalSize * 2);\n\n// extract single object from array\nconst d = data[92];\nconst numPetals = numPetalScale(+d.imdbVotes.replace(/\\,/g, ''))\nconst sizePetals = sizeScale(+d.imdbRating)\nconst petPath = petPathFunc(d.Rated)\nconsole.log(petPath)\nconst flower = { \n sizePetals,\n petals: _.times(numPetals, i => {\n return {\n angle: 360 * i / numPetals, \n petPath\n }\n }),\n};\n \n const flowers = d3.select(svg)\n .selectAll('g')\n .data([flower])\n .enter()\n .append('g')\n .attr('transform', d => `translate(${petalSize}, ${petalSize})scale(${d.sizePetals})`)\n \n flowers.selectAll('path')\n .data(d => d.petals)\n .enter()\n .append('path')\n .attr('d', d => d.petPath)\n .attr('transform', d => `rotate(${d.angle})`)\n\nreturn svg;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md `## Now all the flowers!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"{\nconst svg = DOM.svg(petalSize * 25, petalSize * 11)\n\nd3.select(svg)\n .append('rect')\n .attr('height', \"100%\")\n .attr('width', \"100%\")\n .attr('fill', \"#191919\")\n \n const flowers = d3.select(svg)\n .selectAll('g')\n .data(flowersData)\n .enter()\n .append('g')\n // it seems like 1 % 17 determines the number of flowers per row\n .attr('transform', (d, i) => `translate(${(i % 15) * petalSize + 120 },${Math.floor(i / 15) * petalSize + 70})scale(${d.sizePetals})`)\n \n flowers.selectAll('path')\n .data(d => d.petals)\n .enter()\n .append('path')\n .attr('d', d => d.petPath)\n .attr('transform', d => `rotate(${d.angle})`)\n // make the color the movie rating\n .attr('stroke', d => colorScale(d.genre))\n .attr('fill', 'none')\n .attr('stroke-width', '4')\n\nreturn svg;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"md `## Utility functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"ratingMinMax = d3.extent(data, d => +d.imdbRating);","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"votesMinMax = d3.extent(data, d => +d.imdbVotes.replace(/[^\\d\\.\\-]/g, \"\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"sizeScale = d3.scaleLinear().domain(ratingMinMax).range([0.1, 0.5]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([5,7,11,15,19,20]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"flowersData = _.map(data, d => { \n const numPetals = numPetalScale(+d.imdbVotes.replace(/\\,/g, ''))\n const sizePetals = sizeScale(+d.imdbRating)\n const petPath = petPathFunc(d.Rated)\n return {\n sizePetals,\n petals: _.times(numPetals, i => {\n return {\n angle: 360 * i / numPetals, \n petPath,\n rating: d.Rated,\n genre: d.Genre\n }\n }),\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"colorScale = d3.scaleOrdinal()\n .domain(d3.extent(flowersData, d => d.rating))\n .range([\"#CBC2DD\", \"#A393C0\", \"#4E2A84\", \"white\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md `## Libraries`","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}