Public
Edited
May 5, 2023
Paused
<svg width="800" height="600">
<style>
.xaxis {stroke: black;
stroke-width: 2px}
.biden {stroke: blue}
.trump {stroke: red}
.dataline {fill: none;
stroke-opacity: 1;
stroke-width: 1px}
.axislab {font-size: 16px}
</style>
<path d="M 50,585 l 700,0" class="xaxis"/>
<text x="775" y="580" class="axislab" text-anchor="end">Over-Estimate</text>
<text x="25" y="580" class="axislab">Under-Estimate</text>
</svg>
flowerPlot = d3.select(svgCell)
data = FileAttachment("BidenvTrump2020_cleaned_small_year.csv").csv()
data.forEach(d => {
d["pct_diff_x"] = polarXY(d["sample_size"], 90 - (d["pct_diff"]*5.294))["x"]; //5.294117647058824
d["pct_diff_y"] = polarXY(d["sample_size"], 90 - (d["pct_diff"]*5.294))["y"];
})
{
let viz_height = flowerPlot.attr("height")
let baseline = viz_height - 50
let viz_width = flowerPlot.attr("width")
let viz_width_mid = viz_width / 2
let line_scale = 0.01
flowerPlot.selectAll(".dataline")
.data(data)
.join("path")
.attr("d", d=> "M " + viz_width_mid + " " + baseline + " l " + d["pct_diff_x"]*line_scale + " -" + d["pct_diff_y"]*line_scale)
.attr("class", d => {
if (d["candidate_name"] == "Joe Biden") {return "biden dataline";}
else if (d["candidate_name"] == "Donald Trump") {return "trump dataline";}
})
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
