Built with blockbuilder.org
forked from madams1's block: TAL_dialogue_tooltip_function
license: mit |
Built with blockbuilder.org
forked from madams1's block: TAL_dialogue_tooltip_function
<!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) { | |
const svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
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", "steelblue") | |
.attr("stroke", "white") | |
.attr("stroke-width", 1) | |
.style("opacity", 0.3) | |
}); |
.chart-title { | |
font-family: "EB Garamond", serif; | |
font-size: 28px; | |
} | |
/* tooltipping */ | |
.chart-tooltip { | |
font-family: "Roboto", sans-serif; | |
width: 300px; | |
position: fixed; | |
border: 1px solid #efefef; | |
opacity: 0; | |
border-radius: 3px; | |
box-shadow: 0 8px 4px -7px #e4e4e4; | |
} | |
.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; | |
} |