Skip to content

Instantly share code, notes, and snippets.

@fbreitwieser
Created November 29, 2018 19:58
Show Gist options
  • Save fbreitwieser/2f16feeea70219877388c411dc67b3af to your computer and use it in GitHub Desktop.
Save fbreitwieser/2f16feeea70219877388c411dc67b3af to your computer and use it in GitHub Desktop.
test-line-d3
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.line {
fill: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var x = d3.scaleLinear().range([0, width]),
x2 = d3.scaleLinear().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", brush);
var line = d3.line()
.defined(function(d) { return !isNaN(d.percent_covered); })
// .interpolate("cubic")
.x(function(d) { return x(d.position); })
.y(function(d) { return y(d.percent_covered); });
var line2 = d3.line()
.defined(function(d) { return !isNaN(d.percent_covered); })
// .interpolate("cubic")
.x(function(d) {return x2(d.position); })
.y(function(d) {return y2(d.percent_covered); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("mydat.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "position"; }));
var sources = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {position: d.position, percent_covered: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.position; }));
y.domain([d3.min(sources, function(c) { return d3.min(c.values, function(v) { return v.percent_covered; }); }),
d3.max(sources, function(c) { return d3.max(c.values, function(v) { return v.percent_covered; }); }) ]);
x2.domain(x.domain());
y2.domain(y.domain());
var focuslineGroups = focus.selectAll("g")
.data(sources)
.enter().append("g");
var focuslines = focuslineGroups.append("path")
.attr("class","line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) {return color(d.name);})
.attr("clip-path", "url(#clip)");
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
var contextlineGroups = context.selectAll("g")
.data(sources)
.enter().append("g");
var contextLines = contextlineGroups.append("path")
.attr("class", "line")
.attr("d", function(d) { return line2(d.values); })
.style("stroke", function(d) {return color(d.name);})
.attr("clip-path", "url(#clip)");
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
});
function brush() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.selectAll("path.line").attr("d", function(d) {return line(d.values)});
focus.select(".x.axis").call(xAxis);
focus.select(".y.axis").call(yAxis);
}
</script>
position percent_covered
0 29.2714
2388 5.69514
4776 10.0921
7164 12.6047
9552 6.36516
11940 14.6985
14328 7.07705
16716 28.9782
19104 28.727
21492 15.5779
23880 21.7755
26268 20.938
28656 18.4255
31044 0
33432 19.263
35820 20.8543
38208 6.28141
40596 19.8911
42984 9.54774
45372 24.33
47760 31.7839
50148 5.82077
52536 7.20268
54924 19.1792
57312 5.44389
59700 18.593
62088 12.9816
64476 11.0553
66864 22.2362
69252 18.8861
71640 23.5343
74028 4.52261
76416 16.9598
78804 12.5209
81192 17.9648
83580 10.0503
85968 15.5779
88356 18.3417
90744 26.1725
93132 5.10888
95520 17.0017
97908 6.36516
100296 10.7621
102684 9.63149
105072 13.6516
107460 19.2211
109848 6.36516
112236 17.6717
114624 16.3735
117012 15.7454
119400 21.3149
121788 8.96147
124176 12.3953
126564 26.6332
128952 6.36516
131340 5.52764
133728 7.70519
136116 6.32328
138504 10.6784
140892 35.5528
143280 15.201
145668 0
148056 6.36516
150444 5.77889
152832 14.7404
155220 16.0804
157608 6.36516
159996 21.3568
162384 0
164772 6.15578
167160 18.258
169548 22.3199
171936 0
174324 16.6667
176712 15.9548
179100 12.1859
181488 15.9548
183876 5.48576
186264 10.8459
188652 0
191040 6.36516
193428 9.67337
195816 13.0653
198204 0
200592 9.33836
202980 17.6298
205368 0
207756 11.4322
210144 24.3719
212532 19.8492
214920 15.0754
217308 15.0754
219696 0
222084 17.2111
224472 7.53769
226860 8.58459
229248 19.0536
231636 35.8878
234024 10.3853
236412 12.6047
238800 14.6147
241188 2.05193
243576 6.28141
245964 18.0905
248352 0
250740 6.36516
253128 15.4523
255516 6.36516
257904 12.4372
260292 13.9028
262680 24.6231
265068 12.3116
267456 12.3953
269844 10.134
272232 33.9196
274620 0
277008 0
279396 0
281784 5.27638
284172 10.6784
286560 18.4673
288948 12.0603
291336 0
293724 11.8928
296112 16.4573
298500 14.1541
300888 6.36516
303276 11.1809
305664 5.48576
308052 25.1675
310440 8.62647
312828 18.8861
315216 23.2412
317604 6.36516
319992 0
322380 10.5109
324768 13.3585
327156 13.6097
329544 4.39698
331932 18.5092
334320 32.1608
336708 16.1642
339096 16.9598
341484 16.9179
343872 14.2797
346260 7.66332
348648 12.6047
351036 13.1072
353424 27.9732
355812 8.62647
358200 25.0838
360588 11.0972
362976 7.99832
365364 19.3049
367752 2.42881
370140 3.89447
372528 22.2362
374916 24.1625
377304 12.5628
379692 23.7018
382080 24.2044
384468 34.1709
386856 21.7337
389244 0.837521
391632 22.5293
394020 17.1692
396408 10.0084
398796 15.0335
401184 13.3166
403572 3.97822
405960 5.02513
408348 6.36516
410736 6.23953
413124 10.3015
415512 15.6616
417900 16.7504
420288 10.4271
422676 25.4188
425064 3.93635
427452 17.4204
429840 24.0787
432228 4.94137
434616 6.32328
437004 12.6466
439392 16.9598
441780 16.6667
444168 9.42211
446556 6.32328
448944 24.2881
451332 22.5293
453720 23.1156
456108 12.4791
458496 6.15578
460884 20.5611
463272 29.3132
465660 6.36516
468048 0
470436 18.928
472824 8.58459
475212 0
477600 21.8593
479988 10.1759
482376 0
484764 12.0603
487152 12.8141
489540 23.8693
491928 8.37521
494316 6.36516
496704 12.3953
499092 24.3719
501480 12.6466
503868 22.8643
506256 29.1457
508644 19.3467
511032 14.3216
513420 21.3568
515808 12.9816
518196 27.2194
520584 30.6951
522972 21.6499
525360 13.191
527748 22.8643
530136 10.7621
532524 30.8208
534912 6.49079
537300 17.2529
539688 10.2178
542076 0.20938
544464 8.12395
546852 10.3853
549240 18.0905
551628 18.7186
554016 12.2697
556404 5.48576
558792 11.8509
561180 0
563568 6.36516
565956 12.6047
568344 23.325
570732 38.5678
573120 12.3534
575508 11.7253
577896 5.69514
580284 15.4523
582672 0
585060 18.0067
587448 16.0385
589836 6.8258
592224 20.0168
594612 28.4757
597000 12.1441
599388 12.6884
601776 14.7822
604164 9.92462
606552 12.5209
608940 9.38023
611328 19.0117
613716 6.32328
616104 14.6985
618492 16.876
620880 22.9062
623268 10.5946
625656 4.69012
628044 10.5109
630432 2.0938
632820 18.928
635208 4.48074
637596 5.65327
639984 28.6013
642372 30.402
644760 15.4523
647148 11.7253
649536 4.69012
651924 6.32328
654312 6.36516
656700 6.32328
659088 6.65829
661476 16.6248
663864 12.2697
666252 6.19765
668640 8.71022
671028 12.5628
673416 14.6566
675804 11.2647
678192 5.9464
680580 0
682968 26.5913
685356 5.69514
687744 17.6717
690132 20.1843
692520 18.2161
694908 22.6968
697296 6.36516
699684 19.2211
702072 17.4204
704460 25.9213
706848 0.293132
709236 26.5494
711624 24.0787
714012 19.3049
716400 6.28141
718788 4.64824
721176 12.8978
723564 6.36516
725952 12.8559
728340 19.8911
730728 16.1642
733116 15.2848
735504 17.0854
737892 9.75712
740280 17.4623
742668 17.6298
745056 18.8861
747444 0
749832 10.2178
752220 6.32328
754608 14.6985
756996 14.2797
759384 17.5042
761772 10.0084
764160 8.12395
766548 8.37521
768936 10.0084
771324 7.78894
773712 23.1993
776100 15.1173
778488 0
780876 19.0117
783264 9.46399
785652 3.18258
788040 11.7672
790428 11.809
792816 11.3065
795204 17.2948
797592 6.19765
799980 6.32328
802368 12.6884
804756 0
807144 14.4054
809532 9.88275
811920 8.66834
814308 25.4606
816696 0
819084 15.201
821472 0
823860 11.3903
826248 15.9129
828636 15.0335
831024 5.10888
833412 18.9698
835800 30.6114
838188 16.4573
840576 0
842964 0
845352 19.3467
847740 13.5678
850128 0
852516 21.6918
854904 22.9481
857292 21.0637
859680 0
862068 17.2111
864456 4.64824
866844 10.134
869232 25.1256
871620 5.27638
874008 12.6466
876396 13.4841
878784 13.6935
881172 11.0972
883560 17.2111
885948 15.4941
888336 17.5461
890724 3.8526
893112 8.75209
895500 11.0134
897888 18.593
900276 24.9581
902664 2.59631
905052 15.9548
907440 6.32328
909828 11.2228
912216 10.8878
914604 21.9849
916992 24.5812
919380 12.2278
921768 17.1692
924156 17.0854
926544 10.0921
928932 22.1524
931320 14.7822
933708 36.0553
936096 20.268
938484 15.1173
940872 18.7186
943260 10.5946
945648 6.36516
948036 12.6047
950424 12.6047
952812 11.1809
955200 19.6399
957588 21.0637
959976 15.7873
962364 17.9229
964752 0
967140 6.36516
969528 10.0503
971916 5.73702
974304 12.1859
976692 22.6968
979080 7.37018
981468 17.6717
983856 14.7404
986244 15.0754
988632 12.6466
991020 11.0972
993408 17.2529
995796 7.8727
998184 0
1000572 23.1993
1002960 12.7303
1005348 11.8509
1007736 10.2596
1010124 12.2697
1012512 15.1173
1014900 21.8174
1017288 16.4992
1019676 19.2211
1022064 15.7454
1024452 6.32328
1026840 11.2647
1029228 18.2998
1031616 6.32328
1034004 16.0385
1036392 0
1038780 10.0921
1041168 8.83585
1043556 6.32328
1045944 0
1048332 0
1050720 0
1053108 0
1055496 9.9665
1057884 15.9129
1060272 6.15578
1062660 17.5879
1065048 27.6801
1067436 0
1069824 29.1039
1072212 5.77889
1074600 8.75209
1076988 7.11893
1079376 8.75209
1081764 0
1084152 0
1086540 4.31323
1088928 28.6432
1091316 9.84087
1093704 8.33333
1096092 11.809
1098480 26.9263
1100868 5.86265
1103256 0
1105644 8.9196
1108032 23.9531
1110420 6.28141
1112808 22.1524
1115196 25.0419
1117584 9.46399
1119972 6.28141
1122360 16.2479
1124748 30.6951
1127136 21.3568
1129524 0
1131912 12.4372
1134300 23.66
1136688 14.1541
1139076 10.9715
1141464 0
1143852 6.28141
1146240 12.5628
1148628 21.0218
1151016 15.1591
1153404 10.5528
1155792 17.0854
1158180 12.3116
1160568 21.5243
1162956 4.48074
1165344 14.9497
1167732 0
1170120 0
1172508 11.7672
1174896 23.5343
1177284 11.2228
1179672 10.7203
1182060 6.28141
1184448 13.6935
1186836 30.4439
1189224 18.258
1191612 27.1357
1194000 6.19765
1196388 19.933
1198776 9.50586
1201164 14.6566
1203552 15.7454
1205940 23.0318
1208328 10.4271
1210716 14.4891
1213104 8.79397
1215492 0
1217880 0
1220268 0
1222656 0
1225044 26.4238
1227432 23.5343
1229820 27.0101
1232208 12.5628
1234596 13.4422
1236984 16.5829
1239372 0
1241760 0
1244148 16.3317
1246536 24.1206
1248924 4.85762
1251312 9.71524
1253700 19.8074
1256088 17.5879
1258476 1.00503
1260864 16.1223
1263252 12.4372
1265640 0
1268028 6.15578
1270416 5.40201
1272804 7.28643
1275192 0
1277580 15.7873
1279968 15.7035
1282356 9.67337
1284744 6.28141
1287132 6.23953
1289520 16.876
1291908 22.3618
1294296 24.2462
1296684 0
1299072 12.5628
1301460 0
1303848 4.60637
1306236 22.2781
1308624 6.15578
1311012 12.3116
1313400 0
1315788 0
1318176 0
1320564 4.73199
1322952 1.38191
1325340 18.8861
1327728 23.1156
1330116 11.139
1332504 8.37521
1334892 12.6466
1337280 10.804
1339668 9.54774
1342056 23.1156
1344444 15.8291
1346832 6.74204
1349220 18.8861
1351608 16.6667
1353996 4.27136
1356384 2.01005
1358772 12.6047
1361160 13.7772
1363548 7.99832
1365936 7.37018
1368324 17.5879
1370712 22.4037
1373100 15.536
1375488 12.5209
1377876 3.8526
1380264 9.92462
1382652 11.5159
1385040 14.9916
1387428 12.5628
1389816 0
1392204 0
1394592 14.5729
1396980 3.18258
1399368 12.4791
1401756 12.3116
1404144 10.9715
1406532 16.876
1408920 17.6298
1411308 6.19765
1413696 4.27136
1416084 0
1418472 6.36516
1420860 4.22948
1423248 17.2948
1425636 19.0117
1428024 15.9966
1430412 15.201
1432800 6.32328
1435188 11.9765
1437576 21.0218
1439964 17.7973
1442352 9.50586
1444740 28.057
1447128 8.24958
1449516 17.1273
1451904 13.861
1454292 15.4104
1456680 11.0553
1459068 23.1156
1461456 16.7085
1463844 10.4271
1466232 15.9548
1468620 5.86265
1471008 22.0687
1473396 18.0486
1475784 11.474
1478172 18.7605
1480560 18.3417
1482948 4.43886
1485336 15.2848
1487724 20.938
1490112 12.7722
1492500 0
1494888 0
1497276 4.69012
1499664 6.32328
1502052 13.1072
1504440 0
1506828 0
1509216 0
1511604 0
1513992 0
1516380 0
1518768 4.48074
1521156 0
1523544 0
1525932 0
1528320 0
1530708 12.3953
1533096 12.6466
1535484 20.8543
1537872 16.7504
1540260 10.6784
1542648 18.593
1545036 22.1524
1547424 5.73702
1549812 9.92462
1552200 17.7136
1554588 3.68509
1556976 22.1943
1559364 29.1039
1561752 15.6616
1564140 22.0268
1566528 5.31826
1568916 21.1055
1571304 12.6047
1573692 0
1576080 23.66
1578468 0
1580856 12.6466
1583244 16.0385
1585632 12.6884
1588020 9.84087
1590408 14.6566
1592796 12.9397
1595184 18.8442
1597572 9.04523
1599960 8.54271
1602348 10.804
1604736 15.6616
1607124 0
1609512 2.47069
1611900 15.4941
1614288 14.1122
1616676 16.8342
1619064 18.2161
1621452 6.15578
1623840 8.79397
1626228 4.77387
1628616 17.9648
1631004 10.3853
1633392 14.531
1635780 29.732
1638168 10.3015
1640556 18.3417
1642944 16.3735
1645332 8.41709
1647720 6.32328
1650108 0
1652496 0
1654884 0
1657272 3.1407
1659660 0
1662048 10.9715
1664436 0
1666824 0
1669212 6.32328
1671600 7.07705
1673988 9.25461
1676376 9.50586
1678764 0
1681152 6.32328
1683540 16.7923
1685928 12.2697
1688316 19.8492
1690704 0
1693092 13.9866
1695480 8.66834
1697868 10.9296
1700256 8.54271
1702644 18.2998
1705032 0
1707420 18.6348
1709808 18.928
1712196 12.6884
1714584 3.26633
1716972 13.9447
1719360 18.9698
1721748 10.0921
1724136 13.191
1726524 13.4841
1728912 12.6884
1731300 12.1441
1733688 11.2228
1736076 19.3049
1738464 6.19765
1740852 14.9916
1743240 20.4774
1745628 3.18258
1748016 11.2228
1750404 17.8392
1752792 5.44389
1755180 3.89447
1757568 14.3635
1759956 17.6298
1762344 6.32328
1764732 16.0385
1767120 22.7806
1769508 10.804
1771896 2.51256
1774284 0
1776672 17.9648
1779060 10.469
1781448 5.82077
1783836 12.0184
1786224 19.5561
1788612 7.91457
1791000 4.52261
1793388 12.0603
1795776 22.6968
1798164 11.3065
1800552 6.28141
1802940 9.58961
1805328 12.6047
1807716 24.4975
1810104 13.1072
1812492 5.48576
1814880 6.36516
1817268 4.98325
1819656 10.7621
1822044 12.6884
1824432 17.9229
1826820 5.56951
1829208 3.35008
1831596 11.3484
1833984 12.5209
1836372 22.4456
1838760 3.1407
1841148 9.84087
1843536 5.56951
1845924 15.536
1848312 7.49581
1850700 12.6466
1853088 12.1441
1855476 11.139
1857864 9.67337
1860252 16.6248
1862640 12.0603
1865028 5.02513
1867416 6.36516
1869804 0
1872192 10.7621
1874580 12.3116
1876968 11.139
1879356 16.2479
1881744 25.67
1884132 18.2998
1886520 5.27638
1888908 12.7303
1891296 32.3702
1893684 0
1896072 34.7571
1898460 6.36516
1900848 18.7605
1903236 31.742
1905624 10.7203
1908012 16.7085
1910400 6.32328
1912788 23.0318
1915176 11.4322
1917564 9.54774
1919952 11.5997
1922340 0
1924728 10.8459
1927116 32.2446
1929504 11.2647
1931892 26.5075
1934280 15.9966
1936668 23.7856
1939056 16.7504
1941444 8.20771
1943832 0
1946220 15.2429
1948608 13.3585
1950996 12.6466
1953384 11.5997
1955772 8.16583
1958160 24.1625
1960548 11.3065
1962936 15.8291
1965324 12.6884
1967712 16.6248
1970100 28.8107
1972488 12.7303
1974876 15.0335
1977264 12.6047
1979652 11.2647
1982040 6.28141
1984428 12.2697
1986816 19.0536
1989204 6.32328
1991592 10.7621
1993980 20.1005
1996368 10.3853
1998756 22.0687
2001144 13.2328
2003532 25.4188
2005920 6.32328
2008308 0
2010696 14.6147
2013084 12.6884
2015472 24.8744
2017860 0
2020248 10.5946
2022636 18.9698
2025024 10.469
2027412 6.36516
2029800 0
2032188 12.3534
2034576 29.8995
2036964 27.4288
2039352 3.72697
2041740 13.6516
2044128 17.6717
2046516 9.42211
2048904 24.4137
2051292 6.19765
2053680 9.63149
2056068 18.7186
2058456 12.6047
2060844 6.36516
2063232 17.2529
2065620 3.18258
2068008 19.3886
2070396 0
2072784 15.871
2075172 6.03015
2077560 5.19263
2079948 10.5528
2082336 0
2084724 18.4673
2087112 12.5628
2089500 6.32328
2091888 19.0117
2094276 3.8526
2096664 15.871
2099052 4.43886
2101440 23.325
2103828 32.2446
2106216 9.54774
2108604 7.8727
2110992 25.2094
2113380 8.45896
2115768 6.32328
2118156 18.9698
2120544 6.32328
2122932 0
2125320 27.0101
2127708 4.48074
2130096 18.928
2132484 5.73702
2134872 9.50586
2137260 13.2328
2139648 15.9548
2142036 6.36516
2144424 0
2146812 5.56951
2149200 8.45896
2151588 17.8811
2153976 11.5997
2156364 12.2697
2158752 18.6767
2161140 23.9112
2163528 24.0787
2165916 9.42211
2168304 12.4791
2170692 17.8392
2173080 20.2261
2175468 9.04523
2177856 22.4874
2180244 9.63149
2182632 19.6399
2185020 6.32328
2187408 0
2189796 21.0637
2192184 12.4791
2194572 4.31323
2196960 6.07203
2199348 9.04523
2201736 29.6482
2204124 12.6884
2206512 21.0218
2208900 15.201
2211288 6.36516
2213676 11.0972
2216064 6.32328
2218452 15.2429
2220840 18.7186
2223228 15.3685
2225616 0
2228004 17.0854
2230392 0
2232780 2.9732
2235168 4.73199
2237556 3.18258
2239944 19.0536
2242332 16.0804
2244720 10.5946
2247108 6.23953
2249496 22.2362
2251884 10.7621
2254272 6.28141
2256660 12.4372
2259048 11.8928
2261436 13.8191
2263824 10.134
2266212 15.7454
2268600 0
2270988 4.8995
2273376 0
2275764 6.1139
2278152 10.6784
2280540 6.32328
2282928 26.9682
2285316 15.4523
2287704 14.4472
2290092 0
2292480 0
2294868 5.19263
2297256 12.7303
2299644 16.3317
2302032 9.42211
2304420 6.32328
2306808 7.49581
2309196 12.1441
2311584 8.79397
2313972 11.7253
2316360 0
2318748 30.5695
2321136 17.5461
2323524 23.9112
2325912 6.28141
2328300 12.6047
2330688 0
2333076 4.73199
2335464 0
2337852 12.6466
2340240 17.4623
2342628 12.6466
2345016 30.1508
2347404 0
2349792 12.1441
2352180 17.5042
2354568 17.5461
2356956 10.8459
2359344 18.258
2361732 23.3668
2364120 0
2366508 23.6181
2368896 4.14573
2371284 15.5779
2373672 6.03015
2376060 22.6131
2378448 12.2697
2380836 6.32328
2383224 0
2385612 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment