31:Tcc5,chart = { const tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("visibility","hidden") const svg = d3.select(DOM.svg(width,2600))//.attr("viewBox",[0,0,width,4500]) .style("background-color","#e9e4e0") .attr("transform","translate(0,0)") svg.append("defs") .append("g") .attr("id","rice") .append("path") .attr("d",ricePath) const title = svg.append("g") .attr("transform",`translate(${width/2},80)`) .append("text") .style("fill","#f58b11") .style("font-size","30px") .style("text-anchor","middle") .style("font-weight","bold") .text("Rice Varieties: Rest of the World vs India.") svg.append("g") .attr("transform",`translate(${width/2},120)`) .append("text") .style("fill","#f58b11") .style("font-size","20px") .style("text-anchor","middle") .style("font-weight","bold") .text("Week 1:Comparisons. Day 2:Pictogram. #30DayChartChallenge") const multiple = svg.append("g") .attr("transform",`translate(${width/2-120},150)`) .selectAll("country") .data(group) .join("g") .attr("transform",(d,i)=>`translate(0,${i<17?i*45:i*100-900})`) const rice = multiple.append("g").attr("transform",`translate(0,0)`) rice.append("g") .selectAll("use") .data(d=>d[1]) .join("use") .attr("xlink:href","#rice") .style("stroke","black") .style("stroke-width",8) .style("fill","#e0a871") .attr("transform",(d,i)=>`translate(${scale(i%10*1.5)},${scale(Math.floor(i/10))}) scale(0.12)`) .on("mousemove",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",3) tooltip.transition() .duration(200) .style("visibility","visible") tooltip.html("

"+d.variety+"

") .style("transform","translateY(-55%)") .style("left",(event.x)+5+"px") .style("top",(event.y)+50+"px") }) .on("mouseout",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",2.5) tooltip.transition().style("visibility","hidden") }) const labels = rice.append("g") .append("text") .attr("x",width/2-450) .attr("y",38) .style("text-anchor","end") .style("font-size","20px") .text(d=>d[0]) return svg.node() }32:[{"id":"569fcef80084067b3edd9b00140ed713095222cf8e1ec5b77816907d8fcea04a90cb3af437cca6d5d468e2e31e39b80332716573495019564072d6b51cc458f9","href":"https://static.observableusercontent.com/files/569fcef80084067b3edd9b00140ed713095222cf8e1ec5b77816907d8fcea04a90cb3af437cca6d5d468e2e31e39b80332716573495019564072d6b51cc458f9","name":"rice.csv","type":"text/csv","lastModified":1617361612298.141,"size":21419}] 2f:{"title":"Rice Varieties: Rest of the World vs India.","cells":[{"id":0,"value":"html`

Rice Varieties: Rest of the World vs India.

Week 1:Comparisons. Day 2:Pictogram.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1003,"value":"html`

Data Credit: Wikipedia:List of rice cultivars\n\n
\nIcons made by Pause08 from www.flaticon.com

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"ricePath = \"m422.296875 189.652344c43.738281 43.738281 43.738281 114.652344 0 158.390625-43.738281-43.738281-43.738281-114.652344 0-158.390625zm0 0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"scale = d3.scaleLinear()\n .domain([0,10])\n .range([0,100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"group = d3.group(data,d=>d.country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"rice.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"style = html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}