Gender and paid / unpaid labor / esibinga

{

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();

}

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")

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)

})

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

// 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);

Purpose-built for displays of data