Skip to content

Instantly share code, notes, and snippets.

@erikhazzard
Last active November 11, 2015 08:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erikhazzard/83f36e1537be85edc0c5 to your computer and use it in GitHub Desktop.
Save erikhazzard/83f36e1537be85edc0c5 to your computer and use it in GitHub Desktop.
slavery
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='lodash.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<style>
svg {
width: 960px;
height: 500px;
border: solid 1px #ccc;
font: 10px sans-serif;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type='text/javascript'>
var w = 960;
var h = 500;
var p = [20, 50, 30, 20];
var x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]);
var y = d3.scale.linear().range([0, h - p[0] - p[2]]);
var z = d3.scale.ordinal().range(['lightpink', 'darkgray', 'lightblue']);
var dateParse= d3.time.format('%Y').parse;
var format = d3.time.format('%b');
var svg = d3.select('body').append('svg:svg')
.attr({
width: w,
height: h
})
.append('svg:g')
.attr({
transform: 'translate(' + p[3] + ',' + (h - p[2]) + ')'
});
d3.csv('slavery.csv', function(slavery) {
// Transpose the data into layers by cause.
var causes = d3.layout.stack()([
'spain',
'portugal',
'great_britian',
'netherlands',
'usa',
'france',
'denmark_baltics'
].map(function(cause) {
return slavery.map(function(d) {
// clean up data. Some of the data has numbers like "2,412" so we have to remove the commas (any non-numerical character)
return {
// parse date
x: dateParse(d.year),
// ensure it's a string, replace any non numerical
// character, then get the value (+ operator) (note: could
// also use parseInt((code) , 10)
y: +(('' + d[cause]).replace(/[^0-9]/g,''))
};
});
}
));
// Compute the x-domain (by date) and y-domain (by top).
x.domain(causes[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(causes[causes.length - 1], function(d) {
return d.y0 + d.y;
})]);
// Add a group for each cause.
var cause = svg.selectAll('g.cause')
.data(causes)
.enter().append('svg:g')
.attr('class', 'cause')
.style('fill', function(d, i) { return z(i); })
.style('stroke', function(d, i) { return d3.rgb(z(i)).darker(); });
// Add a rect for each date.
var rect = cause.selectAll('rect')
.data(Object)
.enter().append('svg:rect')
.attr('x', function(d) { return x(d.x); })
.attr('y', function(d) { return -y(d.y0) - y(d.y); })
.attr('height', function(d) { return y(d.y); })
.attr('width', x.rangeBand());
// Add a label per date.
var label = svg.selectAll('text')
.data(x.domain())
.enter().append('svg:text')
.attr('x', function(d) { return x(d) + x.rangeBand() / 2; })
.attr('y', 6)
.attr('text-anchor', 'middle')
.attr('dy', '.71em')
.text(format);
// Add y-axis rules.
var rule = svg.selectAll('g.rule')
.data(y.ticks(5))
.enter().append('svg:g')
.attr('class', 'rule')
.attr('transform', function(d) { return 'translate(0,' + -y(d) + ')'; });
rule.append('svg:line')
.attr('x2', w - p[1] - p[3])
.style('stroke', function(d) { return d ? '#fff' : '#000'; })
.style('stroke-opacity', function(d) { return d ? .7 : null; });
rule.append('svg:text')
.attr('x', w - p[1] - p[3] + 6)
.attr('dy', '.35em')
.text(d3.format(',d'));
console.log('up');
});
</script>
</body>
</html>
year spain portugal great_britian netherlands usa france denmark_baltics
1501 95 95 0 0 0 0 0
1502 95 95 0 0 0 0 0
1503 95 95 0 0 0 0 0
1504 95 95 0 0 0 0 0
1505 95 95 0 0 0 0 0
1506 95 95 0 0 0 0 0
1507 95 95 0 0 0 0 0
1508 95 95 0 0 0 0 0
1509 95 95 0 0 0 0 0
1510 95 95 0 0 0 0 0
1511 95 95 0 0 0 0 0
1512 95 95 0 0 0 0 0
1513 95 95 0 0 0 0 0
1514 95 332 0 0 0 0 0
1515 95 95 0 0 0 0 0
1516 786 1,186 0 0 0 0 0
1517 786 786 0 0 0 0 0
1518 786 786 0 0 0 0 0
1519 786 786 0 0 0 0 0
1520 786 786 0 0 0 0 0
1521 202 202 0 0 0 0 0
1522 202 202 0 0 0 0 0
1523 202 202 0 0 0 0 0
1524 202 202 0 0 0 0 0
1525 202 202 0 0 0 0 0
1526 897 897 0 0 0 0 0
1527 897 897 0 0 0 0 0
1528 897 897 0 0 0 0 0
1529 897 897 0 0 0 0 0
1530 897 897 0 0 0 0 0
1531 861 862 0 0 0 0 0
1532 861 862 0 0 0 0 0
1533 861 862 0 0 0 0 0
1534 861 862 0 0 0 0 0
1535 861 862 0 0 0 0 0
1536 579 579 0 0 0 0 0
1537 579 579 0 0 0 0 0
1538 579 579 0 0 0 0 0
1539 579 579 0 0 0 0 0
1540 579 579 0 0 0 0 0
1541 1,796 1,796 0 0 0 0 0
1542 1,796 1,796 0 0 0 0 0
1543 1,796 1,796 0 0 0 0 0
1544 1,796 1,796 0 0 0 0 0
1545 1,796 1,796 0 0 0 0 0
1546 943 943 0 0 0 0 0
1547 943 943 0 0 0 0 0
1548 943 943 0 0 0 0 0
1549 943 943 0 0 0 0 0
1550 943 943 0 0 0 0 0
1551 137 138 0 0 0 0 0
1552 137 138 0 0 0 0 0
1553 137 138 0 0 0 0 0
1554 137 138 0 0 0 0 0
1555 137 138 0 0 0 0 0
1556 427 428 94 0 0 0 0
1557 427 428 0 0 0 0 0
1558 427 428 0 0 0 0 0
1559 427 428 0 0 0 0 0
1560 427 428 0 0 0 0 0
1561 2,337 2,454 0 0 0 0 0
1562 2,337 2,462 0 0 0 0 0
1563 2,337 2,471 300 0 0 0 0
1564 2,337 2,480 0 0 0 0 0
1565 2,337 2,489 400 0 0 0 0
1566 1,415 1,580 0 0 0 0 0
1567 1,415 1,591 423 0 0 0 0
1568 1,415 1,603 468 0 0 0 0
1569 1,415 1,615 0 0 0 0 0
1570 1,415 1,629 0 0 0 0 0
1571 1,317 1,545 0 0 0 66 0
1572 1,317 1,560 0 0 0 0 0
1573 1,317 1,577 0 0 0 0 0
1574 1,317 1,594 0 0 0 0 0
1575 1,317 1,613 0 0 0 0 0
1576 1,291 1,607 0 0 0 0 0
1577 1,291 1,628 0 0 0 0 0
1578 1,291 1,651 0 0 0 0 0
1579 1,291 1,675 0 0 0 0 0
1580 1,291 1,900 0 0 0 0 0
1581 2,198 2,853 0 0 0 0 0
1582 2,198 2,902 0 0 0 0 0
1583 2,198 2,955 237 0 0 0 0
1584 2,198 3,011 0 0 0 0 0
1585 2,198 3,072 0 0 0 0 0
1586 2,541 3,481 0 0 0 0 0
1587 2,541 3,551 0 0 0 0 0
1588 2,541 3,628 0 0 0 0 0
1589 2,541 3,709 0 0 0 0 0
1590 2,541 3,797 0 0 0 0 0
1591 1,043 2,394 0 0 0 0 0
1592 1,043 2,496 0 0 0 0 0
1593 1,043 2,607 0 0 0 0 0
1594 1,043 2,726 0 0 0 0 0
1595 4,289 6,099 0 0 0 0 0
1596 4,289 6,420 0 83 0 0 0
1597 4,289 6,386 0 1,002 0 0 0
1598 4,289 6,546 0 280 0 0 0
1599 4,289 6,717 0 0 0 0 0
1600 4,289 6,904 0 0 0 0 0
1601 1,904 4,720 0 0 0 0 0
1602 1,904 4,937 0 0 0 0 0
1603 1,904 5,169 0 0 0 0 0
1604 1,904 5,422 0 334 0 0 0
1605 1,904 5,693 0 0 0 0 0
1606 3,162 7,243 0 544 0 0 0
1607 3,162 7,696 0 0 0 0 0
1608 3,162 7,901 0 0 0 0 0
1609 3,162 8,268 0 0 0 0 0
1610 3,162 8,665 0 0 0 0 0
1611 1,045 6,976 0 0 0 0 0
1612 1,045 7,559 0 334 0 0 0
1613 1,045 7,938 0 0 0 0 0
1614 1,045 8,477 0 0 0 0 0
1615 1,045 9,059 0 617 0 0 0
1616 5,151 13,794 0 0 0 0 0
1617 5,151 14,473 0 0 0 0 0
1618 5,151 16,055 0 0 0 0 0
1619 5,151 15,999 0 0 0 0 0
1620 5,151 16,674 0 0 0 0 0
1621 5,437 16,960 0 0 0 0 0
1622 5,437 16,960 0 0 0 0 0
1623 5,437 16,960 0 0 0 0 0
1624 5,437 16,960 0 0 0 0 0
1625 5,437 16,960 0 0 0 0 0
1626 1,797 13,320 0 0 0 0 0
1627 1,797 13,604 0 0 0 0 0
1628 1,797 13,320 141 0 0 0 0
1629 1,797 13,320 0 0 0 0 0
1630 1,797 8,493 0 326 0 0 0
1631 2,779 8,951 0 0 0 0 0
1632 2,779 8,951 0 0 0 0 0
1633 2,779 9,298 381 0 0 0 0
1634 2,779 8,951 0 0 0 0 0
1635 2,779 8,951 0 0 0 0 0
1636 2,239 9,532 0 0 0 0 0
1637 2,239 8,411 0 1,299 0 0 0
1638 2,239 8,411 0 1,723 0 0 0
1639 2,239 8,411 0 1,920 0 0 0
1640 2,239 8,411 0 1,510 0 0 0
1641 2,239 6,239 949 1,935 0 0 150
1642 889 4,000 1,722 3,128 0 0 0
1643 889 4,325 0 6,203 0 366 0
1644 889 4,179 5,530 6,416 0 566 0
1645 889 4,581 6,115 4,551 371 0 0
1646 889 4,000 9,480 1,131 0 628 260
1647 889 4,617 5,854 7 0 267 643
1648 889 4,000 2,103 0 0 0 0
1649 889 7,048 1,421 1,038 0 0 0
1650 889 8,286 0 542 453 0 0
1651 1,350 8,586 1,046 0 0 0 0
1652 889 7,631 1,157 1,919 0 0 0
1653 889 7,956 0 1,777 0 0 0
1654 1,300 7,956 3,043 1,448 0 0 0
1655 889 9,480 989 1,511 0 355 0
1656 1,516 10,721 6,157 1,300 0 0 0
1657 889 9,986 3,211 3,028 0 0 325
1658 889 9,926 9,139 3,772 0 0 0
1659 889 9,688 989 7,012 0 351 0
1660 889 9,306 989 4,216 0 0 328
1661 889 9,431 5,420 4,105 0 0 0
1662 889 9,456 4,864 2,339 0 0 0
1663 0 10,269 3,059 3,618 0 0 0
1664 0 9,306 11,534 5,260 0 351 0
1665 0 9,306 10,223 2,635 0 0 0
1666 0 12,825 7,602 1,492 0 702 0
1667 0 12,956 4,061 4,231 0 351 0
1668 0 12,731 10,747 6,877 0 0 0
1669 0 10,882 6,946 11,476 0 0 0
1670 0 12,025 3,014 6,559 0 1,108 0
1671 0 6,514 5,767 9,964 0 1,336 0
1672 0 7,544 3,932 5,458 0 1,518 0
1673 0 10,084 3,801 4,001 0 351 0
1674 330 10,143 4,848 3,925 0 0 0
1675 104 10,084 9,830 2,603 0 702 0
1676 0 10,084 8,781 4,345 0 0 0
1677 960 10,084 5,111 3,648 0 1,094 0
1678 1,406 9,064 11,402 1,634 66 702 0
1679 801 9,712 7,602 3,287 371 3,366 316
1680 400 9,347 10,616 5,088 186 81 0
1681 1,493 9,064 16,251 5,557 453 1,405 0
1682 0 9,064 13,499 3,025 0 2,337 0
1683 0 9,064 17,304 3,792 0 1,405 584
1684 0 8,536 9,962 3,128 0 1,125 0
1685 400 10,181 11,011 5,393 300 1,214 0
1686 0 5,386 11,928 3,760 0 1,727 250
1687 0 7,108 12,714 6,912 221 1,405 599
1688 0 8,130 8,650 5,867 0 2,093 1,338
1689 0 9,064 7,733 2,581 0 842 0
1690 400 11,016 3,141 467 0 728 958
1691 0 12,568 7,995 3,462 0 570 1,157
1692 0 11,997 11,664 1,770 0 0 3,017
1693 0 6,908 9,174 3,197 227 1,646 4,831
1694 0 7,650 10,223 3,127 0 364 2,516
1695 0 12,066 8,650 1,822 227 517 1,011
1696 0 17,462 7,975 1,169 0 369 3,034
1697 0 23,887 10,180 2,253 227 194 363
1698 0 29,107 9,385 3,912 1,011 2,434 1,693
1699 0 18,308 16,180 3,883 0 1,821 2,777
1700 0 22,415 25,069 2,768 38 2,046 1,242
1701 0 18,240 26,764 7,606 0 2,426 718
1702 0 18,273 22,763 3,147 0 1,054 476
1703 0 18,241 10,154 1,621 0 4,202 258
1704 0 16,540 16,036 2,175 0 2,095 349
1705 0 13,810 13,907 4,829 37 5,049 820
1706 0 15,434 13,232 1,966 0 914 0
1707 0 25,349 7,982 4,475 0 1,600 447
1708 0 16,111 18,068 3,375 0 2,373 0
1709 0 17,043 9,388 2,610 0 2,632 445
1710 0 16,099 13,582 3,785 83 4,851 806
1711 0 17,077 13,468 2,273 83 3,382 0
1712 0 18,244 11,128 2,067 120 2,688 0
1713 0 22,639 14,303 596 0 4,375 0
1714 0 20,764 16,563 2,778 0 9,441 170
1715 0 19,115 16,110 2,944 212 10,173 265
1716 0 21,454 14,641 2,780 65 7,983 0
1717 0 19,660 19,526 2,839 657 5,130 0
1718 0 22,391 22,913 1,615 456 4,683 216
1719 0 17,550 22,203 2,986 274 5,429 0
1720 0 21,691 16,555 1,587 154 6,993 0
1721 0 15,875 14,830 1,595 0 8,863 0
1722 0 15,129 14,404 2,807 186 10,370 206
1723 0 17,764 15,658 3,415 104 3,425 0
1724 0 27,982 23,100 3,415 0 5,294 657
1725 0 21,973 23,318 4,530 846 5,514 0
1726 0 24,418 25,050 4,829 859 6,759 0
1727 0 24,949 21,589 3,772 334 7,585 519
1728 0 22,761 24,695 1,957 954 7,593 55
1729 0 19,755 31,945 3,417 1,519 9,721 126
1730 0 18,521 31,603 2,056 562 9,230 0
1731 0 20,253 30,486 2,381 1,147 7,747 55
1732 0 15,915 30,163 3,571 2,437 8,128 120
1733 0 19,576 20,095 3,630 1,727 7,164 443
1734 0 23,911 21,157 4,680 676 4,270 266
1735 0 22,281 16,726 5,017 1,228 7,345 0
1736 0 22,477 22,113 3,900 2,886 6,729 178
1737 0 19,630 33,683 1,903 2,057 10,086 0
1738 0 22,457 18,790 1,828 1,658 12,371 13
1739 0 18,272 28,971 1,992 2,177 17,632 50
1740 0 20,434 21,745 555 1,511 19,258 53
1741 0 15,740 19,529 3,025 1,320 22,871 0
1742 0 25,584 15,515 2,363 1,139 18,192 63
1743 0 18,847 13,990 3,803 1,397 18,666 0
1744 0 26,675 19,724 4,194 1,297 17,900 119
1745 0 19,754 6,919 4,601 495 3,841 0
1746 0 19,966 10,247 3,946 747 0 307
1747 0 25,062 21,816 4,873 836 779 641
1748 0 23,933 22,419 3,454 1,220 3,526 356
1749 0 23,064 23,860 4,320 1,369 13,219 1,080
1750 0 22,460 21,214 3,028 2,452 18,482 349
1751 0 18,605 20,118 3,376 3,569 15,892 514
1752 284 23,450 25,946 2,699 2,147 16,877 1,007
1753 0 24,158 25,331 2,093 2,068 16,177 697
1754 0 19,883 27,500 5,536 1,713 19,344 583
1755 0 21,069 31,210 3,889 2,769 22,740 252
1756 0 25,667 23,838 4,822 1,810 7,710 1,133
1757 0 22,090 20,490 4,276 2,988 386 1,134
1758 0 22,320 23,712 6,569 2,160 0 649
1759 0 19,932 23,446 4,844 1,772 0 997
1760 0 18,760 33,757 2,940 2,069 0 1,191
1761 0 21,262 36,924 5,135 3,873 0 1,064
1762 0 20,902 28,312 5,874 3,401 0 1,733
1763 0 18,857 28,672 6,198 4,126 2,037 0
1764 0 17,257 40,815 5,224 5,208 17,395 509
1765 0 26,246 36,371 6,607 4,580 17,872 569
1766 822 24,275 42,429 6,009 2,922 21,835 0
1767 1,129 23,875 34,124 6,927 3,551 20,100 233
1768 1,261 21,038 33,862 5,648 2,575 19,130 1,017
1769 743 19,337 36,782 5,378 3,318 18,408 295
1770 0 19,606 42,493 6,797 3,889 21,440 688
1771 0 19,188 42,057 8,249 3,816 13,840 536
1772 0 20,534 42,528 6,878 4,868 19,782 987
1773 0 19,969 38,971 6,418 5,651 17,014 709
1774 0 19,969 46,702 5,282 6,717 19,407 415
1775 0 20,444 45,657 4,662 3,016 18,533 596
1776 0 21,414 38,217 2,420 603 24,336 156
1777 0 15,432 21,932 3,841 0 25,642 0
1778 0 23,901 10,267 2,569 165 23,281 642
1779 0 21,899 7,573 3,361 0 2,922 2,004
1780 0 27,747 7,418 4,032 0 0 497
1781 0 30,317 12,659 2,340 0 372 2,792
1782 0 27,186 17,903 630 318 3,422 2,942
1783 0 25,994 22,624 790 1,121 10,239 1,493
1784 0 25,290 40,468 3,264 1,113 30,609 3,619
1785 0 23,274 31,659 2,842 2,763 31,724 2,890
1786 0 26,233 29,975 889 1,967 35,342 1,123
1787 0 24,543 29,322 1,667 2,406 42,329 1,039
1788 274 25,631 36,419 1,189 995 38,871 661
1789 0 21,541 29,125 1,219 2,547 36,586 1,395
1790 236 24,890 27,123 1,945 3,101 54,403 350
1791 397 23,965 40,668 2,234 2,982 36,982 350
1792 2,236 33,734 45,542 1,828 6,259 25,568 350
1793 803 34,150 46,236 2,925 5,002 9,999 447
1794 67 34,743 27,454 211 3,991 326 679
1795 963 36,052 24,897 577 5,364 0 1,383
1796 0 29,471 29,258 0 7,595 0 1,910
1797 590 33,369 32,639 0 6,146 107 2,303
1798 284 25,405 40,470 0 2,187 0 2,921
1799 498 29,675 49,897 0 4,913 0 3,101
1800 67 27,311 48,867 0 5,903 0 4,153
1801 763 32,004 41,535 0 2,708 0 2,210
1802 663 36,628 48,045 304 5,604 2,475 5,223
1803 2,708 32,997 43,175 993 6,723 7,517 3,608
1804 193 39,968 34,798 0 11,268 873 1,575
1805 816 38,336 32,739 0 15,327 0 2,130
1806 0 41,579 38,233 0 20,874 0 1,476
1807 0 40,138 36,127 0 36,217 0 94
1808 0 30,335 8,978 304 3,150 77 0
1809 993 38,421 18 4 500 0 0
1810 7,283 62,984 310 0 1,552 0 0
1811 8,520 48,657 0 0 776 0 0
1812 4,657 55,316 0 0 500 0 0
1813 3,120 47,078 0 0 500 0 0
1814 4,665 48,133 0 0 500 637 0
1815 8,536 46,824 0 0 500 3,808 0
1816 22,077 51,819 0 0 500 2,447 0
1817 29,022 54,406 0 0 500 4,823 0
1818 21,391 60,760 0 0 500 4,782 0
1819 16,592 52,683 0 32 500 6,677 0
1820 5,656 51,177 0 702 500 15,570 0
1821 4,342 54,064 0 0 161 16,242 0
1822 2,907 63,106 0 180 0 21,615 0
1823 2,231 39,945 0 0 0 8,620 0
1824 5,364 43,844 0 0 186 16,626 0
1825 15,589 49,397 0 150 0 23,026 0
1826 7,000 66,334 0 0 0 23,863 0
1827 10,477 68,928 0 0 440 12,865 0
1828 14,983 68,299 0 0 0 9,436 0
1829 22,854 82,611 0 357 1,410 10,412 0
1830 20,100 57,893 0 0 0 9,890 0
1831 16,931 6,813 0 0 0 1,609 0
1832 18,078 11,249 0 0 0 0 0
1833 17,673 16,548 0 0 0 0 0
1834 23,227 23,305 0 0 0 0 0
1835 34,723 46,529 0 0 0 0 0
1836 31,528 70,784 0 0 0 0 0
1837 26,412 76,951 0 0 0 0 0
1838 29,567 70,883 0 0 0 0 0
1839 25,700 72,697 0 0 0 0 0
1840 22,011 43,067 0 0 0 0 0
1841 18,431 32,886 0 0 0 0 0
1842 6,853 31,084 0 0 0 0 0
1843 10,022 45,025 0 0 0 0 0
1844 12,276 36,510 0 0 0 0 0
1845 4,999 28,832 0 0 0 0 0
1846 1,518 66,191 0 0 0 0 0
1847 4,083 80,156 0 0 0 0 0
1848 5,049 81,241 0 0 0 0 0
1849 10,907 74,150 0 0 0 0 0
1850 5,325 41,004 0 0 0 0 0
1851 9,246 7,555 0 0 0 0 0
1852 9,308 1,234 0 0 0 0 0
1853 17,802 0 0 0 0 0 0
1854 14,819 0 0 0 0 0 0
1855 6,396 0 0 0 0 0 0
1856 8,160 520 0 0 0 0 0
1857 15,225 0 0 0 0 0 0
1858 19,286 0 0 0 350 0 0
1859 34,785 0 0 0 0 0 0
1860 26,605 0 0 0 126 0 0
1861 24,395 0 0 0 0 0 0
1862 14,227 0 0 0 0 0 0
1863 7,774 0 0 0 0 0 0
1864 4,653 0 0 0 0 0 0
1865 2,265 0 0 0 0 0 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment