2b:null 2c:["$","title",null,{"children":"React Roadmap Chart | Muhammad Usman | Observable"}] 31:T63e,function createChart(parent) { const svg = d3 .select(parent) .append("svg") .attr("width", "100%") .attr("height", height) .attr("viewBox", [-10, -10, width + 20, height]); const curve = d3.line().curve(d3.curveNatural); svg .selectAll("#path") .data(data) .join("path") .attr("id", "path") .attr("fill", "none") .attr("stroke", (d) => d.color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", (d) => (d.children ? "0" : "5,5")) .attr("d", (d) => { console.log(d.curvePoints); return curve(d.curvePoints); }); svg .selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("width", (d) => d.w) .attr("height", (d) => d.h) .attr("fill", (d) => d.children ? "rgb(255, 255, 0)" : "rgb(255, 229, 153)" ) .attr("stroke", (d) => "gray") .attr("stroke-width", 2); // .on("click", (i, d) => { // console.log(d); // d3.select("#my-modal").node().classList.toggle("closed"); // d3.select("#my-modal-overlay").node().classList.toggle("closed"); // d3.select("#my-modal").select("h1").text(d.val); // d3.event.stopPropagation(); // }); svg .selectAll("text") .data(data) .enter() .append("text") .attr("x", (d) => d.x + d.w / 2) .attr("y", (d) => d.y + d.h / 2) .attr("dy", ".35em") .text((d) => d.val) .attr("fill", "black") .attr("text-anchor", "middle"); return svg.node(); }32:T567,config = ({ type: "FE", children: [ { val: "Fundamentals", color: "#2b78e4", children: [ { val: "JSX", color: "#2b78e4" }, { val: "Components", color: "#2b78e4" }, { val: "Composition", color: "#2b78e4" }, { val: "React Hooks", color: "#2b78e4" }, { val: "Create React APP", color: "#2b78e4" }, { val: "Props vs State", color: "#2b78e4" }, { val: "List & Keys", color: "#2b78e4" }, { val: "Conditional Rendering", color: "#2b78e4" }, { val: "Component Life Cycle", color: "#2b78e4" } ] }, { val: "Advanced", color: "red", children: [ { val: "Custom Hooks", color: "red" }, { val: "Context", color: "red" }, { val: "Refs", color: "red" }, { val: "HOC", color: "red" }, { val: "Custom Hooks", color: "red" }, { val: "Portals", color: "red" }, { val: "Error Boundary", color: "red" } ] }, { val: "Ecosystem", color: "green", children: [ { val: "Routers", color: "green" }, { val: "Forms", color: "green" }, { val: "State Management", color: "green" }, { val: "Styling", color: "green" }, { val: "Mobile", color: "green" }, { val: "API Calls", color: "green" }, { val: "SSR", color: "green" } ] } ] })33:T77b,function roadmapper(data, parent) { console.log("date", data); const W = 150; const rh = 30; const rOffset = 100; let lastY = 0; return data.reduce((final, current, index) => { const rw = Math.max(150, current.val.length * 10); if (parent) { const updatedX = (index + 1) % 2 == 1 ? 0 : width - rw; const updatedY = (index + 1) % 2 == 1 ? parent.y + (index / 2) * rOffset : final[final.length - 1].y; console.log(final, parent, current); const updatedCurrent = { val: current.val, color: current.color, y: updatedY, x: updatedX, h: rh, w: rw, px: parent.x, py: parent.y, curvePoints: [ (index + 1) % 2 == 1 ? [parent.x, parent.y + rh / 2] : [parent.x + parent.w, parent.y + rh / 2], (index + 1) % 2 == 1 ? [updatedX + rw, updatedY + rh / 2] : [updatedX, updatedY + rh / 2] ] }; return [...final, updatedCurrent]; } const updatedX = width / 2 - rw / 2; const updatedY = lastY + rOffset; const updatedCurrent = { val: current.val, color: current.color, y: updatedY, x: updatedX, h: rh, w: rw, px: final[index - 1]?.x || null, py: final[index - 1]?.y || null, curvePoints: final[index - 1] ? getRoadmapCurve([ [ final[index - 1]?.x + rw / 2 || null, final[index - 1]?.y + rh || null ], [updatedX + rw / 2, updatedY] ]) : [] }; lastY = updatedY; if (current.children) { const childNode = roadmapper(current.children, updatedCurrent); lastY = childNode[childNode?.length - 1].y; return [...final, { ...updatedCurrent, children: childNode }]; } return [...final, updatedCurrent]; }, []); }34:T794,myCSSStyle = html`