I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Sep 6, 2023
table = Inputs.table(results)
tallied_results = d3.rollup(
results.columns
.slice(1)
.map((s) => ({ key: s, sum: d3.sum(results, (o) => o[s]) })),
(a) => a[0].sum,
(o) => o.key
)
function tip(abbr) {
let name = abbr_to_name.get(abbr);
let d = value_map.get(abbr);
let cev = d.clinton_electoral_votes ? d.clinton_electoral_votes : 0;
let tev = d.trump_electoral_votes ? d.trump_electoral_votes : 0;
let oev = d.other_electoral_votes ? d.other_electoral_votes : 0;
let clinton_pct = d3.format("0.2%")(d.clinton_votes / d.all_votes);
let trump_pct = d3.format("0.2%")(d.trump_votes / d.all_votes);
let other_pct = d3.format("0.2%")(d.other_votes / d.all_votes);
return `<h3>${name}</h3>
<table>
<tr><td></td><th>Popular vote</th><th>Percentage</th><th>Electoral vote</th></tr>
<tr><th>Clinton</th><td>${d.clinton_votes}</td><td>${clinton_pct}</td><td>${cev}</td></tr>
<tr><th>Trump</th><td>${d.trump_votes}</td><td>${trump_pct}</td><td>${tev}</td></tr>
<tr><th>Other</th><td>${d.other_votes}</td><td>${other_pct}</td><td>${oev}</td></tr>
</table>
`;
}
value_map = d3.rollup(
results,
(a) => a[0],
(o) => o.state
)
results = {
let results = await FileAttachment(
"presidential_election_results_2016.csv"
).csv({
typed: true
});
results.forEach(function (o) {
if (o.trump_electoral_votes > o.clinton_electoral_votes) {
o.winner = "Trump";
} else {
o.winner = "Clinton";
}
});
return results;
}
states = {
let states = await FileAttachment("states@2.json").json();
states = topojson.feature(states, states.objects.states);
return states;
}
abbr_to_name = new Map([
["AL", "Alabama"],
["AK", "Alaska"],
["AZ", "Arizona"],
["AR", "Arkansas"],
["CA", "California"],
["CO", "Colorado"],
["CT", "Connecticut"],
["DE", "Delaware"],
["DC", "District of Columbia"],
["FL", "Florida"],
["GA", "Georgia"],
["HI", "Hawaii"],
["ID", "Idaho"],
["IL", "Illinois"],
["IN", "Indiana"],
["IA", "Iowa"],
["KS", "Kansas"],
["KY", "Kentucky"],
["LA", "Louisiana"],
["ME", "Maine"],
["MD", "Maryland"],
["MA", "Massachusetts"],
["MI", "Michigan"],
["MN", "Minnesota"],
["MS", "Mississippi"],
["MO", "Missouri"],
["MT", "Montana"],
["NE", "Nebraska"],
["NV", "Nevada"],
["NH", "New Hampshire"],
["NJ", "New Jersey"],
["NM", "New Mexico"],
["NY", "New York"],
["NC", "North Carolina"],
["ND", "North Dakota"],
["OH", "Ohio"],
["OK", "Oklahoma"],
["OR", "Oregon"],
["PA", "Pennsylvania"],
["RI", "Rhode Island"],
["SC", "South Carolina"],
["SD", "South Dakota"],
["TN", "Tennessee"],
["TX", "Texas"],
["UT", "Utah"],
["VT", "Vermont"],
["VA", "Virginia"],
["WA", "Washington"],
["WV", "West Virginia"],
["WI", "Wisconsin"],
["WY", "Wyoming"]
])
tippy_style = html`<div style="display: hidden">
<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}"></div>`
tippy = require("tippy.js@6")
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.
