Skip to content

Instantly share code, notes, and snippets.

@Saminu

Saminu/.block

Last active January 5, 2017 15:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Saminu/31ea16f4688e772a92dd252ee056d9a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Saminu/31ea16f4688e772a92dd252ee056d9a1 to your computer and use it in GitHub Desktop.
Download ZIP
Real Daily Wages is Pounds from 1260 - 1994
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.area {
fill: steelblue;
clip-path: url(#clip);
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
</style>
</head>
<h2>Real Daily Wages is Pounds from <strong>1260 - 1994</strong></h2>
<body>
<svg width="960" height="440"></svg>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 350, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var parseDate = d3.timeParse("%b %Y");
var parseDate2 = d3.timeParse("%Y-%m");
var parseDate3 = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var area = d3.area()
.curve(d3.curveMonotoneX)
.x(function (d) {
return x(d.date);
})
.y0(height)
.y1(function (d) {
return y(d.price);
});
var area2 = d3.area()
.curve(d3.curveMonotoneX)
.x(function (d) {
return x2(d.date);
})
.y0(height2)
.y1(function (d) {
return y2(d.price);
});
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("real-daily-wages-in-pounds-engla.csv", type, function (error, data) {
if (error) throw error;
console.log(data[0]);
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain([0, d3.max(data, function (d) {
return d.price;
})]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
});
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
function type(d) {
d.date = parseDate3(+d.date);
d.price = +d.wages;
console.log(d);
// d.date = parseDate(d.date);
// d.price = +d.price;
return d;
}
function cleanFunc(d) {
var data = d.data;
data.forEach(function (d) {
d.date = parseDate2(d.date);
d.uncert = d.uncert * 1000;
});
// console.log(data);
return data
}
</script>
</body>
Raw
real-daily-wages-in-pounds-engla.csv
date wages
1260 4.41
1261 4.63
1262 4.38
1263 4.52
1264 4.42
1265 4.64
1266 4.44
1267 5.15
1268 5.23
1269 4.42
1270 4.71
1271 3.76
1272 2.80
1273 3.76
1274 3.91
1275 3.68
1276 3.83
1277 3.71
1278 3.61
1279 3.91
1280 3.91
1281 3.98
1282 3.54
1283 3.32
1284 3.10
1285 4.42
1286 4.05
1287 4.05
1288 5.08
1289 5.31
1290 4.64
1291 3.46
1292 3.83
1293 3.98
1294 3.32
1295 2.80
1296 3.54
1297 3.98
1298 3.46
1299 3.83
1300 3.24
1301 4.29
1302 4.28
1303 4.65
1304 4.57
1305 4.42
1306 4.27
1307 4.57
1308 4.05
1309 3.76
1310 3.47
1311 3.98
1312 4.57
1313 4.86
1314 4.42
1315 3.76
1316 2.28
1317 2.28
1318 3.24
1319 4.13
1320 4.64
1321 4.05
1322 3.54
1323 3.02
1324 3.61
1325 3.91
1326 3.98
1327 5.16
1328 5.16
1329 4.13
1330 4.13
1331 3.68
1332 3.76
1333 4.42
1334 5.01
1335 5.16
1336 4.86
1337 4.42
1338 5.29
1339 5.18
1340 3.83
1341 4.27
1342 4.35
1343 4.42
1344 3.83
1345 3.76
1346 4.20
1347 3.39
1348 3.17
1349 3.83
1350 3.61
1351 2.93
1352 2.60
1353 3.19
1354 3.96
1355 4.24
1356 4.23
1357 4.02
1358 4.02
1359 4.63
1360 4.50
1361 4.64
1362 3.98
1363 3.98
1364 4.05
1365 4.27
1366 5.08
1367 4.50
1368 4.42
1369 4.05
1370 3.32
1371 3.76
1372 4.64
1373 4.64
1374 4.86
1375 4.86
1376 4.20
1377 5.45
1378 6.41
1379 6.49
1380 5.75
1381 5.16
1382 5.53
1383 5.67
1384 5.31
1385 5.45
1386 5.90
1387 6.12
1388 5.97
1389 6.12
1390 5.75
1391 4.57
1392 5.90
1393 6.12
1394 6.04
1395 6.56
1396 6.19
1397 5.31
1398 5.08
1399 5.38
1400 5.90
1401 4.72
1402 4.79
1403 5.22
1404 6.40
1405 6.53
1406 6.60
1407 6.79
1408 6.40
1409 5.82
1410 5.47
1411 6.83
1412 7.15
1413 6.85
1414 6.85
1415 6.41
1416 5.97
1417 5.75
1418 6.49
1419 7.74
1420 7.22
1421 7.96
1422 7.59
1423 6.85
1424 7.15
1425 6.78
1426 7.15
1427 7.66
1428 7.44
1429 5.82
1430 5.31
1431 6.41
1432 7.22
1433 6.56
1434 6.78
1435 7.00
1436 7.74
1437 7.96
1438 5.75
1439 4.79
1440 5.23
1441 7.96
1442 8.70
1443 7.59
1444 7.22
1445 8.47
1446 7.74
1447 7.37
1448 7.22
1449 6.93
1450 7.22
1451 6.78
1452 7.59
1453 7.59
1454 7.00
1455 7.81
1456 7.30
1457 7.96
1458 7.44
1459 7.74
1460 7.59
1461 6.19
1462 6.41
1463 8.40
1464 8.55
1465 6.85
1466 6.78
1467 6.85
1468 6.93
1469 6.85
1470 7.22
1471 7.15
1472 7.07
1473 7.59
1474 7.74
1475 8.18
1476 8.70
1477 9.06
1478 8.25
1479 7.59
1480 7.15
1481 6.41
1482 5.08
1483 4.57
1484 5.75
1485 7.44
1486 8.55
1487 7.15
1488 6.63
1489 6.78
1490 6.93
1491 6.56
1492 7.15
1493 6.26
1494 7.66
1495 8.25
1496 7.81
1497 7.30
1498 7.66
1499 7.44
1500 7.84
1501 6.89
1502 6.04
1503 6.46
1504 6.89
1505 7.16
1506 6.95
1507 7.52
1508 7.37
1509 8.01
1510 7.16
1511 7.60
1512 7.30
1513 6.14
1514 6.25
1515 6.89
1516 6.70
1517 6.64
1518 6.35
1519 5.71
1520 5.38
1521 4.41
1522 4.61
1523 5.42
1524 5.54
1525 5.71
1526 5.54
1527 5.01
1528 4.12
1529 4.64
1530 4.36
1531 4.78
1532 4.12
1533 4.41
1534 5.19
1535 5.80
1536 4.68
1537 5.00
1538 5.67
1539 5.38
1540 5.06
1541 4.89
1542 4.73
1543 4.80
1544 4.66
1545 4.38
1546 3.40
1547 3.68
1548 4.46
1549 4.16
1550 3.52
1551 3.34
1552 3.56
1553 3.90
1554 3.76
1555 3.94
1556 2.95
1557 2.73
1558 4.98
1559 4.60
1560 4.53
1561 4.34
1562 4.66
1563 2.39
1564 4.59
1565 4.41
1566 4.50
1567 4.63
1568 4.69
1569 4.83
1570 4.48
1571 5.12
1572 5.08
1573 5.05
1574 3.73
1575 4.26
1576 4.60
1577 3.95
1578 4.13
1579 4.48
1580 4.31
1581 4.24
1582 4.30
1583 4.55
1584 4.43
1585 4.36
1586 4.19
1587 3.00
1588 4.26
1589 4.16
1590 3.72
1591 3.21
1592 3.99
1593 4.14
1594 3.87
1595 2.86
1596 2.92
1597 2.15
1598 2.54
1599 3.11
1600 3.21
1601 2.75
1602 3.13
1603 3.29
1604 3.65
1605 3.29
1606 3.15
1607 3.28
1608 2.90
1609 2.64
1610 2.93
1611 3.18
1612 2.82
1613 2.68
1614 2.60
1615 2.63
1616 2.62
1617 2.74
1618 2.85
1619 3.07
1620 3.16
1621 3.37
1622 3.01
1623 2.70
1624 2.97
1625 3.06
1626 2.99
1627 3.37
1628 3.63
1629 3.35
1630 2.90
1631 2.56
1632 3.05
1633 3.17
1634 2.96
1635 3.07
1636 3.12
1637 3.01
1638 2.67
1639 3.14
1640 3.53
1641 3.32
1642 3.53
1643 3.59
1644 3.77
1645 3.52
1646 3.59
1647 3.09
1648 2.70
1649 2.56
1650 2.52
1651 3.04
1652 3.32
1653 3.75
1654 4.04
1655 4.16
1656 3.96
1657 3.61
1658 3.42
1659 3.16
1660 3.24
1661 3.41
1662 3.29
1663 3.34
1664 3.54
1665 3.54
1666 3.68
1667 3.86
1668 3.86
1669 4.03
1670 4.00
1671 4.03
1672 4.18
1673 4.21
1674 3.97
1675 3.68
1676 3.86
1677 4.19
1678 4.17
1679 3.95
1680 4.07
1681 4.23
1682 4.24
1683 4.34
1684 4.32
1685 4.22
1686 4.20
1687 4.80
1688 4.82
1689 4.89
1690 4.82
1691 4.75
1692 4.86
1693 4.66
1694 4.20
1695 4.22
1696 4.21
1697 4.19
1698 4.01
1699 3.91
1700 4.50
1701 5.20
1702 5.30
1703 5.64
1704 5.48
1705 6.09
1706 5.42
1707 6.30
1708 6.08
1709 5.29
1710 4.68
1711 4.23
1712 5.68
1713 5.93
1714 5.61
1715 5.57
1716 5.88
1717 6.14
1718 6.30
1719 6.06
1720 5.78
1721 5.92
1722 6.45
1723 6.70
1724 6.37
1725 6.19
1726 5.91
1727 6.30
1728 6.13
1729 5.86
1730 6.42
1731 6.96
1732 6.90
1733 7.26
1734 7.03
1735 6.97
1736 7.16
1737 6.70
1738 6.84
1739 7.00
1740 6.23
1741 5.77
1742 6.30
1743 6.63
1744 7.42
1745 7.34
1746 6.70
1747 6.93
1748 6.63
1749 6.39
1750 6.56
1751 6.93
1752 6.76
1753 7.04
1754 7.10
1755 7.00
1756 7.06
1757 6.00
1758 6.22
1759 6.65
1760 6.84
1761 7.19
1762 7.23
1763 6.86
1764 6.77
1765 6.56
1766 6.55
1767 6.48
1768 6.59
1769 7.38
1770 7.22
1771 6.79
1772 6.26
1773 6.20
1774 6.40
1775 6.62
1776 6.60
1777 7.06
1778 6.59
1779 7.02
1780 7.18
1781 6.94
1782 6.96
1783 6.33
1784 6.55
1785 6.96
1786 7.10
1787 7.29
1788 7.12
1789 7.44
1790 7.10
1791 7.35
1792 7.36
1793 7.03
1794 6.74
1795 6.30
1796 6.07
1797 6.44
1798 6.56
1799 6.18
1800 4.76
1801 4.50
1802 6.00
1803 6.81
1804 6.71
1805 5.88
1806 6.07
1807 6.18
1808 5.79
1809 5.72
1810 6.02
1811 6.05
1812 5.26
1813 5.13
1814 5.96
1815 6.52
1816 7.24
1817 6.59
1818 6.43
1819 6.49
1820 7.69
1821 8.96
1822 9.97
1823 9.75
1824 8.99
1825 7.67
1826 8.12
1827 8.68
1828 8.95
1829 9.06
1830 9.40
1831 8.56
1832 9.24
1833 9.86
1834 10.69
1835 10.53
1836 9.48
1837 9.27
1838 9.22
1839 8.59
1840 8.44
1841 8.66
1842 9.38
1843 10.57
1844 10.59
1845 10.11
1846 9.73
1847 9.17
1848 10.69
1849 11.21
1850 11.28
1851 11.46
1852 11.40
1853 10.29
1854 9.71
1855 9.84
1856 9.89
1857 9.67
1858 10.73
1859 10.58
1860 10.15
1861 10.29
1862 10.49
1863 10.59
1864 10.88
1865 11.36
1866 11.55
1867 11.77
1868 12.08
1869 12.50
1870 12.83
1871 12.69
1872 12.15
1873 12.15
1874 12.91
1875 13.41
1876 13.55
1877 13.59
1878 14.40
1879 14.85
1880 14.32
1881 14.63
1882 14.80
1883 14.82
1884 15.62
1885 16.69
1886 17.10
1887 17.33
1888 17.37
1889 17.20
1890 17.24
1891 17.27
1892 17.12
1893 17.35
1894 18.32
1895 19.01
1896 19.22
1897 18.97
1898 18.52
1899 19.15
1900 18.17
1901 18.45
1902 18.52
1903 18.39
1904 18.27
1905 18.35
1906 18.23
1907 17.90
1908 18.36
1909 18.25
1910 17.94
1911 17.83
1912 17.36
1913 16.19
1914 17.56
1915 14.95
1916 13.41
1917 11.99
1918 12.33
1919 16.16
1920 19.87
1921 18.77
1922 18.50
1923 19.36
1924 21.12
1925 21.09
1926 21.51
1927 22.17
1928 22.31
1929 22.64
1930 22.82
1931 23.70
1932 24.29
1933 24.22
1934 24.11
1935 25.20
1936 25.23
1937 24.74
1938 25.11
1939 24.95
1940 23.99
1941 22.84
1942 21.77
1943 21.78
1944 22.62
1945 22.69
1946 25.73
1947 26.66
1948 24.91
1949 24.60
1950 24.27
1951 24.17
1952 23.76
1953 24.17
1954 25.18
1955 25.74
1956 26.19
1957 26.68
1958 27.05
1959 27.59
1960 27.78
1961 27.51
1962 28.08
1963 28.57
1964 28.87
1965 28.32
1966 28.35
1967 28.92
1968 29.51
1969 28.64
1970 29.83
1971 30.20
1972 31.99
1973 37.36
1974 37.53
1975 40.09
1976 39.52
1977 37.01
1978 36.98
1979 36.10
1980 35.65
1981 35.96
1982 36.21
1983 37.24
1984 37.58
1985 38.30
1986 39.97
1987 41.42
1988 43.76
1989 45.40
1990 46.19
1991 46.86
1992 49.42
1993 49.51
1994 49.99
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment