Built with blockbuilder.org
forked from madams1's block: TAL_dialogue_tooltip_function
forked from madams1's block: TAL_dialogue_simple_rects
forked from madams1's block: TAL_dialogue_simple_rects_mouseevents
license: mit |
Built with blockbuilder.org
forked from madams1's block: TAL_dialogue_tooltip_function
forked from madams1's block: TAL_dialogue_simple_rects
forked from madams1's block: TAL_dialogue_simple_rects_mouseevents
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:600|Roboto:400,500,700" rel="stylesheet"> | |
<link href="tal_viz_styles.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="chart-tooltip"> | |
<div class="tt-info"> | |
<span class="tt-heading"></span> | |
<br /> | |
<span class="tt-description"></span> | |
<div class="gender-bars"> | |
<div class="gender-prop"> | |
<div class="gender-bar female-bar"></div> | |
<span class="gender-label female"></span> | |
</div> | |
<div class="gender-prop"> | |
<div class="gender-bar male-bar"></div> | |
<span class="gender-label male"></span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="tal_viz.js"></script> | |
</body> |
d3.csv("https://raw.githubusercontent.com/polygraph-cool/this-american-life/master/data/act1.csv") | |
.then(function(data) { | |
// settings | |
const maleColor = "#6767FF" | |
const femaleColor = "#FA676C" | |
function showTooltip(episode) { | |
// constants used in tooltip info | |
const episodeData = data.filter(d => d.episode == episode)[0] | |
const malePerc = d3.format(".01f")(episodeData.malePercent) | |
const femalePerc = d3.format(".01f")(100 - episodeData.malePercent) | |
// adjust the text | |
d3.select(".tt-heading") | |
.text(`#${episodeData.episode}: ${episodeData.title}`) | |
d3.select(".tt-description") | |
.text(`${episodeData.description}`) | |
// size and label the bars | |
d3.select(".female-bar") | |
.style("width", `${femalePerc}px`) | |
.style("background-color", femaleColor) | |
d3.select(".gender-label.female") | |
.style("color", femaleColor) | |
.text(`${femalePerc}% female dialogue`) | |
d3.select(".male-bar") | |
.style("width", `${episodeData.malePercent}px`) | |
.style("background-color", maleColor) | |
d3.select(".gender-label.male") | |
.style("color", maleColor) | |
.text(`${malePerc}% male dialogue`) | |
d3.select(".chart-tooltip") | |
.transition() | |
.duration(200) | |
.style("opacity", 0.9) | |
} | |
const svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
const colorScale = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([femaleColor, maleColor]) | |
const rects = d3.select("svg") | |
.selectAll(".rect") | |
.data(data) | |
.enter() | |
.append("rect") | |
.attr("class", "rect") | |
.attr("width", 32) | |
.attr("height", 8) | |
.attr("x", 15) | |
.attr("y", (d, i) => 8 * i) | |
.attr("fill", d => colorScale(+d.malePercent)) | |
.attr("stroke", "white") | |
.attr("stroke-width", 1) | |
.style("opacity", 0.3) | |
rects | |
.on("mouseover", function(d, i) { | |
console.log(d) | |
console.log(this) | |
d3.select(this) | |
.style("opacity", 1) | |
showTooltip(d.episode) | |
}) | |
.on("mouseout", function(d, i) { | |
d3.select(this) | |
.style("opacity", 0.3) | |
d3.select(".chart-tooltip") | |
.style("opacity", 0) | |
}) | |
}); |
.chart-title { | |
font-family: "EB Garamond", serif; | |
font-size: 28px; | |
} | |
/* tooltipping */ | |
.chart-tooltip { | |
font-family: "Roboto", sans-serif; | |
pointer-events: none; | |
width: 300px; | |
position: fixed; | |
border: 1px solid #efefef; | |
opacity: 0; | |
border-radius: 3px; | |
box-shadow: 0 8px 4px -7px #e4e4e4; | |
background-color: #fff; | |
} | |
.tt-info { | |
margin: 12px 12px 12px 12px; | |
} | |
.tt-heading { | |
font-size: 15px; | |
font-weight: 700; | |
} | |
.tt-description { | |
margin-top: 4px; | |
margin-bottom: 4px; | |
font-size: 12px; | |
font-weight: 400; | |
display: inline-block; | |
} | |
.gender-bars { | |
height: 40px; | |
} | |
.gender-prop { | |
float: left; | |
} | |
.gender-bar { | |
float: left; | |
height: 10px; | |
margin-top: 8px; | |
margin-right: 8px; | |
} | |
.gender-label { | |
float: left; | |
font-size: 11px; | |
font-weight: 500; | |
margin-top: 7px; | |
} |