30:T341f,annotations = { parade const annotate = [ { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label: "A finance grad who had just started to learn to code.", title: "Hello ! This is me in Jan, 2020.", wrap:150, }, x:0, y:40, dx:0, dy:-50, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label: "Came across 'Breathing City' by Dark Horse Analytics and was fully captivated.", title: "Intro to D3.js" }, x:120, y:60, dx:0, dy:50, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label: "This gem taught me all the basics and more.", title: "Interactive Data Visualization for the Web by Scott Murray", wrap:155 }, x:240, y:40, dx:0, dy:-50, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label: "This book with all its follow along example code, another gem.", title: "D3.js in Action by Elijah Meeks" }, x:360, y:60, dx:0, dy:50, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label: "Sat down and deconstructed Shirley Wu's code and made notes.", title: "Film Flowers by Shirley Wu" }, x:480, y:40, dx:0, dy:-50, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { label:"D3.js version 4", title: "Earthquakes: First D3 project." }, x:550, y:500, dx:0, dy:-20, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "74 example bl.ocks.", title: "Bl.ocks" }, x:270, y:450, dx:-50, dy:0, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCalloutElbow, {"className":"custom", "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "22 examples from other resources. (Mainly D3.js blogs.)", title: "Other", wrap:150 }, x:400, y:800, dx:-50, dy:20, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCalloutElbow, {"className":"custom", "note":{"lineType":"vertical", "align":"middle"}}), note: { title: "Stackoverflow" }, x:500, y:830, dx:-50, dy:80, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCallout, {"className":"custom", "note":{"lineType":"horizontal", "align":"middle"}}), note: { title: "Observable" }, x:530, y:840, dx:0, dy:80, color:"#d88c9a" }, { type:d3.annotationCustomType( d3.annotationCalloutCircle, {"className":"custom", "connector":{"type":"elbow"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "A total of 88 resources. 58% Bl.ocks, 27% Other and the rest 15% Stackoverflow + Observable.", title: "Under The Influence: Second Project (version 5 D3.js)", wrap:300, padding: 15 }, x:-150, y:1000, nx:300, ny:1080, color:"#f2d0a9", subject:{ radius: 320, } }, { type:d3.annotationCustomType( d3.annotationCalloutCircle, {"className":"custom", "connector":{"type":"elbow"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "63% Observable notebook examples, 30% Bl.ocks and 7% Other resources.", title: "Departed: Third Project (version 6 D3.js)", wrap:300, padding: 15 }, x:550, y:1500, nx:100, ny:1550, color:"#8e7dbe", subject:{ radius: 320, } }, { type:d3.annotationCustomType( d3.annotationCalloutCircle, {"className":"custom", "connector":{"type":"elbow"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "52% Observable notebook examples.", title: "World Power Plants: Fourth Project (version 6 D3.js)", wrap:300, padding: 15 }, x:-150, y:2000, nx:350, ny:2050, color:"#99c1b9", subject:{ radius: 320, } }, { type:d3.annotationCustomType( d3.annotationCalloutCircle, {"className":"custom", "connector":{"type":"elbow"}, "note":{"lineType":"vertical", "align":"middle"}}), note: { label: "65% Observable + Other resources.", title: "African American Writers: Fifth Project (version 6 D3.js)", wrap: 300, padding: 15 }, x:550, y:2500, nx:150, ny:2550, color:"gold", subject:{ radius: 320, } } ].map(d=>{ return d }) const makeAnnot = d3.annotation() .type(d3.annotationCallout) .annotations(annotate) d3.select("svg") .append("g") .attr("transform",`translate(${width/2-220},200)`) .call(makeAnnot) const milestone = d3.select("svg").append("g") .attr("transform",`translate(${width/2-220},200)`) .selectAll("circle") .data(group) .join(enter=>{ enter.append("a") .attr("href",(d,i)=>{ if (i==5){return "https://urmilaj.github.io/Earthquake/"} if (i==6) {return "https://observablehq.com/@urmilaj/under-the-influence"} if (i==7) {return "https://observablehq.com/@urmilaj/departed"} if(i==8) {return "https://observablehq.com/@urmilaj/world-power-plants"} if (i==9) {return "https://observablehq.com/@urmilaj/african-american-writers"} else {return null}}) .attr("target","_blank") .append("circle") .attr("r",(d,i)=> i<=4 ? 10 : 50) .attr("cx",(d,i)=> i<=4 ? i*120 : x(d.key)) .attr("cy",(d,i)=> i<=4 ? 50 : y(d.key)) .style("fill",(d,i)=> i<=4? "transparent" : color(d.key)) .style("stroke",(d,i)=>i<=4? "#d88c9a" : color(d.key)) .style("stroke-width",2) d3.select("svg").selectAll("circle") .filter((d,i)=>i>=5) .each((d,i)=>{ const hierarchy = d3.hierarchy(d.values) const tree = d3.tree() .size([Math.PI,180]) const root = tree(hierarchy) const linkRadial = d3.linkRadial() .angle(d=>d.x) .radius(d=>d.y*1.6) const radials = d3.select("svg").append("g") .attr("transform",`translate(${width/2-220},200)`) .selectAll("radial") .data(root.links()) .join("path") .attr("transform",`translate(${x(d.key)},${y(d.key)})`) .attr("d", i%2==0 ? linkRadial.angle(d=>-d.x):linkRadial.angle(d=>d.x)) .style("fill","transparent") .style("stroke-width",1.5) .style("stroke",color(d.key)) const source = d3.select("svg").append("g") .attr("transform",`translate(${width/2-220},200) translate(${x(d.key)},${y(d.key)})`) .selectAll("circles") .data(root.descendants().filter(d=>d.depth==2)) .enter() .append("a") .attr("href",d=>d.data[0].Links) .attr("target","_blank") .append("circle") .attr("transform", d => ` rotate(${i%2==0?d.x * -180 / Math.PI - 90:d.x*180 / Math.PI - 90}) translate(${d.y*1.6},0) `) .attr("fill", color(d.key)) .attr("r",3) .attr("data-tippy-content",d=>d.data[0].Type+", "+d.data[0].Source) .on("mousemove",function (event,d){ d3.select(this) .style("opacity",1) .attr("stroke","white") .attr("stroke-width",2) .attr("r",8)}) .on("mouseout",function (event,d){ d3.select(this) .style("opacity",1) .attr("stroke","transparent") .attr("stroke-width",0) .attr("r",3)}); tippy(source.nodes(),{ theme:"light-border" }) }) }) } 31:[{"id":"fb8ca80358343a94ad96808797fd17e3912e5fe69bd4bce35d217597fe5e39c3ec5be2612b25fd1a62f72375cb31f68cee7e735c342ea15a3f178796ca9b3c0f","href":"https://static.observableusercontent.com/files/fb8ca80358343a94ad96808797fd17e3912e5fe69bd4bce35d217597fe5e39c3ec5be2612b25fd1a62f72375cb31f68cee7e735c342ea15a3f178796ca9b3c0f","name":"d3resources.csv","type":"text/csv","lastModified":1621164633073.186,"size":56350}] 2e:{"title":"HAPPY BIRTHDAY D3 !","cells":[{"id":0,"value":"html`

HAPPY BIRTHDAY D3 !

Ever since I started to learn D3.js I have bookmarked all the resources I have used for every project. This data visualization is a timeline and radial tidy tree of each project and the respective resources used.\n In a span of one year I have made projects using D3 version 4,5,6 and this could not be possible without all the examples available on Bl.ocks, Observable, Stackoverflow and other personal blogs.\n Thank you to every person who has provided code examples. You've helped flatten the \"steep learning curve\" that D3.js is associated with.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"parade = {\n \n const svg = d3.select(DOM.svg(width,height))\n .style(\"background-color\",\"rgb(63, 48, 48)\")\n .attr(\"transform\",\"translate(0,0)\")\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"groups = d3.group(data,d=>d.Project,d=>d.Type)","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"color = d3.scaleOrdinal()\n .range([\"#d88c9a\",\"#f2d0a9\",\"#8e7dbe\",\"#99c1b9\",\"gold\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"y = d3.scaleOrdinal()\n .domain(group,d=>d.key)\n .range([0,550,1000,1500,2000,2500])","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"x = d3.scaleOrdinal()\n .domain(group,d=>d.key)\n .range([-150,550])","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"group = Array.from(d3.rollup(data,v=>v.length,d=>d.Project,d=>d.Type,d=>d),([key,values])=>{\n return{\n key,\n values\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"data = FileAttachment(\"d3resources.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"tippy = require('tippy.js@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\",\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"html\n`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}