2b:null 2c:["$","title",null,{"children":"Movies Represented In the Flowers | Incredible vis | Observable"}] 31:[] 2f:{"id":"87c3daa243ff5eee","slug":null,"title":"Movies Represented In the Flowers","thumbnail":"7dbf329d81435d583b479331b1867b81978b54805dc40e513ddbecb16f2565cf","access_level":"public","create_time":"$D2023-08-29T12:21:55.425Z","update_time":"$D2023-12-26T16:26:40.701Z","view_time":null,"first_public_time":"$D2023-12-26T16:08:22.305Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ce191a16d3a3c1a1","login":"incredible-vis","name":"Incredible vis","avatar_url":"https://avatars-next.observableusercontent.com/d332850ddd10aa75069eeafffc79d79d80bc755bce4cfdbe3b447ea00fac3409","tier":"starter_2024"},"version":803,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cab7f8ad58f1b89a","login":"bhanusunku","name":"Bhanu Kedhar","avatar_url":"https://avatars-next.observableusercontent.com/17f0f648b747daa910891775bd30306e68fc08b0a4bb76f574e3cd6fdafbfc7e","tier":null}],"members":[{"type":"individual","id":"cab7f8ad58f1b89a","login":"bhanusunku","name":"Bhanu Kedhar","avatar_url":"https://avatars-next.observableusercontent.com/17f0f648b747daa910891775bd30306e68fc08b0a4bb76f574e3cd6fdafbfc7e","tier":null,"role":"editor"},{"type":"team","id":"ce191a16d3a3c1a1","login":"incredible-vis","name":"Incredible vis","avatar_url":"https://avatars-next.observableusercontent.com/d332850ddd10aa75069eeafffc79d79d80bc755bce4cfdbe3b447ea00fac3409","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Movies Represented In the Flowers","cells":[{"id":0,"value":"# Movies Represented In the Flowers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"{\n const svg = htl.html``\n\n const g = d3.select(svg).selectAll(\"g\")\n .data(dataForFlowers)\n .enter()\n .append(\"g\")\n .attr(\"transform\", (d,i) => `translate(${d.translate})`);\n const insideg = g.selectAll(\"path\")\n .data(d => {\n return _.times(d.numPetals, petalNum => {\n return {...d, rotate : petalNum * (360/d.numPetals)}\n } )\n })\n .enter()\n .append(\"path\")\n .attr(\"d\", d=> d.path)\n .attr(\"transform\", (d,i) => `scale(${d.scale})rotate(${d.rotate})`)\n .attr(\"fill\", (d,i) => d.color)\n .attr(\"fill-opacity\", 0.8)\n .attr(\"stroke\", (d,i) => d.color)\n .attr(\"stroke-width\", 3);\n \n const text = g\n .append(\"text\")\n .text(d => `${d.title.slice(0,15)}` + `...`)\n .attr(\"y\", 40)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 10);\n\n console.log(svg)\n \n return scrollSVG(svg)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"The number of petals scaled by number of votes for a movie, size of the whole flower is scaled by movie rating and the type of the petal represents type of movie rated(ex : G, PG, PG13)\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":771,"value":"## Helpers and Testers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"unParsedMovies = d3.json(\"https://raw.githubusercontent.com/sxywu/filmflowers/master/movies.json\").then(movies=> Object.values(movies))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"movies = unParsedMovies.map(movie => ({\n ...movie,\n imdbRating : parseFloat(movie.imdbRating),\n imdbVotes : parseInt(movie.imdbVotes.replace(/,/g, ''), 10),\n Genre : movie.Genre.split(\", \")\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"moviesList = _.map(movies, d=> d.Title)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":" {\n const uni = new Set();\n movies.forEach(movie =>{\n movie.Genre.forEach(genre =>{\n uni.add(genre)\n })\n })\n return uni\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"uniqueGenre = movies.reduce((unigen, currobj) => {\n currobj.Genre.forEach((genre) => {\n if (unigen[genre]) {\n unigen[genre] += 1;\n } else {\n unigen[genre] = 1;\n }\n });\n return unigen;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"{\n return [Object.keys(uniqueGenre).length, uniqueGenre]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"So there are total of 18 genres we will take the top five to work with and they are","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"fiveGenre = Object.fromEntries(Object.entries(uniqueGenre).sort((a,b) => {return b[1] - a[1]}).slice(0,5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"path = \"M45,9 C18,27 18,54 36,63 C36,63 45,45 54,63 C72,54 72,27 45,9\"\n// \"M15,3 C6,9 6,18 12,21 C12,21 15,15 18,21 C24,18 24,9 15,3\"\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"barWidth = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"data = [10,20,30,40,50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"{\n const svg = htl.html`

`\n\n const temp = d3.select(svg).selectAll(\"path\")\n .data(movies)\n .attr(\"fill\", d => colors[d.Genre[0]] || colors.Other)\n .attr(\"fill-opacity\", \"0.5\")\n .attr(\"stroke\", d => colors[d.Genre[0]] || colors.Other)\n .attr(\"stroke-width\", 2)\n \n\n console.log(temp)\n \n return svg\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"colors[\"Other\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"dd = [10,20,30,40,50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"{\n const barWidth = 30;\n\n const svg = html`\n \n `;\n d3.select(svg)\n .selectAll(\"rect\")\n .data(dd)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * barWidth)\n .attr(\"y\", d=> d3.max(dd) - d)\n .attr(\"height\", (d) => d)\n .attr(\"width\", barWidth)\n .attr(\"stroke-width\", 3)\n .attr(\"fill\", \"#7d7676\")\n .attr(\"stroke\", \"black\");\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"Object.values(colors).slice(0, Object.values(colors).length -1)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"dataForFlowers = {\n const colorScale = d3.scaleOrdinal().domain(Object.keys(colors).slice(0, Object.keys(colors).length -1))\n .range(Object.values(colors).slice(0, Object.values(colors).length -1))\n .unknown(colors[\"Other\"]);\n const minMaxRating = d3.extent(movies.map(movie => movie.imdbRating))\n const minMaxVotes = d3.extent(movies.map(movie => movie.imdbVotes))\n const sc = d3.scaleLinear().domain(minMaxRating).range([0.2,0.75])\n const numPet = d3.scaleQuantize().domain(minMaxVotes).range([5,6,7,8,9])\n return movies.map((movie, i) => {\n return {\n title: movie.Title,\n color: colorScale(movie.Genre[0]),\n path: pathObj[movie.Rated],\n scale: sc(movie.imdbRating),\n numPetals: numPet(movie.imdbVotes),\n translate: calculateGridPos(i)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"petalPaths = [\n 'M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0',\n 'M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0',\n 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0',\n 'M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0',\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"rated = ['G', 'PG', 'PG-13', 'R']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"pathObj = _.zipObject(rated, petalPaths)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"import {\n slide, slide_style,\n barData,\n textWidth, transformCode, transformSVG, scrollSVG, svgHeight, calculateGridPos,\n} from 'd8565901a86e96b2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"