2b:null 2c:["$","title",null,{"children":"Shirley Wu x Coding Train | Maya Gans | Observable"}] 31:[] 2f:{"id":"15f2f92ee8cff997","slug":"shirly-wu-x-coding-train-flower-tutorial","title":"Shirley Wu x Coding Train","thumbnail":"393642e74d582c70adb8a8e8c81e0cd19e145b69e217c3b0770ea2fb83e92782","access_level":"public","create_time":"$D2020-09-09T03:09:59.450Z","update_time":"$D2021-02-19T21:38:18.172Z","view_time":null,"first_public_time":"$D2020-09-09T17:36:12.187Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024"},"version":588,"publish_version":588,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md `## A Single Petal`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"petalSize = 50;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md `## Draw a Single Flower with Data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"d = data[12]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"d.Rated","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md `## Now all the flowers!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md `## Utility functions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"ratingMinMax = d3.extent(data, d => +d.imdbRating);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"votesMinMax = d3.extent(data, d => +d.imdbVotes.replace(/[^\\d\\.\\-]/g, \"\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"sizeScale = d3.scaleLinear().domain(ratingMinMax).range([0.1, 0.5]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"numPetalScale = d3.scaleQuantize().domain(votesMinMax).range([5,7,11,15,19,20]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md `## Libraries`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"