Skip to content

Commit

Permalink
Good checkpoint with hover sates
Browse files Browse the repository at this point in the history
  • Loading branch information
@hadro
hadro committed Dec 2, 2023
1 parent f4a5d17 commit 51f536a
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 28 deletions.
50 changes: 29 additions & 21 deletions moma/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,31 +108,39 @@ const selectElementClassification = d3.select("#dropdown-classification")
.style("padding", "10px")
.style("position", "absolute")

options = function(d) {
option1 = `<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male:</span> ${d.male}</b><br>
<b> <span style="color:#66c2a5;">Female</span></b>: ${d.female}`;
option2 = `<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male</span></b>: ${d.male}<br>
<b><span style="color:#66c2a5;">Female:</span> ${d.female}</b>`;
return d.male > d.female ? option1 : option2;
}
// options = function(d) {
// option1 = `<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male:</span> ${d.male}</b><br>
// <b> <span style="color:#66c2a5;">Female</span></b>: ${d.female}`;
// option2 = `<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male</span></b>: ${d.male}<br>
// <b><span style="color:#66c2a5;">Female:</span> ${d.female}</b>`;
// return d.male > d.female ? option1 : option2;
// }

mouseHover = function(event, d) {
tooltip
.style("opacity", 1)
.html(options(d))
.style("left", event.x + 70 + "px")
.style("top", event.y + "px")
.html(`<h3>${d.Year}</h3><b><span style="color:#fc8d62;">Male:</span></b> ${d.male}<br>
<b> <span style="color:#66c2a5;">Female</span></b>: ${d.female}`)
.style("left", ((event.x > width/2 + 50) ? event.x + 70 + "px" :event.x + -140 + "px"))
.style("top", event.y + 20 + "px")
.transition()
// .delay(50);
// svg.selectAll(d => "rect")
svg.selectAll(`rect[year="${d.Year}"]`)
.transition()
.delay(50)
.style("opacity", "0.5")
}

// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
mouseleave = function(event,d) {
tooltip
.transition()
.delay(20)
.duration(200)
.style("opacity", 0)
// .delay(20)
// .duration(200)
.style("opacity", 0);
svg.selectAll(`rect[year="${d.Year}"]`)
.transition()
.style("opacity", "1")
}

d3.selectAll("[name=greaterToggle]").on("change", function() {
Expand All @@ -151,15 +159,15 @@ toggle = function(toggleState) {
svg.selectAll("rect.year-female")
.filter(function(d) {return d.male > d.female;})
.transition()
.style("fill", "#ccc"),
.style("fill", "#aaa"),
svg.selectAll("rect.year-male")
.filter(function(d) {return d.female > d.male;})
.transition()
.style("fill", d3.schemeSet2[1]),
svg.selectAll("rect.year-male")
.filter(function(d) {return d.male > d.female;})
.transition()
.style("fill", "#ccc")) : (svg.selectAll("rect.year-female")
.style("fill", "#aaa")) : (svg.selectAll("rect.year-female")
.transition()
.style("fill", d3.schemeSet2[0]),
svg.selectAll("rect.year-male")
Expand Down Expand Up @@ -212,8 +220,6 @@ filteredData = state.data2
// .ease(d3.easeLinear)
.call(xAxis3);

console.log(state.selectedToggle)

svg // male
.selectAll("rect.year-male")
.data(filteredData, d => d.Year + d.Classification + d.male + state.selectedToggle)
Expand All @@ -222,11 +228,13 @@ svg // male
.append("rect")
.attr("class", "year-male")
.attr("id", d => d.Year + d.Classification + d.male + state.selectedToggle)
.attr("fill", d => state.selectedToggle === false ? d3.schemeSet2[1] : "#ccc")
.attr("year", d => d.Year)
.attr("fill", d => state.selectedToggle === false ? d3.schemeSet2[1] : "#aaa")
.attr("x", (width / 2)-25)
.attr("y", d => y(d.Year))
.attr("height", y.bandwidth())
.attr("width", 0)
// .attr("opacity", "0.7")
.call(sel => sel
.transition()
.duration(1000)
Expand Down Expand Up @@ -259,9 +267,9 @@ svg // female
.append("rect")
.attr("class", "year-female")
.attr("id", d => d.Year + d.Classification + d.female + state.selectedToggle)
.attr("year", d => d.Year)
.attr("fill", d => state.selectedToggle === false ? d3.schemeSet2[0] :
d.female > d.male ? d3.schemeSet2[0] : "#ccc"

d.female > d.male ? d3.schemeSet2[0] : "#aaa"
)
.attr("x", (width / 2)+25)
.attr("y", d => y(d.Year))
Expand Down
40 changes: 34 additions & 6 deletions moma/ratio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,43 @@ Promise.all([
.style("left", event.x + 70 + "px")
.style("top", d3.select(this).attr("cy") + "px")
.transition()
.delay(50);
svg.selectAll(`circle[year="${d3.timeFormat('%Y')(d.Year)}"]`)
.transition()
.delay(50)
.attr('fill-opacity', "1")
.attr("fill", d=> "#aaa" );

}

// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
mouseleave = function(event,d) {
tooltip
.transition()
.delay(20)
.delay(200)
.duration(200)
.style("opacity", 0)
.style("opacity", 0);

svg.selectAll("circle.male-ratio")
.transition()
.delay(20)
// .duration(200)
.attr("fill", colorScale(1) )
.attr('fill-opacity', "0.5");

svg.selectAll("circle.female-ratio")
.transition()
.delay(20)
// .duration(200)
.attr("fill", colorScale(2) )
.attr('fill-opacity', "0.5");

// svg.selectAll(`circle[year="${d3.timeFormat('%Y')(d.Year)}"]`)
// .transition()
// .delay(230)
// .attr('fill-opacity', "0.5");


}


Expand All @@ -140,10 +166,11 @@ Promise.all([
enter => enter
.append("circle")
.attr("class", "female-ratio")
.attr("year", d => d3.timeFormat('%Y')(d.Year))
.attr("cx", d=> x(d.Year))
.attr("cy", d=> y(d.f_ratio))
.attr("fill", d=> colorScale(2) )
.attr('fill-opacity', "0.7")
.attr("fill", colorScale(2) )
.attr('fill-opacity', "0.5")
.call(sel => sel
.transition()
.duration(2500)
Expand Down Expand Up @@ -171,10 +198,11 @@ Promise.all([
enter => enter
.append("circle")
.attr("class", "male-ratio")
.attr("year", d => d3.timeFormat('%Y')(d.Year))
.attr("cx", d=> x(d.Year))
.attr("cy", d=> y(d.m_ratio))
.attr("fill", d=> colorScale(1) )
.attr('fill-opacity', "0.7")
.attr("fill", colorScale(1) )
.attr('fill-opacity', "0.5")
.call(sel => sel
.transition()
.duration(2500)
Expand Down
89 changes: 88 additions & 1 deletion moma/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,91 @@ unicode-range: U+0000-DFFF, U+F900-FFFD;
body {
font-family: "Neue Haas Grotesk";
padding-left: 2%;
}
}

#intro {
width: 30%;
float: right;
z-index: 2000;
margin-top: 10%;
}

#container {
float: left;
width: 69%;
}

#info {
/* margin-top: 10%; */
}

footer {
clear: both;
}

.checkbox-wrapper-3 input[type="checkbox"] {
visibility: hidden;
display: none;
}

.checkbox-wrapper-3 .toggle {
position: relative;
display: block;
width: 40px;
height: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-3 .toggle:before {
content: "";
position: relative;
top: 3px;
left: 3px;
width: 34px;
height: 14px;
display: block;
background: #9A9999;
border-radius: 8px;
transition: background 0.2s ease;
}
.checkbox-wrapper-3 .toggle span {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
display: block;
background: white;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
transition: all 0.2s ease;
}
.checkbox-wrapper-3 .toggle span:before {
content: "";
position: absolute;
display: block;
margin: -18px;
width: 56px;
height: 56px;
background: rgba(79, 46, 220, 0.5);
border-radius: 50%;
transform: scale(0);
opacity: 1;
pointer-events: none;
}

.checkbox-wrapper-3 #cbx-3:checked + .toggle:before {
background: #947ADA;
}
.checkbox-wrapper-3 #cbx-3:checked + .toggle span {
background: #4F2EDC;
transform: translateX(20px);
transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}
.checkbox-wrapper-3 #cbx-3:checked + .toggle span:before {
transform: scale(1);
opacity: 0;
transition: all 0.4s ease;
}

0 comments on commit 51f536a

Please sign in to comment.