Skip to content

Commit

Permalink
Added color dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@stowu2005
stowu2005 committed Dec 30, 2024
1 parent 0d41a25 commit 03276ce
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 18 deletions.
58 changes: 52 additions & 6 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,72 @@
<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> / 331,092,220</p>
<div id="pop-chart" style="margin-bottom: 2.5vw;"></div>
<p style="text-align:center; margin-bottom: -1vw; display: none;" id="finish-text">Thank you for playing!</p>
<p style="text-align:center; margin-bottom: calc(-1vw - 4px); display: none;" id="finish-text">Thank you for playing!</p>
<div style="display: flex; justify-content: center;" id="input-div">
<button id="" style="opacity:0; pointer-events: none; margin-right:10px">Finish</button>
<button id="" style="opacity:0; pointer-events: none; margin-right:10px">Finish</button> <!-- For spacing only -->
<div style="margin-right: 10px; margin-top: 18.5px; position: relative;">
<span class="circle" id="color-picker" style="background-color: red;"></span>
<div style="position: absolute; border-style: solid; border-radius: 10px; border-width: 2.5px;
background-color: white; right: -7px; top: 30px; padding-top: 5px;
height: 158px; text-align:center; width: 30px; display: none" id="color-picker-div">
<span class="circle-select" id="color-picker-red" style="background-color: red; border-color: rgb(155, 155, 0);"></span>
<span class="circle-select" id="color-picker-blue" style="background-color: blue; "></span>
<span class="circle-select" id="color-picker-green" style="background-color: green; "></span>
<span class="circle-select" id="color-picker-purple" style="background-color: purple;"></span>
<span class="circle-select" id="color-picker-orange" style="background-color: orange;"></span>
</div>
</div>
<form style="text-align:center; display: inline-block;" action="javascript:submit()" autocomplete="off">
<label for="input_bar">Enter 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>
<button id="finish-btn" style="margin-left:10px; cursor: pointer; height: 21.5px; margin-top:18.5px">Finish</button>
<!-- For spacing only -->
<div style="margin-left: 10px; margin-top: 18.5px; position: relative; opacity: 0; pointer-events: none;">
<span class="circle" id="color-picker" style="background-color: red;"></span>
</div>

</div>
<p style="text-align:center; margin-bottom: -1vw; display: block;" id="Error"><br/></p>
<p style="text-align:center; margin-bottom: -1vw; display: block; margin-top: -4px;" id="Error"><br/></p>
<br/>
</div>
<div class="svg-container" id="svg-map-container">
<svg id="map">
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<pattern id="reddiagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<rect width="32" height="32" fill="red" />
<path d="M-8,8 l16,-16
M0,32 l32,-32
M24,40 l16,-16"
style="stroke:yellow; stroke-width:8;" />
</pattern>
<pattern id="bluediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<rect width="32" height="32" fill="blue" />
<path d="M-8,8 l16,-16
M0,32 l32,-32
M24,40 l16,-16"
style="stroke:yellow; stroke-width:8;" />
</pattern>
<pattern id="greendiagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<rect width="32" height="32" fill="green" />
<path d="M-8,8 l16,-16
M0,32 l32,-32
M24,40 l16,-16"
style="stroke:yellow; stroke-width:8;" />
</pattern>
<pattern id="purplediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<rect width="32" height="32" fill="purple" />
<path d="M-8,8 l16,-16
M0,32 l32,-32
M24,40 l16,-16"
style="stroke:yellow; stroke-width:8;" />
</pattern>
<pattern id="orangediagonalHatch" patternUnits="userSpaceOnUse" width="32" height="32">
<rect width="32" height="32" fill="orange" />
<path d="M-8,8 l16,-16
M0,32 l32,-32
M24,40 l16,-16"
style="stroke:yellow; stroke-width:8;" />
</pattern>
</svg>
</div>
<div id="checkbox-div">
Expand All @@ -65,13 +109,13 @@
<div id="overlay" class="overlay"></div>
<div id="popup" class="popup">
<button id="closePopup" class="close-btn">&#x00d7</button>
<h2 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h2>
<h1 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h1>
<p>Type in the name of a county in the search bar (submit with enter). All counties with that name will display on the map.
If a name is invalid, an error will be displayed.
</p>
</br>
<p>Once a state has more than half its population guessed, it will be considered &quot;won&quot;.</p>
<p>At that point, its electoral votes will be added to the total, and it will be displayed with a red hue.</p>
<p>At that point, its electoral votes will be added to the total, and it will be displayed with a hue.</p>
<p>The goal is to reach 270 electoral votes, with the amount of electoral votes is shown on the bar at the bottom.
When 270 (or more) electoral votes are won, you will be notified.</p>
</br>
Expand All @@ -83,6 +127,8 @@ <h2 style="margin-top: -2px; margin-bottom: 30px;">How to play:</h2>
<p>Hovering over a named county will show general facts about the county.</p>
<p>Hovering over a bar in the bar chart will show specific statistics for that bar.</p>
</br>
<p>To change the color of the named counties, use the dropdown by clicking the circle located next to the search bar.</p>
</br>
<p>Toggling the &quot;Show Last Named Counties&quot; checkbox will make the last named counties
appear in yellow (along with their corresponding data in the bars).</p>
</br>
Expand Down
96 changes: 84 additions & 12 deletions public/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,15 @@ let map_tooltip
let checked = true
let won = false
let finished = false
let color = "red"
let colorMap = new Map([
["red", "rgba(255, 0, 0, 0.4)"],
["blue", "rgba(0, 0, 255, 0.4)"],
["green", "rgba(0, 255, 0, 0.4)"],
["purple", "rgba(128, 0, 128, 0.4)"],
["orange", "rgba(255, 165, 0, 0.4)"],
])
let colorSelection = false


async function fetchJSONData() {
Expand Down Expand Up @@ -114,7 +123,7 @@ async function fetchJSONData() {

const outline = g.append("g")
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0)
.attr("cursor", "pointer")
Expand Down Expand Up @@ -197,6 +206,11 @@ async function fetchJSONData() {

function hover(event, d, this_county) {
let tooltip_opacity = 0.8
if (color === "orange") {
tooltip_opacity = 0.9
} else if (color === "blue") {
tooltip_opacity = 0.7
}
if (this_county.style('fill') === "rgb(255, 255, 0)") {
this_county
.style("opacity", 0)
Expand Down Expand Up @@ -254,7 +268,7 @@ function submit() {
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");
.style("fill", color);
}
prev_named_counties = d_list
let prev_named = 0
Expand All @@ -272,7 +286,7 @@ function submit() {
.style("fill", "yellow");
} else {
d3.select(d).transition()
.style("fill", "red");
.style("fill", color);
}
}
total_pop += prev_named_pop
Expand All @@ -283,7 +297,7 @@ function submit() {
if (state_population_gotten.get(state) * 2 >= state_totals.get(state)) {
named_states.set(state, 1)
total_electoral_votes += state_electoral_votes.get(state)
d3.select(states_map.get(state)).transition().style("fill", "red");
d3.select(states_map.get(state)).transition().style("fill", color);
if (!won && total_electoral_votes >= 270) {
won = true
should_alert = true
Expand Down Expand Up @@ -378,7 +392,7 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
.attr('class', 'bartooltip')

const data = [
{ label: `${label1}`, value: bar_percentage, left: 0, color: 'red',
{ label: `${label1}`, value: bar_percentage, left: 0, color: color,
percentage: `(${(100 * percentage/total_percentage).toFixed(2)}\%)`},
{ label: `${label3}`, value: recent_percentage, left: bar_percentage, color: 'yellow',
percentage: `(${(100 * recent_percentage/total_percentage).toFixed(2)}\%)`},
Expand All @@ -396,14 +410,14 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
.attr('height', 100)
.attr('fill', function (d) {
if (d.color === "yellow") {
return "url(#diagonalHatch)"
return `url(#${color}diagonalHatch)`
}
return d.color
})
.on("mouseenter", function (event, d) {
let d_pop = d.value
d3.select(this).style("opacity", 0.4)
if (d.color === 'red') {
if (d.color === color) {
d_pop = percentage
d3.select(this.nextSibling).style("opacity", 0.4)
} else if (d.color === 'yellow') {
Expand All @@ -422,19 +436,21 @@ function barchart(percentage, total_percentage, bar_chart, label1, label2, recen
tooltip.style('top', (event.pageY - 20) + 'px')
.style('left', (event.pageX + 10) + 'px');
}).on("mouseout", function (event, d) {
if (d.color === 'red') {
if (d.color === color) {
d3.select(this.nextSibling).style("opacity", 1)
}
d3.select(this).style("opacity", 1)
tooltip.style("opacity", 0);
});
}

d3.select("#prev_named_btn").on("click", update);
d3.select("#prev_named_btn").on("click", function(){
checked = !(document.getElementById("prev_named").checked);
document.getElementById("prev_named").checked = checked;
update();
});

function update() {
checked = !(document.getElementById("prev_named").checked)
document.getElementById("prev_named").checked = checked
if (checked === false) {
if (curr !== null) {
let state_gotten = state_population_gotten.get(curr_state)
Expand All @@ -444,7 +460,7 @@ function update() {
}
for (const d of prev_named_counties) {
d3.select(d).transition()
.style("fill", "red");
.style("fill", color);
}
barchart(total_counties, 3142, "#bar-chart", "Number of counties guessed", "Number of counties remaining",
0, "")
Expand Down Expand Up @@ -577,3 +593,59 @@ d3.select("#website").on("mouseleave", function () {
d3.select("#website").transition().style("font-size", "32px");
});

d3.select("#color-picker").on("mouseenter", function () {
d3.select("#color-picker").style("background-color", `${colorMap.get(color)}`);
});

d3.select("#color-picker").on("mouseleave", function () {
d3.select("#color-picker").style("background-color", `${color}`);
});

d3.select("#color-picker").on("click", function () {
if (colorSelection) {
d3.select("#color-picker").transition().style("border-color", "#444");
d3.select("#color-picker-div").transition().style("display", "none");
} else {
d3.select("#color-picker").transition().style("border-color", "rgb(155, 155, 0)");
d3.select("#color-picker-div").transition().style("display", "block");
}
colorSelection = !colorSelection
});

d3.selectAll(".circle-select").on("mouseenter", function () {
d3.select(this).transition().style("width", "21.5px")
.style("height", "21.5px").style("margin-top", "1px").style("margin-bottom", "1px");
});

d3.selectAll(".circle-select").on("mouseleave", function () {
d3.select(this).transition().style("width", "17.5px")
.style("height", "17.5px").style("margin-top", "3px").style("margin-bottom", "3px");
});

d3.selectAll(".circle-select").on("click", function () {
colorSelection = false;
if (color !== d3.select(this).style("background-color")) {
color = d3.select(this).style("background-color");
d3.selectAll(".circle-select").style("border-color", "#444");
d3.select(this).style("border-color", "rgb(155, 155, 0)");
changeColor();
}
d3.select("#color-picker").transition().style("border-color", "#444").style("background-color", color);
d3.select("#color-picker-div").transition().style("display", "none");
});

function changeColor() {
named_states.forEach((value, key) => {
d3.select(states_map.get(key)).transition().style("fill", color);
})
named_counties.forEach((value, key) => {
for (const d of value) {
d3.select(d).transition()
.style("fill", color);
}
})
update();
if (curr === null) {
barchart(total_electoral_votes, 538, "#vote-chart", "Electoral Votes Won", "Electoral Votes remaining", 0, "");
}
}
25 changes: 25 additions & 0 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,29 @@ p {
top: 20px;
right: 20px;
box-shadow: 0 2px 2px rgb(0, 0, 0, 0.7);
}

.circle {
height: 17.5px;
width: 17.5px;
border-radius: 50%;
border: solid;
border-width: 2px;
border-color: #444;
cursor: pointer;
display: inline-block;
}

.circle-select {
position: relative;
height: 17.5px;
width: 17.5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 50%;
border: solid;
border-width: 2px;
border-color: #444;
cursor: pointer;
display: inline-block;
}

0 comments on commit 03276ce

Please sign in to comment.