Skip to content

Commit

Permalink
Added electoral college bar and highlights
Browse files Browse the repository at this point in the history
  • Loading branch information
@stowu2005
stowu2005 committed Dec 23, 2024
1 parent bd3b4b6 commit 868c509
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 23 deletions.
52 changes: 52 additions & 0 deletions public/data/votecount.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"state","num_votes"
"Alabama","9"
"Kentucky","8"
"North Dakota","3"
"Alaska","3"
"Louisiana","8"
"Ohio","17"
"Arizona","11"
"Maine","4"
"Oklahoma","7"
"Arkansas","6"
"Maryland","10"
"Oregon","8"
"California","54"
"Massachusetts","11"
"Pennsylvania","19"
"Colorado","10"
"Michigan","15"
"Rhode Island","4"
"Connecticut","7"
"Minnesota","10"
"South Carolina","9"
"Delaware","3"
"Mississippi","6"
"South Dakota","3"
"District of Columbia","3"
"Missouri","10"
"Tennessee","11"
"Florida","30"
"Montana","4"
"Texas","40"
"Georgia","16"
"Nebraska","5"
"Utah","6"
"Hawaii","4"
"Nevada","6"
"Vermont","3"
"Idaho","4"
"New Hampshire","4"
"Virginia","13"
"Illinois","19"
"New Jersey","14"
"Washington","12"
"Indiana","11"
"New Mexico","5"
"West Virginia","4"
"Iowa","6"
"New York","28"
"Wisconsin","10"
"Kansas","6"
"North Carolina","16"
"Wyoming","3"
8 changes: 5 additions & 3 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,22 @@

<body>
<div>
<p> The number of counties named is: <span id="counties_named">0</span></p>
<p> The number of counties named is: <span id="counties_named">0</span> / 3,142</p>
<div id="bar-chart" style="margin-bottom: 2.5vw;"></div>
<p style="text-align:center;">The total population of counties named is: <span id="total_population">0</span></p>
<p style="text-align:center;">The total population of counties named is: <span id="total_population">0</span> / 331,092,220</p>
<div id="pop-chart" style="margin-bottom: 2.5vw;"></div>
<form style="text-align:center;" action="javascript:submit()" autocomplete="off">
<label for="input_bar">Type a county:</label><br/>
<input type="text" id="input_bar" name="input_bar" placeholder="e.g. &quot;Los Angeles&quot;, &quot;Cook&quot;"><br/>
</form>
<p style="text-align:center;" id="Error"><br/></p>
<p style="text-align:center; margin-bottom: -.5vw;" id="Error"><br/></p>
<br/>
</div>
<div class="svg-container">
<svg id="map"></svg>
</div>
<p style="text-align:center; margin-top: 2.5vw;"><span id="total_votes">The total electoral votes won is: 0 / 538</span></p>
<div id="vote-chart" style="margin-bottom: 2.5vw;"></div>
<script src="main.js"></script>


Expand Down
107 changes: 88 additions & 19 deletions public/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
let us
let curr
let curr = null
let mapped_data
let name_to_fips = new Map();
var total_pop = 0
Expand All @@ -8,15 +8,23 @@ let named_counties = new Map()
let counties_array
let input
let outline_map

let states_map
let prev_named_counties = []
let state_totals = new Map()
let state_population_gotten = new Map()
let named_states = new Map()
let state_electoral_votes
let total_electoral_votes = 0
let curr_state = null

async function fetchJSONData() {
try {
let [res, data] = await Promise.all([fetch("./data/counties-albers-10m.json"),
d3.csv("./data/uscounties.csv")]);
let [res, data, state_data] = await Promise.all([fetch("./data/counties-albers-10m.json"),
d3.csv("./data/uscounties.csv"), d3.csv("./data/votecount.csv")]);
if (!res.ok) {
throw new Error(`HTTP error! Status: ${res.status}`);
}
state_electoral_votes = new Map(Array.from(state_data, d => [d.state, parseInt(d.num_votes)]))
mapped_data = new Map(Array.from(data, d => [d.county_fips, (({ county, county_full, state_name, population }) => ({ county, county_full, state_name, population }))(d)]))
data.forEach(d => {
const key = d.county.toLowerCase().replace(/[^a-zA-Z]+/g, '');
Expand All @@ -25,6 +33,12 @@ async function fetchJSONData() {
} else {
name_to_fips.get(key).push(d.county_fips)
}
if (!state_totals.has(d.state_name)) {
state_population_gotten.set(d.state_name, 0)
state_totals.set(d.state_name, parseInt(d.population))
} else {
state_totals.set(d.state_name, state_totals.get(d.state_name) + parseInt(d.population))
}
});
us = await res.json();

Expand All @@ -37,15 +51,15 @@ async function fetchJSONData() {

const svg = d3.select("#map")
.attr("width", "72vw")
.attr("height", "60vw")
.attr('viewBox',`-100 0 ${width} ${height}`)
.attr('preserveAspectRatio', "xMidYMid meet");
.attr("height", "37vw")
.attr('viewBox',`-100 -190 ${width} ${height}`)
.attr('preserveAspectRatio', "xMidYMid slice");

const path = d3.geoPath();

const g = svg.append("g");

counties = g.append("g")
const counties = g.append("g")
.attr("fill", "#444")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
Expand All @@ -65,14 +79,20 @@ async function fetchJSONData() {

counties_array = counties._groups[0];

g.append("path")
const states = g.append("g")
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 1.2)
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("d", path);

const states_array = states._groups[0]
states_map = new Map(states_array.map((d) => [d.__data__.properties.name, d]))

outline = g.append("g")
const outline = g.append("g")
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-linejoin", "round")
Expand All @@ -82,13 +102,14 @@ async function fetchJSONData() {
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("d", path);
outline_array = outline._groups[0]
const outline_array = outline._groups[0]

outline_map = new Map(outline_array.map((d) => [d.__data__.id, d]))

barchart(0, 3142, "#bar-chart", "Number of counties guessed", "Number of counties remaining")
barchart(0, 331092220, "#pop-chart", "Total population of counties guessed", "Population remaining")

barchart(0, 538, "#vote-chart", "Electoral Votes Won", "Electoral Votes remaining")


let tooltip = svg.append("g")
.style("opacity", 0)
Expand All @@ -113,17 +134,19 @@ async function fetchJSONData() {
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
barchart(total_electoral_votes, 538, "#vote-chart", "Electoral Votes Won", "Electoral Votes remaining")
document.getElementById("total_votes").innerHTML = `The total electoral votes won is: ${total_electoral_votes} / 538`;
}

function clicked(event, d) {
if (curr === d.id) {
curr = null
curr_state = null
reset();
return;
} else {
curr = d.id
}

const [[x0, y0], [x1, y1]] = path.bounds(d);
event.stopPropagation();
outline.transition().attr("stroke-width", 0);
Expand All @@ -140,6 +163,12 @@ async function fetchJSONData() {
d3.pointer(event, svg.node())
);
d3.select(state_outline).raise();
curr_state = mapped_data.get(d.id).state_name
let state_gotten = state_population_gotten.get(curr_state)
let state_total = state_totals.get(curr_state)
barchart(state_gotten, state_total, "#vote-chart", "Total population of counties guessed in " + curr_state, "Population remaining in " + curr_state)
document.getElementById("total_votes").innerHTML = `The total population of counties named in ${curr_state} is:
${state_gotten.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")} / ${state_total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")}`;
}

function zoomed(event) {
Expand All @@ -166,9 +195,16 @@ async function fetchJSONData() {
.attr("rx", 5 * squared_amt)
.attr("ry", 5 * squared_amt)
.attr("stroke-width", 1 + (squared_amt));
const fixedTranslation = 10 / zoom_dim.k;
console.log(zoom_dim)
tooltip
.style("opacity", 0.8)
.attr("transform", `translate(${event.offsetX}, ${event.offsetY - 50})`);
.attr("transform", `translate(${(event.offsetX - zoom_dim.x)/zoom_dim.k + fixedTranslation}
, ${(event.offsetY - zoom_dim.y)/zoom_dim.k + fixedTranslation})`);
console.log(event.offsetX)
console.log(event.pageX)
console.log(event.offsetX + event.offsetX * 0.02 * (squared_amt - 2.8284271247461903))

tooltip_text
.attr("font-size", 8 * Math.sqrt(zoom_dim.k))
.append("tspan")
Expand All @@ -183,7 +219,7 @@ async function fetchJSONData() {
.text(`Population: ${mapped_data_county.population.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")}`)
.attr("y", box_height * 3/4)
.attr("x", box_width / 2)
}
}
}

} catch (error) {
Expand All @@ -204,20 +240,53 @@ function submit() {
}
fips = name_to_fips.get(input)
d_list = counties_array.filter((d) => fips.includes(d.__data__.id))
for (const d of prev_named_counties) {
d3.select(d).transition()
.style("fill", "red");
}
prev_named_counties = d_list
let county_states = []
for (const d of d_list) {
total_pop += parseInt(mapped_data.get(d.__data__.id).population)
d_county = mapped_data.get(d.__data__.id)
county_pop = parseInt(d_county.population)
county_states.push(d_county.state_name)
total_pop += county_pop
total_counties += 1
state_population_gotten.set(d_county.state_name, state_population_gotten.get(d_county.state_name) + county_pop)
d3.select(d).transition()
.style("fill", "red");
.style("fill", "#b6b004");
}
for (const state of county_states) {
if (!named_states.has(state)) {
if (state_population_gotten.get(state) * 2 >= state_totals.get(state)) {
named_states.set(state, 1)
total_electoral_votes += state_electoral_votes.get(state)
got_state = states_map.get(state)
d3.select(got_state).transition().style("stroke", "red");
d3.select(got_state).raise()

}
}
}
named_counties.set(input, d_list)
barchart(total_counties, 3142, "#bar-chart", "Number of counties guessed", "Number of counties remaining")
barchart(total_pop, 331092220, "#pop-chart", "Total population of counties guessed", "Population remaining")


document.getElementById("counties_named").innerHTML = total_counties.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
document.getElementById("total_population").innerHTML = total_pop.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
document.getElementById("input_bar").value = "";
if (curr !== null) {
let state_gotten = state_population_gotten.get(curr_state)
let state_total = state_totals.get(curr_state)
barchart(state_gotten, state_total, "#vote-chart", "Total population of counties guessed in " + curr_state, "Population remaining in " + curr_state)
document.getElementById("total_votes").innerHTML = `The total population of counties named in ${curr_state} is:
${state_gotten.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")} / ${state_total.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")}`;
} else {
barchart(total_electoral_votes, 538, "#vote-chart", "Electoral Votes Won", "Electoral Votes remaining")
document.getElementById("total_votes").innerHTML = `The total electoral votes won is: ${total_electoral_votes} / 538`;
}


}

fetchJSONData()
Expand Down
2 changes: 1 addition & 1 deletion public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,4 @@ p {
.vl {
border-left: 2px solid rgb(255, 255, 255);
height: 2vw;
}
}

0 comments on commit 868c509

Please sign in to comment.