Published
Edited
Jan 10, 2022
2 stars
Insert cell
Insert cell
{
callxAxis;
callyAxis;

// create a group element for each country
const groups = svg
.selectAll("g.country")
.data(byCountry)// every d is a country Map
.join("g")
.attr("class", "country")
.attr("stroke", darkGray)
.on("mouseenter", function() { // only mouseenter is needed -- change on next mouseenter
d3.selectAll("circle")
.attr("opacity", 0.5)
.attr("stroke", darkGray)
d3.selectAll(".abbrev")
.attr("opacity", 0.5)
.attr("stroke", "none")
d3.selectAll(this.childNodes) // select all states in group, so that M and W show up when only one is moused over
.attr("stroke", darkGray)
.attr("opacity", 1)
// console.log("this.childNodes", this.childNodes);
});

// console.log("groups", groups)
// console.log("byCountry", byCountry)

//create circle for each sex and country
const circle = groups.selectAll("circle") // want 2 circles
// console.log("Circle", circle)
.data(d =>[(d[1].has("MEN") && d[1].get("MEN")),
(d[1].has("WOMEN") && d[1].get("WOMEN"))]) // splits our country into 2 elements
.join("circle")
.attr("class", (d) => "circle " + d[0].Country)
.attr("cx", (d) => xScale(d[0].Value/60))
.attr("cy", (d) => yScale(d[1].Value/60)) // men or women?
//.attr("log", (d) => console.log("d", d[1]))
.attr("r", 4)
.attr("fill", d => colorScale(d[1].SEX))
.attr("opacity", 1)
.attr("stroke", darkGray)

//console.log("Circle", circle)

//legend
callLegend
legendLabel1;
legendLabel2;
// line separating sexes
sepLine
// annotations
menAnn;
womenAnn;
// title
title;

//tooltips;
callTooltips;
//clear annotations when the svg is clicked
svg
.on("click", function() {
d3.selectAll("circle")
.attr("opacity", 1)
.attr("stroke", darkGray)
d3.selectAll(".abbrev")
.attr("opacity", 1)
.attr("stroke", "none")
// tooltip1.hide() //remove takes away completely
// tooltip2.hide()
});
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sepLine = svg.append("line")
.attr("x1", xScale(280)/60)
.attr("y1", 75)
.attr("x2", xScale(280)/60)
.attr("y2", 550)
.style("stroke-dasharray", ("3, 3"))
.attr("stroke", "#777")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
callTooltips = svg
.selectAll("g.country")
.on("mouseover", function(d) {
console.log(this)
let x1 = this.childNodes[0].cx.animVal.value
let y1 = this.childNodes[0].cy.animVal.value
let x2 = this.childNodes[1].cx.animVal.value
let y2 = this.childNodes[1].cy.animVal.value

// tooltip for men's data
tooltip1
.call(callout, `${d.srcElement.__data__[0].Country}`) //TODO: add explanatory text
.attr("transform", `translate(${x1}, ${y1})`)
.transition()
.duration(500)
.attr("fill-opacity", 0.9)

//tooltip for women's data
tooltip2
.call(callout, `${d.srcElement.__data__[0].Country}`)
.attr("transform", `translate(${x2}, ${y2})`)
.transition()
.duration(500)
.attr("fill-opacity", 0.8)
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
// over rep
// svg.append("text")
// .text("more paid labor ^^")
// .attr("transform", `translate(${width*.25 + 50}, ${height*.2})`)
// .attr("fill", "#999")
// .attr("text-anchor", "middle")
// .attr("font-family", "sans-serif")
// .attr("font-size", smallFont);
// // under rep
// svg.append("text")
// .text("more unpaid labor -->")
// .attr("transform", `translate(${width*.8 + 50}, ${height*.8})`)
// .attr("fill", "#999")
// .attr("text-anchor", "middle")
// .attr("font-family", "sans-serif")
// .attr("font-size", smallFont);
Insert cell

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.
Learn more