Built with blockbuilder.org
Recreated from https://pudding.cool/2017/09/this-american-life/
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-svg-annotation"></script>
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:600|Roboto:300,400,500,700" rel="stylesheet">
<link href="tal_viz_styles.css" rel="stylesheet">
</head>
<body>
<div class="chart">
<div class="chart-title">
Gender breakdown of episodes
</div>
<div class="chart-filters">
<!-- <div class="chart-filter topic-selection">
<label>Topic</label>
<br />
<select type="dropdown"></select>
</div> -->
<div class="chart-filter year-selection">
<label>Year</label>
<br />
<select type="dropdown"></select>
</div>
<div class="chart-filter episode-selection">
<label>Episode</label>
<br />
<select type="dropdown"></select>
</div>
</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>
</div>
<script src="tal_viz.js"></script>
</body>
https://d3js.org/d3.v5.min.js
https://unpkg.com/d3-svg-annotation