Public
Edited
May 8, 2023
flowerPlot = d3.select(svgCell)
import {toNum} from "@emfielduva/dvlib"
import {radiansFromDeg} from "@emfielduva/dvlib"
import {polarXY} from "@emfielduva/dvlib"
data = FileAttachment("Sampled_BidenvTrump@2.csv").csv()
data.forEach(d => {
d["pct_diff_x"] = polarXY(d["sample_size"], 90 - (d["pct_diff"]*5.294))["x"];
d["pct_diff_y"] = polarXY(d["sample_size"], 90 - (d["pct_diff"]*5.294))["y"];
})
datalines = 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" && d["partisan"] != "") {return "dataline biden"}
else if (d["candidate_name"] == "Donald Trump" && d["partisan"] != "") {return "trump dataline"}
else {return "dataline"}}
)
zoomToBoundingBox = (evt,d) => {
evt.stopPropagation();
let viewBox = "300 600 200 50";
let svg = d3.select(svgCell);
svg.transition().duration(1000).attr("viewBox", viewBox);
}
dimAll = () => {
datalines.attr("class", "dataline")
}
filter_all = (field, val) => {
if (val == "all") {return datalines}
else if (val != "all") {return datalines.filter(d => d[field] == val)}
}
filter = (field,val) => {
// create a function to increase opacity only for a single element, via its data.
dimAll(); // first we call dimAll to dim all of them.
filter_all(field, val).attr("class", d => {
if (d["candidate_name"] == "Joe Biden" && d["partisan"] != "") {return "dataline biden"}
else if (d["candidate_name"] == "Donald Trump" && d["partisan"] != "") {return "trump dataline"}
else {return "dataline"}})
}
bigDim = () => {
datalines.attr("class", "noline")
}
voter_filter = (val) => {
bigDim();
datalines.filter(d => d["population"] == val).attr("class", d => {
if (d["candidate_name"] == "Joe Biden" && d["partisan"] != "") {return "dataline biden"}
else if (d["candidate_name"] == "Donald Trump" && d["partisan"] != "") {return "trump dataline"}
else {return "dataline"}})
}
filter_all_states = (val) => {
if (val == "All polls") {return datalines}
else if (val != "All polls") {return datalines.filter(d => d["state"] == val)}
}
state_filter = (val) => {
bigDim();
filter_all_states(val).attr("class", d => {
if (d["candidate_name"] == "Joe Biden" && d["partisan"] != "") {return "dataline biden"}
else if (d["candidate_name"] == "Donald Trump" && d["partisan"] != "") {return "trump dataline"}
else {return "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.
