30:T173c,chart = { const tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("visibility","hidden") const svg = d3.select(DOM.svg(width,height)) .style("background-color","#86569a") svg.append("g") .attr("transform",`translate(${width/2-20},${height/2-80})`) .append("rect") .attr("width",350) .attr("height",500) .attr("x",-135) .attr("y",-125) .style("fill","transparent") .style("stroke","#f5d7cb") const label = svg.append("g") .attr("transform",`translate(${width/2},${height/2})`) .attr("class","label") label.append("text") .style("fill","#f5d7cb") .style("font-size","3em") .style("font-weight","bold") .style("text-anchor","middle") .attr("x",20) .attr("y",-30) .text("On This Day") label.append("text") .style("fill","#f5d7cb") .style("font-size","3em") .style("font-weight","bold") .style("text-anchor","middle") .attr("x",15) .attr("y",50) .text("April 3") label.append("text") .style("fill","#f5d7cb") .style("font-size","3em") .style("font-weight","bold") .style("text-anchor","middle") .attr("x",20) .attr("y",145) .text("In History") const day = svg.append("g") .attr("transform",`translate(${width/2},${height/2})`) .selectAll("circle") .data(group) .join(enter=>{ const c = enter.append("circle") .attr("r",10) .attr("cx",(d,i)=>i%2==0?x(i):10) .attr("cy",(d,i)=>i%2==0?65:y(i)) .attr("fill","#f5d7cb") .attr("stroke","#f5d7cb") .style("display","none") svg.selectAll("circle") .each((d,i)=>{ const hierarchy = d3.hierarchy(d[1]) const tree = d3.tree() .size([Math.PI,180]) const root = tree(hierarchy) const linkRadial = d3.linkRadial() .angle(d=>d.x) .radius(d=>d.y) svg.append("g") .attr("transform",`translate(${width/2-20},${height/2-80}) translate(${i%2==0?x(i):50},${i%2==0?115:y(i)}) rotate(${i==0?-180:0}) rotate(${i==1?-90:0}) rotate(${i==3?90:0})`) .selectAll("radial") .data(root.links()) .join("path").attr("class","day") .attr("d",i%2==0?linkRadial.radius(d=>d.y*1.3):linkRadial.radius(d=>d.y*1.5)) .style("fill","transparent") .style("stroke","#f5d7cb") .style("stroke-width",1.8) svg.append("g") .attr("transform",`translate(${width/2-20},${height/2-80}) translate(${i%2==0?x(i):50},${i%2==0?115:y(i)}) rotate(${i==0?-180:0}) rotate(${i==1?-90:0}) rotate(${i==3?90:0})`) .selectAll("circles") .data(root.descendants()) .join("circle") .attr("transform", d => `rotate(${i%2==0?d.x * 180 / Math.PI - 90:d.x*180 / Math.PI - 90}) translate(${i%2==0?d.y*1.3:d.y*1.5},0)`) .style("fill","#f5d7cb") .style("stroke","#f5d7cb") .style("stroke-width",1.8) .attr("r",d=>d.depth==1?0:4) .on("mouseover",function (event,d){ d3.selectAll(".label").transition().duration(350).style("opacity",0) tooltip.transition() .duration(500) .style("visibility","visible") tooltip.html("

This day in"+"

"+"

"+d.data.category+"

"+"

"+d.data.details+"

") // .style("transform","translateX(100%)") //.style("transform","translateY(-50%)") .style("left",(event.fromElement.clientWidth)/2+30+"px") .style("top",(event.fromElement.clientHeight)/2-25+"px") // .style("left","5px") // .style("top","530px") }) .on("mouseout",function (event,d){ d3.selectAll(".label").transition().duration(600).style("opacity",1) tooltip.transition().duration(1000).style("visibility","hidden") }) }) }) return svg.node() }31:[{"id":"ff44d6271b91b3f41920e523b0240a923e41ee327e19492f2cbda8d82c219161d9aa6beea0643313c388814bf9e55ab9368ed45f0745e2246853de3e6364464b","href":"https://static.observableusercontent.com/files/ff44d6271b91b3f41920e523b0240a923e41ee327e19492f2cbda8d82c219161d9aa6beea0643313c388814bf9e55ab9368ed45f0745e2246853de3e6364464b","name":"onThisDay.csv","type":"text/csv","lastModified":1617455419451.725,"size":12201}] 2e:{"title":"On This Day.","cells":[{"id":0,"value":"html`

On This Day.

Week 1:Comparisons. Day 3:Historical.

#30daychartchallenge

Hover over node ends for more info.

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"html`

Data Credit:\n On This Day.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"y = d3.scaleOrdinal()\n .range([-125,375])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"x = d3.scaleOrdinal()\n .range([-135,215])","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"group = d3.group(data,d=>d.category,d=>d.type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = FileAttachment(\"onThisDay.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3= require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"style = html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}