31:Te85,{ const svg = d3.select(DOM.svg(width, height)); svg.append("text") .attr("text-anchor", "middle") .attr("transform", "rotate(270)") .attr("x", -(margin.top+(height-margin.top-margin.bottom)/2)) .attr("y", margin.left*0.3) .attr("font-weight", "bold") .attr("font-family", 'AtlasGrotesk, "Helvetica Neue", Helvetica, Arial, sans-serif') .text("Debate Performance"); svg.append("text") .attr("text-anchor", "middle") .attr("x", margin.left+(width-margin.left-margin.right)/2) .attr("y", height-margin.bottom*0.4) .attr("font-weight", "bold") .attr("font-family", 'AtlasGrotesk, "Helvetica Neue", Helvetica, Arial, sans-serif') .text("Pre-debate favorability"); const regressionLine = ss.linearRegressionLine(ss.linearRegression(data.map(row => [row.predebate, row.performance]))); const regressionEndpoints = [ {"predebate": 40, "performance": regressionLine(40)}, {"predebate": 80, "performance": regressionLine(80)} ]; svg.append("path") .datum(regressionEndpoints) .attr("stroke", "#808285") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-dasharray", "0 4") .attr("stroke-linecap", "round") .attr("d", d3.line() .x(d => x(d.predebate)) .y(d => y(d.performance))); const enterObservations = svg.selectAll(".observation") .data(data) .enter() .append("g") .attr("class", "observation"); const radius=7; enterObservations .append("circle") .attr("cx", d=> x(d["predebate"])) .attr("cy", d=> y(d["performance"])) .attr("r", radius) .attr("fill", d => d.performance>regressionLine(d.predebate) ? "rgba(0, 143, 213, 0.5)" : "rgba(237, 113, 58, 0.5)") .attr("stroke", d => d.performance>regressionLine(d.predebate) ? "rgba(0, 143, 213, 1.0)" : "rgba(237, 113, 58, 1.0)"); enterObservations .append("text") .text(d=> { const name_split = d.name.split(" "); return name_split[name_split.length-1]; }) .attr("x", d=>x(d["predebate"])) .attr("y", d=>y(d["performance"])) .attr("style", "font-family: 'DecimaMonoPro', monospace; font-size: 14px;"); document.body.appendChild(svg.node()); const observations=d3.selectAll(".observation") .data(data) .select("text") .each((d,i,l)=> { d.width=l[i].getBBox().width; d.height=l[i].getBBox().height; }); svg.remove(); const movable=data.map(d=>label_positions.map(p=>[x(d["predebate"])+d.width*p.width+radius*p.radiusx, y(d["performance"])+d.height*p.height+radius*p.radiusy-d.height, x(d["predebate"])+d.width*p.width+radius*p.radiusx+d.width, y(d["performance"])+d.height*p.height+radius*p.radiusy])); const rfactor=0.5; const obstacle=data.map(d=>[x(d["predebate"])-rfactor*radius, y(d["performance"])-rfactor*radius, x(d["predebate"])+rfactor*radius, y(d["performance"])+rfactor*radius]); const best_positions=find_positions(movable, obstacle); svg.selectAll(".observation") .data(data) .select("text") .attr("x", (d, i)=> { return x(d["predebate"]) + d.width*label_positions[best_positions[i]].width + radius*label_positions[best_positions[i]].radiusx;} ) .attr("y", (d,i)=> y(d["performance"]) + radius*label_positions[best_positions[i]].radiusy + d.height*label_positions[best_positions[i]].height ) svg.append("g") .call(yAxis); svg.append("g") .call(yAxis_lines); svg.append("g") .call(xAxis); svg.append("g") .call(xAxis_lines); return svg.node(); }32:[] 2f:{"title":"FiveThirtyEight Chart Replicated","cells":[{"id":0,"value":"md`# FiveThirtyEight Chart Replicated\n\nFiveThirtyEight has a distinct style of charts. This is an attempt to replicate this and recreate the chart that can be found [here](https://projects.fivethirtyeight.com/democratic-debate-october-poll/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"xAxis_lines = g=> g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisBottom(x)\n .tickValues([20, 50, 80])\n .tickSize(height - margin.top - margin.bottom)\n )\n .call(g => g.selectAll(\"text\")\n .remove())\n .call(g => g.selectAll(\".tick:not(:first-of-type) line\")\n .attr(\"stroke-opacity\", 0.7))","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x)\n .tickValues([20,50,80])\n .tickFormat(t=>{\n if(t==20) {\n return \"somewhat unfavourable\";\n } else if (t==50) {\n return \"neutral\";\n } else if (t==80) {\n return \"somewhat favourable\";\n }\n })\n \n )\n .call(g=>g.selectAll(\"text\")\n .attr(\"style\", `font-family: AtlasGrotesk, \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 14px; fill: #808285;`));","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"x = d3.scaleLinear()\n .domain([20, 80]).nice()\n .range([margin.left, width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"yAxis_lines = g=> g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisRight(y)\n .tickValues([2.1,3,3.9])\n .tickSize(width - margin.left - margin.right)\n )\n .call(g => g.selectAll(\"text\")\n .remove())\n .call(g => g.selectAll(\".tick:not(:first-of-type) line\")\n .attr(\"stroke-opacity\", 0.7))","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .tickValues([2.1,3,3.9])\n .tickFormat(t=>{\n if(t==2.1) {\n return \"somewhat bad\";\n } else if (t==3) {\n return \"neutral\";\n } else if (t==3.9) {\n return \"somewhat good\";\n }\n })\n \n )\n .call(g=>g.selectAll(\"text\")\n .attr(\"style\", `font-family: AtlasGrotesk, \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 14px; fill: #808285;`));\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"y = d3.scaleLinear()\n .domain([2.1, 3.9])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"find_positions = function(movable, obstacle) {\n \n const random_generator = makeRandomGenerator(\"\");\n var positions = [];\n for(var i=0; i