| license: mit | |
| height: 1000 |
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
forked from madams1's block: TAL_dialogue_simple_rects_color_scaled
forked from madams1's block: TAL_dialogue_simple_rects_binned
| <!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-title"> | |
| Gender breakdown of episodes | |
| </div> | |
| <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 width = 750 | |
| const height = 450 | |
| const margins = {left: 0, right: 40, top: 40, bottom: 20} | |
| const maleColor = "#6767FF" | |
| const femaleColor = "#FA676C" | |
| const colorScale = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range([femaleColor, maleColor]) | |
| // binning | |
| const x = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range([0, width - margins.left - margins.right]) | |
| // Generate a histogram using 30 uniformly-spaced bins. | |
| const histogram = d3.histogram() | |
| .value(d => +d.malePercent) | |
| .domain(x.domain()) | |
| .thresholds(d3.range(30).map(d => d * 100/30)) | |
| const binnedData = histogram(data) | |
| 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) | |
| // position tooltip relative to pointer | |
| const coords = [d3.event.clientX, d3.event.clientY] | |
| const ttBoundingRect = d3.select(".chart-tooltip").node().getBoundingClientRect() | |
| d3.select(".chart-tooltip") | |
| .style("left", `${coords[0] <= width / 2 ? coords[0] + 25 : coords[0] - 25 - 300}px`) | |
| .style("top", `${coords[1] - ttBoundingRect.height / 2}px`) | |
| // 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", width + margins.left + margins.right) | |
| .attr("height", height + margins.top + margins.bottom) | |
| binnedData.forEach(function(bin, ind) { | |
| d3.select("svg") | |
| .append("g") | |
| .attr("class", `col-${ind}`) | |
| .attr("transform", `translate(${margins.left}, ${margins.top})`) | |
| d3.select(`.col-${ind}`) | |
| .selectAll(".rect") | |
| .data(bin) | |
| .enter() | |
| .append("rect") | |
| .attr("class", "rect") | |
| .attr("width", width / 30) | |
| .attr("height", 8) | |
| .attr("x", width / 30 * ind) | |
| .attr("y", (d, i) => 8 * i) | |
| .attr("fill", d => colorScale(+d.malePercent)) | |
| .attr("stroke", "white") | |
| .attr("stroke-width", 1) | |
| .style("opacity", 0.3) | |
| }) | |
| d3.selectAll(".rect") | |
| .on("mouseover", function(d, i) { | |
| d3.select(this) | |
| .style("opacity", 1) | |
| .style("cursor", "pointer") | |
| 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; | |
| margin-bottom: 24px; | |
| } | |
| /* 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; | |
| } |