Skip to content

Instantly share code, notes, and snippets.

@duhaime

duhaime/index.html

Last active July 10, 2017 17:27
Show Gist options
  • Save duhaime/f1fe4b0283cb6412d4cb708fec660250 to your computer and use it in GitHub Desktop.
Save duhaime/f1fe4b0283cb6412d4cb708fec660250 to your computer and use it in GitHub Desktop.
Download ZIP
Steam chart with buttons and tooltip (D3.js)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Steam Chart</title>
<link href='steam-chart.css' type='text/css' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Montserrat:400,500|Merriweather'>
</head>
<body>
<div class='container'>
<div id='steam-chart-buttons'>
<div class='factor-buttons'>
<div class='factor-button active' data-id='occupations'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/subject.svg'>
<div class='label'>Occupation</div>
</div>
<div class='factor-button' data-id='writing'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/size.svg'>
<div class='label'>Writing</div>
</div>
<div class='factor-button' data-id='education'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/volumes.svg'>
<div class='label'>Education</div>
</div>
<div class='factor-button' data-id='religion'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/death.svg'>
<div class='label'>Religion</div>
</div>
<div class='factor-button' data-id='nationalities'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/location.svg'>
<div class='label'>Nation</div>
</div>
<div class='factor-button' data-id='gender'>
<img src='https://s3.amazonaws.com/duhaime/blog/spenserian-networks/button-icons/author.svg'>
<div class='label'>Gender</div>
</div>
</div>
</div>
<div class='steam-chart-container'>
<div id='steam-chart-tooltip' class='tooltip'>
<div class='level'></div>
<span>in</span>
<div class='year'></div>
<div class='value'></div>
</div>
<div id='steam-chart' class='chart'></div>
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>
<script src='steam-chart.js'></script>
</html>
Raw
metadata_distributions_over_time.json
{"education": {"Unknown": {"1590": 0.19, "1600": 0.25, "1610": 0.1, "1630": 0.15, "1780": 0.16, "1820": 0.27, "1800": 0.19, "1770": 0.17, "1790": 0.18, "1580": 0.26, "1620": 0.22, "1640": 0.19, "1650": 0.16, "1660": 0.11, "1680": 0.05, "1700": 0.1, "1670": 0.13, "1690": 0.1, "1710": 0.11, "1720": 0.25, "1730": 0.07, "1740": 0.05, "1750": 0.04, "1760": 0.06, "1830": 0.26, "1810": 0.23}, "B.A.": {"1590": 0.36, "1600": 0.39, "1620": 0.44, "1630": 0.4, "1610": 0.41, "1790": 0.16, "1640": 0.44, "1760": 0.4, "1720": 0.27, "1780": 0.21, "1820": 0.19, "1810": 0.18, "1770": 0.25, "1750": 0.53, "1580": 0.42, "1670": 0.33, "1650": 0.48, "1660": 0.17, "1690": 0.47, "1680": 0.48, "1700": 0.46, "1710": 0.43, "1730": 0.43, "1740": 0.43, "1800": 0.13, "1830": 0.05}, "M.A.": {"1620": 0.41, "1590": 0.23, "1630": 0.4, "1610": 0.32, "1640": 0.44, "1760": 0.35, "1720": 0.27, "1780": 0.17, "1600": 0.28, "1820": 0.13, "1800": 0.13, "1770": 0.17, "1750": 0.48, "1580": 0.21, "1670": 0.27, "1660": 0.22, "1650": 0.28, "1690": 0.47, "1680": 0.24, "1700": 0.46, "1710": 0.3, "1740": 0.46, "1730": 0.3, "1790": 0.08, "1810": 0.15, "1830": 0.05}, "B.Div.": {"1620": 0.11, "1800": 0.02, "1600": 0.06, "1610": 0.02, "1670": 0.07, "1630": 0.03, "1650": 0.04, "1660": 0.06, "1640": 0.03, "1700": 0.12, "1710": 0.05, "1690": 0.07, "1730": 0.05, "1760": 0.07, "1740": 0.04, "1750": 0.02, "1770": 0.01, "1810": 0.01, "1820": 0.0, "1580": 0.05, "1590": 0.03, "1680": 0.0, "1830": 0.0, "1720": 0.0, "1780": 0.0, "1790": 0.0}, "None": {"1620": 0.07, "1760": 0.05, "1790": 0.14, "1780": 0.12, "1810": 0.09, "1820": 0.13, "1770": 0.08, "1750": 0.05, "1740": 0.08, "1720": 0.08, "1730": 0.04, "1800": 0.14, "1830": 0.21, "1670": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}, "Ph.D. Div.": {"1630": 0.05, "1620": 0.11, "1780": 0.06, "1800": 0.04, "1670": 0.2, "1650": 0.08, "1660": 0.06, "1690": 0.13, "1640": 0.13, "1680": 0.05, "1700": 0.1, "1710": 0.16, "1720": 0.04, "1730": 0.07, "1740": 0.14, "1750": 0.17, "1760": 0.1, "1770": 0.05, "1790": 0.03, "1810": 0.01, "1820": 0.01, "1600": 0.05, "1580": 0.05, "1590": 0.04, "1830": 0.0, "1610": 0.0}, "Fellow": {"1630": 0.13, "1620": 0.11, "1640": 0.16, "1800": 0.08, "1600": 0.14, "1610": 0.07, "1670": 0.13, "1650": 0.12, "1680": 0.05, "1690": 0.17, "1700": 0.15, "1730": 0.14, "1740": 0.27, "1710": 0.11, "1720": 0.12, "1750": 0.19, "1760": 0.08, "1770": 0.06, "1780": 0.05, "1790": 0.04, "1810": 0.03, "1820": 0.05, "1830": 0.05, "1590": 0.03, "1580": 0.0, "1660": 0.0}, "Private School": {"1820": 0.1, "1700": 0.17, "1710": 0.09, "1640": 0.03, "1650": 0.04, "1660": 0.11, "1680": 0.1, "1690": 0.07, "1740": 0.06, "1720": 0.04, "1730": 0.04, "1770": 0.09, "1780": 0.14, "1750": 0.02, "1760": 0.03, "1790": 0.06, "1800": 0.1, "1810": 0.08, "1830": 0.05, "1670": 0.0, "1580": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0}}, "religion": {"Anglican": {"1590": 0.91, "1600": 0.92, "1620": 0.85, "1630": 0.85, "1610": 0.9, "1790": 0.51, "1640": 0.94, "1760": 0.77, "1820": 0.38, "1780": 0.61, "1670": 0.8, "1800": 0.44, "1810": 0.46, "1770": 0.65, "1710": 0.86, "1700": 0.8, "1750": 0.79, "1580": 0.84, "1660": 0.89, "1650": 0.88, "1690": 0.87, "1680": 0.95, "1730": 0.79, "1740": 0.84, "1720": 0.73, "1830": 0.26}, "Catholic": {"1640": 0.06, "1820": 0.06, "1600": 0.14, "1620": 0.11, "1630": 0.1, "1650": 0.08, "1660": 0.11, "1670": 0.07, "1680": 0.05, "1700": 0.07, "1710": 0.02, "1810": 0.04, "1760": 0.03, "1780": 0.01, "1790": 0.01, "1580": 0.11, "1590": 0.05, "1610": 0.07, "1800": 0.0, "1690": 0.0, "1830": 0.0, "1720": 0.0, "1730": 0.0, "1740": 0.0, "1750": 0.0, "1770": 0.0}, "Presbyterian": {"1780": 0.13, "1770": 0.17, "1720": 0.18, "1820": 0.23, "1790": 0.12, "1620": 0.04, "1630": 0.03, "1670": 0.13, "1690": 0.03, "1700": 0.02, "1730": 0.05, "1710": 0.05, "1760": 0.1, "1740": 0.09, "1750": 0.13, "1800": 0.22, "1810": 0.22, "1830": 0.37, "1650": 0.04, "1680": 0.0, "1580": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1640": 0.0, "1660": 0.0}, "Quaker": {"1820": 0.07, "1750": 0.02, "1800": 0.1, "1760": 0.01, "1780": 0.03, "1790": 0.06, "1810": 0.02, "1830": 0.05, "1670": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1740": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1770": 0.0, "1650": 0.0, "1660": 0.0}, "Dissenter": {"1820": 0.09, "1600": 0.14, "1620": 0.11, "1630": 0.1, "1640": 0.03, "1650": 0.08, "1660": 0.17, "1670": 0.13, "1680": 0.05, "1690": 0.17, "1700": 0.17, "1710": 0.07, "1720": 0.1, "1730": 0.11, "1740": 0.05, "1750": 0.04, "1760": 0.06, "1770": 0.09, "1800": 0.14, "1790": 0.19, "1810": 0.09, "1780": 0.12, "1830": 0.11, "1580": 0.11, "1590": 0.08, "1610": 0.07}, "Episcopalian": {"1610": 0.05, "1660": 0.06, "1670": 0.07, "1730": 0.04, "1760": 0.02, "1780": 0.02, "1790": 0.01, "1800": 0.03, "1820": 0.01, "1830": 0.05, "1810": 0.01, "1590": 0.03, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1720": 0.0, "1600": 0.0, "1740": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1640": 0.0, "1770": 0.0, "1650": 0.0}, "Congregational": {"1670": 0.07, "1760": 0.01, "1770": 0.01, "1790": 0.02, "1820": 0.08, "1810": 0.06, "1830": 0.05, "1650": 0.04, "1800": 0.02, "1780": 0.01, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1740": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1640": 0.0, "1660": 0.0}, "Jewish": {"1740": 0.03, "1790": 0.01, "1670": 0.0, "1800": 0.0, "1680": 0.0, "1810": 0.0, "1690": 0.0, "1820": 0.0, "1700": 0.0, "1830": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1760": 0.0, "1640": 0.0, "1770": 0.0, "1650": 0.0, "1780": 0.0, "1660": 0.0}, "Unitarian": {"1780": 0.06, "1790": 0.04, "1810": 0.02, "1830": 0.05, "1820": 0.01, "1770": 0.02, "1670": 0.0, "1800": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1740": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1760": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}}, "nationalities": {"English": {"1590": 0.97, "1600": 0.98, "1620": 0.93, "1630": 0.98, "1610": 0.9, "1790": 0.78, "1640": 1.0, "1760": 0.76, "1820": 0.57, "1780": 0.74, "1670": 0.87, "1800": 0.62, "1810": 0.6, "1710": 0.84, "1700": 0.9, "1770": 0.66, "1750": 0.79, "1580": 1.0, "1660": 0.89, "1650": 1.0, "1690": 0.9, "1680": 0.9, "1730": 0.86, "1740": 0.91, "1720": 0.76, "1830": 0.47}, "Scottish": {"1780": 0.16, "1820": 0.2, "1770": 0.19, "1720": 0.16, "1790": 0.11, "1610": 0.1, "1620": 0.04, "1630": 0.03, "1660": 0.06, "1670": 0.13, "1690": 0.03, "1730": 0.05, "1710": 0.05, "1760": 0.09, "1740": 0.09, "1750": 0.15, "1800": 0.22, "1810": 0.17, "1830": 0.37, "1590": 0.03, "1600": 0.02, "1680": 0.0, "1700": 0.0, "1580": 0.0, "1640": 0.0, "1650": 0.0}, "Irish": {"1810": 0.16, "1770": 0.13, "1720": 0.18, "1820": 0.11, "1590": 0.05, "1580": 0.05, "1600": 0.03, "1620": 0.04, "1650": 0.04, "1660": 0.11, "1680": 0.1, "1690": 0.1, "1700": 0.24, "1710": 0.18, "1740": 0.01, "1730": 0.13, "1760": 0.12, "1750": 0.05, "1790": 0.12, "1780": 0.09, "1800": 0.12, "1830": 0.16, "1670": 0.0, "1610": 0.0, "1630": 0.0, "1640": 0.0}, "American": {"1770": 0.03, "1640": 0.03, "1650": 0.08, "1670": 0.07, "1720": 0.04, "1740": 0.01, "1760": 0.07, "1790": 0.05, "1780": 0.09, "1800": 0.08, "1810": 0.12, "1820": 0.18, "1830": 0.16, "1750": 0.01, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1660": 0.0}, "Welsh": {"1770": 0.06, "1730": 0.02, "1720": 0.04, "1750": 0.01, "1760": 0.01, "1780": 0.02, "1800": 0.01, "1590": 0.03, "1600": 0.02, "1670": 0.0, "1680": 0.0, "1810": 0.0, "1690": 0.0, "1820": 0.0, "1700": 0.0, "1830": 0.0, "1580": 0.0, "1710": 0.0, "1610": 0.0, "1740": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0, "1790": 0.0}}, "gender": {"male": {"1590": 1.0, "1600": 1.0, "1620": 1.0, "1630": 1.0, "1610": 1.0, "1790": 0.89, "1640": 0.97, "1780": 0.87, "1670": 1.0, "1820": 0.88, "1800": 0.89, "1810": 0.9, "1760": 0.97, "1770": 0.89, "1710": 0.91, "1720": 0.96, "1750": 0.97, "1580": 1.0, "1660": 0.94, "1650": 0.96, "1690": 0.97, "1680": 1.0, "1700": 0.93, "1730": 0.95, "1740": 0.92, "1830": 1.0}, "female": {"1760": 0.03, "1790": 0.11, "1820": 0.12, "1780": 0.13, "1700": 0.07, "1710": 0.09, "1640": 0.03, "1650": 0.04, "1660": 0.06, "1690": 0.03, "1730": 0.05, "1720": 0.04, "1770": 0.11, "1740": 0.08, "1750": 0.03, "1800": 0.11, "1810": 0.1, "1670": 0.0, "1680": 0.0, "1830": 0.0, "1580": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0}}, "writing": {"poet": {"1590": 0.91, "1620": 0.85, "1610": 0.83, "1600": 0.88, "1790": 0.97, "1640": 0.81, "1760": 0.93, "1820": 0.99, "1780": 0.92, "1800": 0.93, "1810": 0.96, "1770": 0.92, "1700": 0.98, "1720": 1.0, "1710": 0.93, "1750": 0.89, "1630": 0.85, "1580": 0.79, "1670": 0.6, "1660": 0.72, "1650": 0.72, "1690": 0.83, "1680": 0.9, "1730": 0.93, "1740": 0.96, "1830": 1.0}, "essayist": {"1600": 0.14, "1620": 0.19, "1630": 0.05, "1610": 0.29, "1710": 0.36, "1810": 0.24, "1820": 0.22, "1590": 0.19, "1750": 0.32, "1580": 0.16, "1640": 0.16, "1650": 0.28, "1660": 0.39, "1670": 0.53, "1690": 0.53, "1680": 0.24, "1700": 0.44, "1720": 0.2, "1730": 0.21, "1740": 0.46, "1760": 0.16, "1780": 0.14, "1770": 0.31, "1790": 0.24, "1800": 0.16, "1830": 0.11}, "historian": {"1590": 0.08, "1620": 0.19, "1630": 0.13, "1810": 0.07, "1760": 0.03, "1780": 0.05, "1610": 0.12, "1600": 0.08, "1640": 0.03, "1690": 0.03, "1650": 0.04, "1660": 0.06, "1670": 0.13, "1700": 0.07, "1710": 0.02, "1680": 0.05, "1740": 0.1, "1750": 0.04, "1720": 0.12, "1730": 0.02, "1790": 0.08, "1770": 0.13, "1800": 0.06, "1820": 0.02, "1830": 0.05, "1580": 0.0}, "dramatist": {"1610": 0.2, "1620": 0.33, "1600": 0.34, "1790": 0.15, "1780": 0.25, "1580": 0.32, "1590": 0.17, "1630": 0.4, "1670": 0.27, "1660": 0.44, "1640": 0.19, "1650": 0.32, "1690": 0.3, "1680": 0.38, "1710": 0.45, "1700": 0.27, "1730": 0.27, "1720": 0.39, "1740": 0.28, "1760": 0.25, "1750": 0.16, "1770": 0.17, "1810": 0.16, "1800": 0.12, "1820": 0.08, "1830": 0.21}, "translator": {"1600": 0.16, "1820": 0.11, "1760": 0.22, "1780": 0.23, "1590": 0.19, "1750": 0.22, "1800": 0.19, "1630": 0.18, "1580": 0.47, "1640": 0.16, "1620": 0.11, "1670": 0.27, "1650": 0.2, "1660": 0.39, "1680": 0.14, "1710": 0.41, "1690": 0.23, "1700": 0.44, "1730": 0.18, "1720": 0.14, "1740": 0.3, "1610": 0.02, "1770": 0.19, "1790": 0.17, "1810": 0.15, "1830": 0.0}, "novelist": {"1820": 0.17, "1790": 0.14, "1810": 0.18, "1760": 0.06, "1780": 0.18, "1580": 0.16, "1660": 0.06, "1680": 0.05, "1640": 0.03, "1650": 0.04, "1700": 0.1, "1710": 0.05, "1690": 0.03, "1750": 0.05, "1730": 0.04, "1740": 0.09, "1770": 0.17, "1800": 0.2, "1830": 0.11, "1590": 0.04, "1670": 0.0, "1720": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0}, "journalist": {"1790": 0.08, "1810": 0.17, "1720": 0.1, "1750": 0.03, "1770": 0.05, "1690": 0.03, "1700": 0.02, "1710": 0.05, "1730": 0.09, "1740": 0.06, "1760": 0.03, "1780": 0.06, "1800": 0.1, "1820": 0.22, "1830": 0.21, "1670": 0.0, "1680": 0.0, "1580": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}, "editor": {"1760": 0.08, "1820": 0.28, "1800": 0.34, "1590": 0.03, "1660": 0.06, "1670": 0.2, "1690": 0.13, "1680": 0.1, "1700": 0.24, "1710": 0.16, "1720": 0.04, "1730": 0.2, "1740": 0.27, "1750": 0.18, "1770": 0.18, "1780": 0.25, "1790": 0.18, "1810": 0.18, "1830": 0.16, "1600": 0.03, "1580": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0}}, "occupations": {"clergyman": {"1600": 0.22, "1590": 0.12, "1620": 0.22, "1630": 0.18, "1790": 0.23, "1640": 0.38, "1760": 0.39, "1780": 0.3, "1770": 0.3, "1610": 0.2, "1810": 0.14, "1750": 0.45, "1820": 0.15, "1800": 0.19, "1670": 0.2, "1650": 0.28, "1660": 0.17, "1690": 0.33, "1680": 0.19, "1700": 0.24, "1710": 0.34, "1730": 0.32, "1720": 0.37, "1740": 0.39, "1830": 0.21, "1580": 0.05}, "antiquary": {"1590": 0.11, "1610": 0.17, "1620": 0.19, "1600": 0.11, "1820": 0.06, "1760": 0.13, "1780": 0.21, "1810": 0.12, "1750": 0.16, "1770": 0.09, "1580": 0.11, "1630": 0.1, "1650": 0.08, "1660": 0.17, "1680": 0.1, "1640": 0.03, "1670": 0.13, "1700": 0.02, "1690": 0.03, "1710": 0.02, "1740": 0.2, "1720": 0.06, "1730": 0.11, "1790": 0.18, "1800": 0.13, "1830": 0.0}, "lawyer": {"1600": 0.03, "1590": 0.2, "1620": 0.11, "1810": 0.15, "1750": 0.11, "1800": 0.11, "1770": 0.14, "1610": 0.15, "1580": 0.26, "1630": 0.03, "1640": 0.03, "1650": 0.12, "1670": 0.2, "1710": 0.09, "1700": 0.12, "1730": 0.09, "1740": 0.13, "1720": 0.04, "1760": 0.08, "1780": 0.09, "1790": 0.08, "1820": 0.15, "1830": 0.16, "1680": 0.0, "1690": 0.0, "1660": 0.0}, "laborer": {"1620": 0.07, "1780": 0.04, "1740": 0.05, "1790": 0.04, "1800": 0.04, "1820": 0.06, "1810": 0.02, "1830": 0.05, "1670": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1750": 0.0, "1630": 0.0, "1760": 0.0, "1640": 0.0, "1770": 0.0, "1650": 0.0, "1660": 0.0}, "courtier": {"1630": 0.18, "1620": 0.3, "1610": 0.22, "1750": 0.13, "1600": 0.16, "1580": 0.21, "1590": 0.28, "1640": 0.28, "1670": 0.47, "1660": 0.17, "1650": 0.24, "1690": 0.23, "1680": 0.29, "1700": 0.12, "1710": 0.14, "1730": 0.11, "1720": 0.06, "1740": 0.13, "1760": 0.07, "1770": 0.04, "1780": 0.04, "1790": 0.06, "1820": 0.02, "1810": 0.02, "1800": 0.04, "1830": 0.0}, "tutor": {"1630": 0.13, "1610": 0.1, "1600": 0.13, "1770": 0.07, "1580": 0.11, "1590": 0.05, "1670": 0.07, "1620": 0.07, "1640": 0.13, "1660": 0.11, "1650": 0.04, "1680": 0.1, "1690": 0.2, "1700": 0.07, "1710": 0.05, "1720": 0.18, "1730": 0.05, "1760": 0.06, "1740": 0.11, "1750": 0.06, "1800": 0.09, "1780": 0.08, "1790": 0.05, "1810": 0.05, "1820": 0.07, "1830": 0.0}, "schoolmaster": {"1610": 0.1, "1640": 0.03, "1710": 0.07, "1770": 0.16, "1820": 0.13, "1760": 0.1, "1630": 0.08, "1590": 0.07, "1600": 0.03, "1650": 0.12, "1660": 0.06, "1680": 0.1, "1690": 0.13, "1700": 0.17, "1730": 0.11, "1750": 0.21, "1720": 0.08, "1740": 0.09, "1780": 0.1, "1790": 0.15, "1810": 0.12, "1800": 0.11, "1830": 0.11, "1670": 0.0, "1580": 0.0, "1620": 0.0}, "musician": {"1790": 0.01, "1610": 0.02, "1640": 0.03, "1660": 0.06, "1690": 0.07, "1700": 0.02, "1740": 0.04, "1760": 0.04, "1780": 0.01, "1770": 0.03, "1800": 0.02, "1750": 0.01, "1600": 0.02, "1590": 0.04, "1580": 0.05, "1670": 0.0, "1680": 0.0, "1810": 0.0, "1820": 0.0, "1830": 0.0, "1710": 0.0, "1720": 0.0, "1730": 0.0, "1620": 0.0, "1630": 0.0, "1650": 0.0}, "professor": {"1640": 0.13, "1770": 0.06, "1610": 0.02, "1670": 0.07, "1690": 0.1, "1710": 0.07, "1700": 0.07, "1720": 0.02, "1740": 0.13, "1730": 0.02, "1780": 0.03, "1750": 0.04, "1760": 0.03, "1800": 0.01, "1790": 0.01, "1810": 0.06, "1820": 0.05, "1830": 0.05, "1650": 0.04, "1600": 0.03, "1680": 0.0, "1580": 0.0, "1590": 0.0, "1620": 0.0, "1630": 0.0, "1660": 0.0}, "painter": {"1780": 0.07, "1800": 0.07, "1770": 0.04, "1640": 0.06, "1680": 0.05, "1690": 0.07, "1710": 0.02, "1740": 0.04, "1720": 0.04, "1760": 0.03, "1790": 0.04, "1810": 0.04, "1830": 0.11, "1820": 0.03, "1670": 0.0, "1700": 0.0, "1580": 0.0, "1590": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1650": 0.0, "1660": 0.0}, "book trade": {"1760": 0.06, "1780": 0.07, "1770": 0.09, "1640": 0.03, "1670": 0.07, "1690": 0.03, "1710": 0.07, "1720": 0.04, "1750": 0.06, "1740": 0.05, "1730": 0.04, "1790": 0.11, "1810": 0.04, "1800": 0.07, "1820": 0.05, "1830": 0.05, "1600": 0.03, "1680": 0.0, "1700": 0.0, "1580": 0.0, "1590": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1650": 0.0, "1660": 0.0}, "secretary": {"1810": 0.06, "1760": 0.03, "1590": 0.07, "1620": 0.15, "1630": 0.08, "1640": 0.03, "1660": 0.17, "1650": 0.04, "1710": 0.25, "1700": 0.27, "1690": 0.13, "1730": 0.07, "1720": 0.1, "1740": 0.06, "1750": 0.08, "1770": 0.03, "1790": 0.03, "1800": 0.01, "1830": 0.11, "1610": 0.05, "1600": 0.02, "1670": 0.0, "1680": 0.0, "1820": 0.0, "1580": 0.0, "1780": 0.0}, "military": {"1810": 0.07, "1770": 0.06, "1600": 0.11, "1580": 0.16, "1590": 0.08, "1610": 0.12, "1620": 0.11, "1630": 0.08, "1640": 0.16, "1670": 0.13, "1660": 0.11, "1680": 0.05, "1690": 0.03, "1710": 0.07, "1700": 0.05, "1720": 0.04, "1730": 0.05, "1780": 0.05, "1750": 0.02, "1800": 0.06, "1760": 0.05, "1820": 0.07, "1830": 0.16, "1790": 0.02, "1740": 0.0, "1650": 0.0}, "physician": {"1770": 0.05, "1610": 0.02, "1650": 0.24, "1670": 0.13, "1690": 0.07, "1700": 0.02, "1710": 0.05, "1720": 0.04, "1740": 0.08, "1750": 0.04, "1780": 0.04, "1730": 0.04, "1760": 0.04, "1800": 0.05, "1790": 0.06, "1810": 0.03, "1820": 0.03, "1580": 0.05, "1590": 0.04, "1600": 0.02, "1680": 0.0, "1830": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1660": 0.0}, "merchant": {"1820": 0.02, "1740": 0.03, "1750": 0.01, "1760": 0.01, "1800": 0.03, "1780": 0.01, "1790": 0.02, "1810": 0.03, "1720": 0.04, "1830": 0.05, "1590": 0.01, "1620": 0.04, "1670": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1710": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1630": 0.0, "1640": 0.0, "1770": 0.0, "1650": 0.0, "1660": 0.0}, "diplomat": {"1600": 0.05, "1610": 0.05, "1620": 0.07, "1630": 0.03, "1640": 0.03, "1650": 0.08, "1660": 0.17, "1690": 0.13, "1700": 0.05, "1730": 0.04, "1710": 0.02, "1740": 0.01, "1750": 0.04, "1770": 0.05, "1790": 0.01, "1810": 0.02, "1830": 0.11, "1780": 0.01, "1800": 0.02, "1590": 0.08, "1670": 0.0, "1680": 0.0, "1820": 0.0, "1580": 0.0, "1720": 0.0, "1760": 0.0}, "actor": {"1790": 0.04, "1680": 0.1, "1730": 0.04, "1720": 0.02, "1760": 0.03, "1770": 0.04, "1780": 0.05, "1800": 0.02, "1810": 0.01, "1820": 0.01, "1590": 0.01, "1600": 0.03, "1610": 0.02, "1670": 0.0, "1690": 0.0, "1700": 0.0, "1830": 0.0, "1580": 0.0, "1710": 0.0, "1740": 0.0, "1620": 0.0, "1750": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}, "artisan": {"1680": 0.05, "1710": 0.02, "1720": 0.08, "1750": 0.04, "1740": 0.01, "1760": 0.01, "1770": 0.04, "1790": 0.05, "1780": 0.01, "1810": 0.02, "1800": 0.03, "1820": 0.02, "1830": 0.16, "1600": 0.08, "1670": 0.0, "1690": 0.0, "1700": 0.0, "1580": 0.0, "1590": 0.0, "1730": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}, "clerk": {"1690": 0.07, "1700": 0.02, "1760": 0.04, "1740": 0.03, "1770": 0.03, "1750": 0.01, "1790": 0.06, "1800": 0.06, "1780": 0.03, "1810": 0.09, "1820": 0.07, "1830": 0.11, "1670": 0.0, "1680": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1720": 0.0, "1600": 0.0, "1730": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}}, "societies": {"Member of Parliament": {"1820": 0.02, "1780": 0.08, "1810": 0.04, "1750": 0.08, "1800": 0.03, "1770": 0.04, "1580": 0.05, "1590": 0.11, "1640": 0.16, "1610": 0.1, "1630": 0.05, "1650": 0.08, "1660": 0.06, "1690": 0.2, "1670": 0.07, "1700": 0.07, "1710": 0.05, "1740": 0.04, "1730": 0.04, "1790": 0.04, "1760": 0.03, "1830": 0.05, "1600": 0.05, "1680": 0.0, "1720": 0.0, "1620": 0.0}, "Fellow of the Royal Society": {"1760": 0.08, "1780": 0.04, "1810": 0.01, "1750": 0.04, "1640": 0.13, "1660": 0.06, "1680": 0.14, "1670": 0.13, "1650": 0.08, "1690": 0.07, "1720": 0.02, "1740": 0.06, "1790": 0.04, "1730": 0.04, "1800": 0.01, "1770": 0.03, "1820": 0.01, "1700": 0.0, "1830": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0}, "Fellow of Society of Antiquaries": {"1760": 0.08, "1720": 0.02, "1740": 0.09, "1730": 0.02, "1790": 0.03, "1750": 0.06, "1780": 0.08, "1820": 0.01, "1810": 0.03, "1770": 0.01, "1670": 0.0, "1800": 0.0, "1680": 0.0, "1690": 0.0, "1700": 0.0, "1830": 0.0, "1580": 0.0, "1710": 0.0, "1590": 0.0, "1600": 0.0, "1610": 0.0, "1620": 0.0, "1630": 0.0, "1640": 0.0, "1650": 0.0, "1660": 0.0}}}
Raw
steam-chart.css
/**
* Text
**/
html {
height: 100%;
overflow-y: scroll;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 1em;
color: #222;
line-height: 1.5em;
font-weight: 400;
text-align: center;
}
body * {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 750px;
display: inline-block;
text-align: left;
padding: 30px 30px 40px;
box-sizing: border-box;
}
/**
* Factor buttons
**/
.factor-buttons {
font-family: courier;
text-align: center;
font-size: 15px;
}
.factor-button {
display: inline-block;
margin: 5px 0;
width: 90px;
padding: 16px 3px 11px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0);
cursor: pointer;
}
.factor-button.active {
background: #f1f1f1;
border: 1px solid #9f9f9f;
}
.factor-button img {
width: 45px;
}
/**
* Chart scrolls
**/
.chart {
max-width: 100%;
overflow: auto;
}
/**
* Tooltip
**/
.tooltip {
position: absolute;
z-index: -1;
opacity: 0;
background: #efefef;
box-sizing: border-box;
padding: 15px;
text-align: center;
}
.tooltip * {
display: inline-block;
}
.tooltip .value {
color: #52beda;
font-weight: 800;
font-size: 24px;
vertical-align: bottom;
}
/**
* Chart axes
**/
.domain {
fill: none;
stroke: darkgray;
}
text {
font-family: 'courier';
font-size: 15px;
fill: #666;
}
/**
* Steam chart
**/
.steam-chart-container {
position: relative;
}
#steam-chart-tooltip {
width: 340px;
}
#steam-chart {
cursor: default;
margin: 20px 0 10px;
text-align: center;
}
Raw
steam-chart.js
(function(){
/**
* State values:
* {obj} nestedData: the input data, with shape
* d[factor][level][year] = value
* {str} factor: the currently selected factor (e.g. occupation, gender)
* {arr} levels: an array of the levels for the current factor
* {arr} years: an array of integers that indicate the years for the chart
* {func} mouseoverX: a d3 quantized scale with domain = chart width in pixels
* and range = the year array; used for computing the hovered year
* inside the mousemove event handler
**/
var state = {
nestedData: {},
factor: 'occupations',
levels: [],
years: [],
mouseoverX: function() {},
mouse: {
x: null,
y: null
}
}
var colors = {
blue0: '#52beda',
blue1: '#3691a8',
blue2: '#206d81',
blue3: '#0c4351',
red0: '#fc8e80',
red1: '#d53a26',
red2: '#be311f',
red3: '#851b0e',
yellow0: '#ffecb3',
yellow1: '#e9cf7f',
yellow2: '#e3c15c',
yellow3: '#cf9f13'
}
var width = 690,
height = 500;
var margin = {
top: 0,
right: 30,
bottom: 40,
left: 30
}
var chart = {
width: width - margin.left - margin.right,
height: height - margin.top - margin.bottom,
container: '#steam-chart',
tooltip: '#steam-chart-tooltip',
data: {
file: 'metadata_distributions_over_time.json'
}
}
var buttons = {
container: '#steam-chart-buttons',
elem: '.factor-button'
}
var color = d3.scale.ordinal()
.range([colors.blue0, colors.blue1, colors.blue2, colors.blue3]);
var svg = d3.select(chart.container).append('svg')
.attr('preserveAspectRatio', 'xMidYMid meet')
.attr('viewBox', '0 0 ' + width + ' ' + height)
svg.append('g').attr('class', 'steam')
.attr('transform', 'translate('+ margin.left + ',' + margin.top + ')');
svg.append('g').attr('class', 'x axis')
.attr('transform', 'translate('+ margin.left + ',' + chart.height + ')')
.append('text')
.attr('x', (chart.width/2) - 38)
.attr('y', 40)
.style('font-size', 16)
.html('Year')
/**
* The data passed to the stack layout should have the following form:
*
* [
* [
* {x: y:}, {x: y:} // observations for first level of factor
* ],
* [
* {x: y:}, {x: y:} // observations for second level of factor
* ]
* ]
*
* NB: Every level of each factor must have the same number of observations
* (one per level along the x axis)
**/
function redraw() {
d3.json(chart.data.file, function(json) {
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var stack = d3.layout.stack().offset('wiggle');
data = stack(parseData(json));
// chart scales
var x = d3.scale.linear()
.domain([_.min(state.years), _.max(state.years)])
.range([0, chart.width]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(layer) {
return d3.max(layer, function(d) {
return d.y0 + d.y;
});
})])
.range([chart.height, 0]);
// mouseover scale; the domain == range of chart x scale
state.mouseoverX = d3.scale.quantize()
.domain([0, chart.width])
.range(state.years)
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(d3.format('d'));
var paths = svg.select('.steam').selectAll('.steam-path').data(data, function(d, i) {
return i
});
paths.exit()
.transition()
.duration(300)
.style('opacity', 0)
.remove()
paths.enter().append('path')
.attr('class', 'steam-path')
.attr('d', area)
.style('fill', function(d, i) { return color(i); })
.style('opacity', 0)
.on('mousemove', handleMousemove)
.on('mouseout', handleMouseout);
paths.transition()
.duration(300)
.attr('d', area)
.style('opacity', 1);
svg.select('.x.axis').call(xAxis);
})
}
/**
* Transform data from shape d[factor][level][year] = count
* to data of shape [[{x: y:}, {x: y:}], [{x: y:}, {x: y:}]]
* where each subarray represents one level of the currently
* selected factor
**/
function parseData(json) {
var data = [],
levels = [],
years = [];
_.keys(json[state.factor]).forEach(function(level) {
levels.push(level);
var factorArray = [];
_.keys(json[state.factor][level]).forEach(function(year) {
if (!isNaN(json[state.factor][level][year])) {
year = parseInt(year);
years.push(year);
factorArray.push({
x: year,
y: json[state.factor][level][year]
})
}
})
data.push(factorArray)
})
// cache the x domain and levels in the state
state.nestedData = json;
state.levels = levels;
state.years = _.sortBy(_.uniqBy(years));
return data;
}
/**
* Functions called on mousemove over chart
**/
var tooltip = d3.select(chart.tooltip);
function handleMousemove(d, i) {
d3.select(chart.container).selectAll('.steam-path')
.style('opacity', 0.8)
d3.select(this).style('opacity', 1)
var mousePosition = d3.mouse(this),
year = state.mouseoverX(mousePosition[0]),
level = state.levels[i],
value = state.nestedData[state.factor][level][year];
tooltip
.style('left', mousePosition[0] - 140 + 'px')
.style('top', mousePosition[1] - 100 + 'px')
.style('opacity', 1)
.style('z-index', 10);
tooltip.select('.level').html(level + '-poets')
tooltip.select('.year').html(year + ': ')
tooltip.select('.value').html(parseInt(value*100)+'%')
}
function handleMouseout(d, i) {
tooltip.style('opacity', 0)
.style('z-index', -1)
d3.select(chart.container).selectAll('.steam-path')
.style('opacity', 1)
}
/**
* Click event handlers
**/
function selectButton(target) {
for (var i=0; i<containerButtons.length; i++) {
var elem = containerButtons[i];
elem.classList.remove('active');
if (elem.dataset['id'] === target.dataset['id']) {
elem.className += ' active';
state.factor = target.dataset['id'];
redraw()
}
}
}
// add event listeners
var container = document.querySelector(buttons.container),
containerButtons = container.querySelectorAll(buttons.elem);
for (var i=0; i<containerButtons.length; i++) {
containerButtons[i].addEventListener('click', function(e) {
var elem = e.target;
while (!elem.dataset['id']) {
elem = elem.parentNode;
}
selectButton(elem)
})
}
var chartContainer = document.querySelector(chart.container);
chartContainer.addEventListener('mousemove', function(e) {
state.mouse.x = e.clientX;
state.mouse.y = e.clientY;
})
redraw()
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment