30:T836,chart2 = (data, title) => { const hierarchy = d3.hierarchy(data) const tree = d3.tree() .size([2*Math.PI,520]) const root = tree(hierarchy) const linkRadial = d3.linkRadial() .angle(d=>d.x) .radius(d=>d.y) const svg = d3.select(DOM.svg(width,height2)) .attr("viewBox",[0,0,width/2-250,height2+750]) .style("background-color","black") const g = svg.append("g") g.append("text") .attr("x",width/2-300) .attr("y",100) .attr("text-anchor","middle") .style("font-size","5em") .style("font-weight","bold") .style("fill","#f9ae91") .text(title) g.append("g") .attr("transform",`translate(${width/2-300},${height2/2+450})`) .selectAll("radial") .data(root.links()) .join("path") .attr("d",linkRadial) .style("fill","none") .style("stroke","#f9ae91") .style("stroke-width",1.5) g.append("g") .attr("transform",`translate(${width/2-300},${height2/2+450})`) .attr("font-family","sans-serif") .attr("font-size",10) .attr("stroke-linejoin",3) .attr("stroke-width",3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform",d=>` rotate(${d.x*180 / Math.PI-90}) translate(${d.y},0) rotate(${d.x >=Math.PI?180:0}) `) .attr("dy","0.31em") .attr("x",d=>d.xd.xd.depth==3?d.data.name:d.data[0]) .clone(true) .lower() .attr("stroke","#15166d") .attr("stroke-width",5) svg.call(d3.zoom() .extent([[0,0],[width,height]]) .scaleExtent([1,8]) .on("zoom",zoomed)) function zoomed({transform}) { g.attr("transform",transform) } return svg.node() }31:T72e,chart = (data, title)=> { const hierarchy = d3.hierarchy(data) const tree = d3.tree() .size([2*Math.PI,220]) const root = tree(hierarchy) const linkRadial = d3.linkRadial() .angle(d=>d.x) .radius(d=>d.y) 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",60) .attr("text-anchor","middle") .style("font-size","3em") .style("font-weight","bold") .style("fill","#f9ae91") .text(title) svg.append("g") .attr("transform",`translate(${width/2},${height/2+20})`) .selectAll("radial") .data(root.links()) .join("path") .attr("d",linkRadial) .style("fill","none") .style("stroke","#f9ae91") .style("stroke-width",1.5) svg.append("g") .attr("transform",`translate(${width/2},${height/2+20})`) .attr("font-family","sans-serif") .attr("font-size",10) .attr("stroke-linejoin",3) .attr("stroke-width",3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform",d=>` rotate(${d.x*180 / Math.PI-90}) translate(${d.y},0) rotate(${d.x >=Math.PI?180:0}) `) .attr("dy","0.31em") .attr("x",d=>d.xd.xd.depth==3?d.data.name:d.data[0]) .clone(true) .lower() .attr("stroke","#15166d") .attr("stroke-width",5) return svg.node() }32:[{"id":"2faf5b10b85bbe7a14e6f4dfd693646bc82a692fc91867c5641df86dd152a62a9fc2c3e8cac5e62d9784f2464855e0e330d8c291e92fd7a5cdb3c4d40e357bc8","href":"https://static.observableusercontent.com/files/2faf5b10b85bbe7a14e6f4dfd693646bc82a692fc91867c5641df86dd152a62a9fc2c3e8cac5e62d9784f2464855e0e330d8c291e92fd7a5cdb3c4d40e357bc8","name":"kpop.csv","type":"text/csv","lastModified":1618753024185.869,"size":9845}] 2e:{"title":"KPOP","cells":[{"id":0,"value":"html`

KPOP

Week 3:Relationships. Day 17:Pop Culture.

#30daychartchallenge
The growth of K-pop and debut of new groups every year.

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

Data Credit:\nList of South Korean idol groups. In Wikipedia, The Free Encyclopedia.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"chart(group.get(1990),\"90's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"chart(group.get(2000),\"00's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"html `

This radial tidy tree can be zoomed. Zoom to view names of groups. 👇🏾

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"Kpop2010 = chart2(group.get(2010),\"2010's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"chart(group.get(2020),\"2020's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"margin = ({top: 30, right: 60, bottom: 80, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"height2 = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"group = d3.group(data,d=>d.era,d=>d.year,d=>d.number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment('kpop.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}