Skip to content

Instantly share code, notes, and snippets.

@MNoichl

MNoichl/.block

Last active April 5, 2018 16:41
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 MNoichl/be58935c5427de960f8178b84c3705b0 to your computer and use it in GitHub Desktop.
Save MNoichl/be58935c5427de960f8178b84c3705b0 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot scientific output
Raw
.block
license: mit
Raw
README.md
Raw
data.csv
year value
1650 5.48724521490226
1650 4.30814866403411
1652 4.21457982007327
1654 4.65107298662731
1655 4.30980447249746
1660 4.70410289473321
1661 4.45705109569582
1662 4.91327122781371
1663 4.04992669617943
1664 5.59546588333724
1665 5.01159890683252
1670 4.7640949949592
1667 5.15264964855907
1671 4.40405285634823
1672 5.24103906074021
1673 4.51883875090216
1674 5.02210873752488
1675 4.36165487535224
1676 4.75549976325431
1677 4.60071393765543
1678 4.84830864951315
1681 4.59504726485943
1682 4.74271016351542
1683 5.06541226695106
1685 5.34591988341998
1686 4.3939455622825
1687 4.55098254058005
1689 4.7314257836742
1690 5.05025577728436
1691 4.61644529795479
1692 4.34285584256182
1693 4.20603536015225
1694 5.09226457594939
1698 5.16428391094684
1699 4.82941960530126
1700 5.06853208478713
1701 4.28068205743496
1702 4.05085462895284
1703 4.21868225970312
1703 4.76354286476074
1705 4.59388989256802
1705 4.17728912394901
1707 4.6386588333724
1708 4.68451748470347
1710 4.79606057471739
1712 4.06835384363138
1713 4.87798917865335
1714 4.58251203265711
1716 4.20491932258553
1717 4.53860310849388
1719 4.36615908850611
1721 4.5001160283727
1722 4.986969134185
1722 4.84468356525216
1724 5.15646630626157
1725 4.6968705897496
1725 5.00162706348002
1726 4.86090903449131
1727 4.59825674725214
1729 5.05775135266832
1730 4.48326290723706
1730 4.74582171440654
1732 4.94975134807132
1733 5.47021022097796
1734 5.09451010336725
1737 4.75533264378278
1739 5.07365631881139
1740 5.16877629601025
1741 5.27751918099782
1743 6.11684429488859
1744 5.14408608186831
1746 4.57388897316728
1748 5.08417461565218
1748 5.45068814846482
1749 4.73505548123732
1750 5.32476159172784
1751 5.06602147720115
1755 5.30264242666629
1756 5.82075285129152
1759 5.45016602078765
1760 5.82431196186325
1761 5.53212264346099
1762 6.12293003820109
1763 5.58126645152689
1764 5.35144474631434
1765 4.98094698275663
1766 5.33822094119052
1767 5.52479495065116
1768 6.17186780856237
1770 5.31835280164388
1771 6.10607691706545
1772 5.2471108138382
1773 5.67926599642352
1774 6.36853461313915
1775 6.06368656709556
1776 5.83776240846215
1777 5.58058538244771
1779 5.37163436017857
1780 5.57387618430306
1781 5.12085039970946
1782 5.82654480009929
1783 5.73348316500637
1784 6.25316112957573
1785 6.15135866282356
1787 5.77158742198501
1788 6.01335537136893
1789 5.58657344862618
1790 6.13251842249221
1791 5.73090667622843
1793 6.22540200030952
1795 5.64266282587009
1796 5.80944367061549
1797 6.52216624604082
1798 5.96800240270058
1799 6.1211405625813
1800 6.39463653790458
1801 6.17966290172065
1802 6.28511795911424
1804 6.28296791751136
1807 5.94727144846988
1809 6.15348466669424
1810 6.3864957592641
1811 6.50743073464715
1813 6.30649373505015
1814 5.98911999558687
1815 6.20243388359466
1816 7.26216210873752
1817 6.8916567141537
1819 6.60024261261509
1821 6.81644150542675
1822 6.67805475491074
1823 6.95701263716309
1824 7.37055778203766
1828 6.93855897896121
1828 7.0815174065544
1831 7.31771216321201
1832 7.11133106241351
1833 6.99483200250076
1835 7.32407414966924
1837 7.65504548735133
1839 7.32250846393057
1842 7.47265713586831
1844 7.6124748543899
1846 7.82248851438631
1849 7.60337137540237
1853 7.78557037323072
1855 8.05512301581828
1856 7.72682101106498
1857 7.89089188766761
1858 8.13703826545856
1859 7.972854831221
1860 8.28464329549998
1861 7.77034266065377
1862 8.07665459187034
1863 7.95624781067699
1865 8.23149913397558
1867 8.44843373189354
1868 8.32528709437188
1869 8.14962602455718
1870 8.28416254085586
1871 8.56312042310821
1872 8.30594784852565
1872 8.57945272671272
1874 8.28396222642081
1879 8.61129381902208
1884 8.9657696073699
1885 8.82501151549419
1887 9.02189389655821
1890 9.2374408135777
1889 9.0874234254113
1894 9.4482698487126
1897 9.35375815968151
1900 9.51536956159343
1904 9.71040280223127
1906 9.85801970275773
1908 10.0747304014612
1909 9.94931348347146
1911 9.91107465016801
1913 9.60597962914438
1915 9.67700458159018
1920 10.1257216368951
1918 9.87383118883111
1926 10.4858368586605
1927 10.2344612725425
1929 10.680767175555
1932 10.8414729604244
1935 11.0437476153043
1936 11.2023432306822
1939 11.0815575540804
1942 11.0297523134421
1945 11.3048896531059
1946 11.694235357394
1948 11.9047903115083
1950 12.0715285496913
1952 12.2822025043024
1955 12.5487645970538
1958 12.9002697130159
1962 13.203444373957
1963 13.4824022562094
1963 13.285453103667
1964 13.591747229156
1966 13.816640245388
1969 14.1175001264176
1970 14.3081250660819
1971 14.4339034537288
1972 14.5651609181136
1973 14.7347057841032
1974 14.860493074614
1975 14.9917448157291
1982 15.4854483328023
1752 5.84250665416281
1755 5.19832852946449
1754 5.06276289114754
1757 5.43547875494752
1743 4.99549033939677
1745 5.06317662147811
1736 5.06361793383072
1735 4.99587648770531
1733 4.82646770834769
1715 4.25110672863427
1718 4.2170429314173
1708 4.18364110272924
1696 4.42150846078525
1696 4.42150846078525
1666 4.79582408186344
1668 4.79574133579732
1669 4.82959826784901
1657 4.25389251286012
1658 4.35553226407028
1650 4.45761332763305
1651 5.27114506764491
1805 6.3823144074692
1803 6.17900732302684
1825 6.82202700279957
1826 6.85587014384024
1830 6.99127029002495
1829 6.92352884389954
1840 7.26198783632827
1838 7.26209816441642
1839 7.39763622071133
1847 7.53284329274178
1848 7.60058473886719
1851 7.60041924673497
1852 7.66816069286038
1875 8.44674601095005
1876 8.51448745707546
1878 8.5483030160941
1880 8.68375832632289
1882 8.75147219042627
1883 8.78531533146694
1888 9.19187433630758
1889 9.259615782433
1893 9.22552440319399
1892 9.29337617740755
1899 9.56423163382106
1901 9.46239880845664
1903 9.66573347492103
1909 10.1060804567583
1907 10.038421756699
1923 10.2410392905904
1922 10.1732702624429
1919 10.0378425342362
1924 10.4443739570548
1925 10.410420487926
1928 10.5458482161327
1931 10.8508226338073
1932 10.749072554509
1933 10.9184813338666
1940 11.0198452648564
1944 11.0874763828936
1961 13.0527506171477
1960 12.9850091710223
1957 12.8156279736867
1957 12.7139606404545
1954 12.3751154997173
1952 12.1718359972969
1984 15.5939926356001
1986 15.6617064997035
1987 15.7633462509136
1980 15.3907958792459
1978 15.2891837100578
1976 15.1537008178069
1978 15.2214146819103
1949 12.5278785287749
Raw
index.html
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i" rel="stylesheet">
<head>
<style>
text {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 300i;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var parseDate = d3.timeParse("%Y");
var data = d3.csv('data.csv', function(error, data){
data.forEach(function(d){
d.x = parseDate(+d.year);
d.y =+d.value; });
var color = d3.scaleOrdinal()
.domain([0])
.range(["00a6ca"]);//,"#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]);//["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]
var margin = { top: 30, right: 100, bottom: 30, left: 30 };
width = 480 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var x = d3.scaleTime()
.range([0, width])
.nice();
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(x).ticks(6),
yAxis = d3.axisLeft(y).ticks(12 * height / width);
var brush = d3.brush().extent([[0, 0], [width, height]]).on("end", brushended),
idleTimeout,
idleDelay = 350;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
var xExtent = d3.extent(data, function (d) { return d.x; });
var yExtent = d3.extent(data, function (d) { return d.y; });
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
var scatter = svg.append("g")
.attr("id", "scatterplot")
.attr("clip-path", "url(#clip)");
scatter.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 2)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.attr("opacity", .6)
.style("fill", function(d) { return color(d.cluster); });
// x axis
svg.append("g")
.attr("class", "x axis")
.attr('id', "axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.style("text-anchor", "end")
.attr("x", width)
.attr("y", height - 8)
.text("Year");
// y axis
svg.append("g")
.attr("class", "y axis")
.attr('id', "axis--y")
.call(yAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "1em")
.style("text-anchor", "end")
.text("log(Total number of references)");
scatter.append("g")
.attr("class", "brush")
.call(brush);
function brushended() {
var s = d3.event.selection;
if (!s) {
if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
} else {
x.domain([s[0][0], s[1][0]].map(x.invert, x));
y.domain([s[1][1], s[0][1]].map(y.invert, y));
scatter.select(".brush").call(brush.move, null);
}
zoom();
}
function idled() {
idleTimeout = null;
}
function zoom() {
var t = scatter.transition().duration(750);
svg.select("#axis--x").transition(t).call(xAxis);
svg.select("#axis--y").transition(t).call(yAxis);
scatter.selectAll("circle").transition(t)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); });
}
var legend = svg.selectAll(".legend")
.data([0])
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate("+(width+70)+"," + i * 30 + ")"; });
var clicked = null
legend.append("circle")
.attr("r", 7)
.style("fill", function(d) { return color(d); })
.attr("transform", function(d, i) { return "translate(-68,1)"; })
.on("click", function(d) {
d3.selectAll(".dot").style("opacity", .7)
if(clicked !== d) {
d3.selectAll(".dot")
.filter(function(e) {
return e.cluster !== d
})
.style("opacity", 0.1)
clicked = d;
} else {
clicked = null;
}
})
legend.append("text")
.attr("dy", ".35em")
.attr("transform", function(d, i) { return "translate(20,0)"; })
.style("text-anchor", "end")
.text("Data-Points")
.on("click", function(d) {
d3.selectAll(".dot").style("opacity", .7)
if(clicked !== d) {
d3.selectAll(".dot")
.filter(function(e) {
return e.cluster !== d
})
.style("opacity", 0.1)
clicked = d;
} else {
clicked = null;
}
});
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment