30:T5b9,chart ={ const svg = d3.select(DOM.svg(width,height)) .attr("viewBox",[0,0,width,height]) .style("background-color","black") svg.append("text") .attr("x",width/2) .attr("y",70) .text("STUDIO GHIBLI") .style("fill","white") .style("text-anchor","middle") .style("font-family","Roboto") .style("font-size","2em") svg.append("text") .attr("x",width/2) .attr("y",95) .text("Week 4: Timeseries. Day 24: Monochrome.") .style("fill","white") .style("text-anchor","middle") .style("font-family","Roboto") .style("font-size","1.2em") svg.append("text") .attr("x",width/2) .attr("y",115) .text("#30DayChartChallenge") .style("fill","white") .style("text-anchor","middle") .style("font-family","Roboto") .style("font-size","1em") svg.append("g") .attr("transform",`translate(0,${margin.right})`) .selectAll("path") .data(films) .join("path") .attr("transform",(d,i)=>`translate(${x(i%5)},${y(Math.floor(i/5))})`) .attr("d",arc) .attr("fill","white") svg.append("g") .attr("transform",`translate(0,${margin.right})`) .selectAll("text") .data(films) .join("text") .attr("transform",(d,i)=>`translate(${x(i%5)},${y(Math.floor(i/5))})`) .text(d=>d.rt_score) .style("fill","white") .style("text-anchor","middle") return svg.node() }31:[{"id":"b4d7d28ad40bf88020b276ffd82a2d614e176e44df56b8fe05661cfdf63faaf9e6f9cb557fd94b2e1358d96915aae9147287dc5541266b746551516bb8832c23","href":"https://static.observableusercontent.com/files/b4d7d28ad40bf88020b276ffd82a2d614e176e44df56b8fe05661cfdf63faaf9e6f9cb557fd94b2e1358d96915aae9147287dc5541266b746551516bb8832c23","name":"data.json","type":"application/json","lastModified":1619286642408.097,"size":79061}] 2e:{"title":"Studio Ghibli","cells":[{"id":0,"value":"html`

Studio Ghibli

Week 4:Timeseries. Day 24:Monochrome.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"html`

Data Credit:\nStudio Ghibli API\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"annotations = {\n chart\n const annotations = films.map((d,i)=>{\n return {\n x:x(i%5),\n y:y(Math.floor(i/5)),\n dx:0,\n dy:-48.5,\n color:\"black\",\n note:{\n title: d.title+ \", \"+d.release_date,\n }\n }\n })\n \n const type = d3.annotationCustomType(\n d3.annotationLabel,\n {\"className\":\"custom\",\n \"note\":{\n \"align\":\"middle\"}})\n \n const makeAnnotations = d3.annotation()\n .type(type)\n .textWrap(120)\n .annotations(annotations)\n \n d3.select(\"svg\")\n .append(\"g\")\n .attr(\"transform\",`translate(0,${margin.right})`)\n .call(makeAnnotations)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"arc = d3.arc()\n .startAngle(0)\n .endAngle(d=>score(+d.rt_score))\n .innerRadius(40)\n .outerRadius(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"score = d3.scaleLinear()\n .domain([0,d3.max(films,d=>+d.rt_score)])\n .range([0,Math.PI*2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"x = d3.scaleLinear()\n .domain([0,5])\n .range([margin.left,width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"y = d3.scaleLinear()\n .domain([0,5])\n .range([margin.top,height-margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 1300","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"margin = ({top:250,bottom:80,left:150,right:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"films = data.films","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"data = FileAttachment(\"data.json\").json({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\",\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}