Skip to content

Instantly share code, notes, and snippets.

@Thanaporn-sk

Thanaporn-sk/.block

Created March 10, 2017 03:06
Show Gist options
  • Save Thanaporn-sk/17c3fc4ce26eaa6b2ca5b3a37bdbc78a to your computer and use it in GitHub Desktop.
Save Thanaporn-sk/17c3fc4ce26eaa6b2ca5b3a37bdbc78a to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Series Line Chart (Planet Coverage)
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
data.csv
date RGB VNIR Total
9/29/14 169185.8503 14896.1072 184081.9575
10/6/14 257496.7445 49756.8975 307253.642
10/13/14 323953.6424 71204.14166 395157.7841
10/20/14 417736.813 186664.246 604401.059
10/27/14 517844.2494 161167.0931 679011.3424
11/3/14 510368.2633 0 510368.2633
11/10/14 333370.7406 3947.605793 337318.3464
11/17/14 250815.2354 7415.423321 258230.6588
11/24/14 223580.8098 26350.83234 249931.6421
12/1/14 296115.8931 120034.8641 416150.7571
12/8/14 220088.2944 70795.96538 290884.2597
12/15/14 135068.5542 80777.59014 215846.1444
12/22/14 68310.00906 105090.4148 173400.4238
12/29/14 339376.8754 137843.2877 477220.1631
1/5/15 300386.9849 91302.691 391689.6759
1/12/15 275390.5691 94644.219 370034.7881
1/19/15 268940.3904 19739.30975 288679.7002
1/26/15 355402.6832 115795.9626 471198.6459
2/2/15 355521.7416 117839.5013 473361.2429
2/9/15 224381.2454 54001.82403 278383.0694
2/16/15 200799.9666 198723.1125 399523.0791
2/23/15 228480.2132 159111.9785 387592.1917
3/2/15 286580.3698 22158.62689 308738.9967
3/9/15 234032.0982 5998.623705 240030.7219
3/16/15 114394.2145 22228.86411 136623.0786
3/23/15 206659.0382 243039.0434 449698.0816
3/30/15 432097.7664 259420.373 691518.1394
4/6/15 469535.8709 609191.3894 1078727.26
4/13/15 370315.0651 284339.2803 654654.3454
4/20/15 303345.3721 419115.8851 722461.2572
4/27/15 373358.4014 542409.1009 915767.5023
5/4/15 373959.0741 540127.0434 914086.1175
5/11/15 285284.9713 271574.2305 556859.2018
5/18/15 468880.3652 501093.985 969974.3502
5/25/15 494290.1705 713010.9294 1207301.1
6/1/15 536654.0883 417067.0495 953721.1378
6/8/15 557655.2005 350586.2784 908241.4789
6/15/15 304015.0748 72520.799 376535.8738
6/22/15 259212.3108 16242.41904 275454.7298
6/29/15 243507.4146 24054.52584 267561.9405
7/6/15 47453.33287 10.05338074 47463.38625
7/13/15 132088.9785 0 132088.9785
7/20/15 588916.2711 310156.0613 899072.3324
7/27/15 552731.1687 585125.0804 1137856.249
8/3/15 1010807.835 198629.5234 1209437.358
8/10/15 1017159.924 10785.81533 1027945.739
8/17/15 1520278.649 14418.45023 1534697.1
8/24/15 1952134.015 115916.9784 2068050.993
8/31/15 1955201.481 247566.604 2202768.085
9/7/15 1816685.819 149889.7966 1966575.615
9/14/15 1877060.933 303161.1945 2180222.127
9/21/15 1305245.484 992595.9879 2297841.471
9/28/15 1462131.382 399554.9352 1861686.317
10/5/15 1129429.1 444429.2089 1573858.309
10/12/15 1034572.019 511439.0307 1546011.05
10/19/15 1340943.361 686550.9044 2027494.265
10/26/15 2257242.441 1009212.797 3266455.238
11/2/15 2699079.873 1383839.896 4082919.769
11/9/15 3989799.292 1397275.202 5387074.494
11/16/15 3086533.224 1141488.175 4228021.399
11/23/15 3745892.349 1389196.413 5135088.761
11/30/15 6258395.972 3030249.004 9288644.976
12/7/15 5679516.045 2762061.348 8441577.393
12/14/15 6885618.958 1841784.765 8727403.723
12/21/15 7864571.657 3315175.705 11179747.36
12/28/15 7619350.371 3423600.162 11042950.53
1/4/16 7452443.657 2290361.784 9742805.441
1/11/16 5354747.794 1858711.011 7213458.804
1/18/16 7014375.141 2813437.78 9827812.921
1/25/16 8187571.714 4426811.616 12614383.33
2/1/16 6271938.975 4014154.961 10286093.94
2/8/16 5699793.517 2094329.933 7794123.45
2/15/16 7946303.807 2661466.823 10607770.63
2/22/16 7146116.893 2141365.952 9287482.845
2/29/16 8111516.693 1861302.932 9972819.625
3/7/16 5239862.329 1137362.049 6377224.378
3/14/16 9207350.436 2547303.807 11754654.24
3/21/16 7848338.529 3009339.232 10857677.76
3/28/16 7135656.136 4329330.953 11464987.09
4/4/16 4773660.587 1472588.83 6246249.417
4/11/16 3912375.044 729471.2686 4641846.312
4/18/16 5145643.218 1019072.458 6164715.676
4/25/16 6105843.171 1217659.838 7323503.009
5/2/16 3695595.49 682543.8466 4378139.337
5/9/16 4965048.084 1124019.526 6089067.61
5/16/16 6704939.434 2415423.376 9120362.811
5/23/16 7920231.493 5341025.297 13261256.79
5/30/16 7045625.007 2854483.584 9900108.591
6/6/16 3670203.074 3576754.031 7246957.104
6/13/16 3216591.981 2392152.609 5608744.59
6/20/16 4563221.656 4316461.094 8879682.75
6/27/16 3037847.06 6464303.285 9502150.345
7/4/16 2628474.359 9160130.771 11788605.13
7/11/16 3576687.41 13574616.64 17151304.05
7/18/16 4063313.499 21032046.46 25095359.96
7/25/16 3214183.92 20420249.65 23634433.57
8/1/16 1545488.497 18348297.52 19893786.02
8/8/16 1292812.152 21831056.42 23123868.57
8/15/16 1806073.238 33934403.62 35740476.86
8/22/16 2235395.244 42785196.74 45020591.98
8/29/16 838712.1093 48526513.99 49365226.1
9/5/16 1999131.162 50612517.79 52611648.96
Raw
data_total.csv
date Total
9/29/14 184081.9575
10/6/14 307253.642
10/13/14 395157.7841
10/20/14 604401.059
10/27/14 679011.3424
11/3/14 510368.2633
11/10/14 337318.3464
11/17/14 258230.6588
11/24/14 249931.6421
12/1/14 416150.7571
12/8/14 290884.2597
12/15/14 215846.1444
12/22/14 173400.4238
12/29/14 477220.1631
1/5/15 391689.6759
1/12/15 370034.7881
1/19/15 288679.7002
1/26/15 471198.6459
2/2/15 473361.2429
2/9/15 278383.0694
2/16/15 399523.0791
2/23/15 387592.1917
3/2/15 308738.9967
3/9/15 240030.7219
3/16/15 136623.0786
3/23/15 449698.0816
3/30/15 691518.1394
4/6/15 1078727.26
4/13/15 654654.3454
4/20/15 722461.2572
4/27/15 915767.5023
5/4/15 914086.1175
5/11/15 556859.2018
5/18/15 969974.3502
5/25/15 1207301.1
6/1/15 953721.1378
6/8/15 908241.4789
6/15/15 376535.8738
6/22/15 275454.7298
6/29/15 267561.9405
7/6/15 47463.38625
7/13/15 132088.9785
7/20/15 899072.3324
7/27/15 1137856.249
8/3/15 1209437.358
8/10/15 1027945.739
8/17/15 1534697.1
8/24/15 2068050.993
8/31/15 2202768.085
9/7/15 1966575.615
9/14/15 2180222.127
9/21/15 2297841.471
9/28/15 1861686.317
10/5/15 1573858.309
10/12/15 1546011.05
10/19/15 2027494.265
10/26/15 3266455.238
11/2/15 4082919.769
11/9/15 5387074.494
11/16/15 4228021.399
11/23/15 5135088.761
11/30/15 9288644.976
12/7/15 8441577.393
12/14/15 8727403.723
12/21/15 11179747.36
12/28/15 11042950.53
1/4/16 9742805.441
1/11/16 7213458.804
1/18/16 9827812.921
1/25/16 12614383.33
2/1/16 10286093.94
2/8/16 7794123.45
2/15/16 10607770.63
2/22/16 9287482.845
2/29/16 9972819.625
3/7/16 6377224.378
3/14/16 11754654.24
3/21/16 10857677.76
3/28/16 11464987.09
4/4/16 6246249.417
4/11/16 4641846.312
4/18/16 6164715.676
4/25/16 7323503.009
5/2/16 4378139.337
5/9/16 6089067.61
5/16/16 9120362.811
5/23/16 13261256.79
5/30/16 9900108.591
6/6/16 7246957.104
6/13/16 5608744.59
6/20/16 8879682.75
6/27/16 9502150.345
7/4/16 11788605.13
7/11/16 17151304.05
7/18/16 25095359.96
7/25/16 23634433.57
8/1/16 19893786.02
8/8/16 23123868.57
8/15/16 35740476.86
8/22/16 45020591.98
8/29/16 49365226.1
9/5/16 52611648.96
Raw
data_updated.csv
date RGB NIR Total
9/29/14 345820 7448 353268
10/6/14 539871.5 24878.5 564750
10/13/14 683509 35602 719111
10/20/14 928806 93332 1022138
10/27/14 1116271.5 80583.5 1196855
11/3/14 1020737 0 1020737
11/10/14 668715 1974 670689
11/17/14 505337.5 3707.5 509045
11/24/14 460337.5 13175.5 473513
12/1/14 652249.5 60017.5 712267
12/8/14 475575 35398 510973
12/15/14 310526 40389 350915
12/22/14 189165 52545 241710
12/29/14 747675.5 68921.5 816597
1/5/15 646425.5 45651.5 692077
1/12/15 598103 47322 645425
1/19/15 547750.5 9869.5 557620
1/26/15 768703 57898 826601
2/2/15 769963 58920 828883
2/9/15 475763 27001 502764
2/16/15 500961.5 99361.5 600323
2/23/15 536516 79556 616072
3/2/15 584240.5 11079.5 595320
3/9/15 471063.5 2999.5 474063
3/16/15 239902.5 11114.5 251017
3/23/15 534837.5 121519.5 656357
3/30/15 993906 129710 1123616
4/6/15 1243667.5 304595.5 1548263
4/13/15 882799.5 142169.5 1024969
4/20/15 816249 209558 1025807
4/27/15 1017921.5 271204.5 1289126
5/4/15 1017981.5 270063.5 1288045
5/11/15 706357 135787 842144
5/18/15 1188308 250547 1438855
5/25/15 1345085.5 356505.5 1701591
6/1/15 1281841.5 208533.5 1490375
6/8/15 1290603 175293 1465896
6/15/15 644290.5 36260.5 680551
6/22/15 526546 8121 534667
6/29/15 499042.5 12027.5 511070
7/6/15 94912 5 94917
7/13/15 264178 0 264178
7/20/15 1332911 155078 1487989
7/27/15 1398024.5 292562.5 1690587
8/3/15 2120931 99315 2220246
8/10/15 2039713 5393 2045106
8/17/15 3047766 7209 3054975
8/24/15 3962226.5 57958.5 4020185
8/31/15 4034186.5 123783.5 4157970
9/7/15 3708317 74945 3783262
9/14/15 3905702.5 151580.5 4057283
9/21/15 3106789 496298 3603087
9/28/15 3124040.5 199777.5 3323818
10/5/15 2481072.5 222214.5 2703287
10/12/15 2324863.5 255719.5 2580583
10/19/15 3025162.5 343275.5 3368438
10/26/15 5019091.5 504606.5 5523698
11/2/15 6090080 691920 6782000
11/9/15 8678236.5 698637.5 9376874
11/16/15 6743810 570744 7314554
11/23/15 8186383 694598 8880981
11/30/15 14031916.5 1515124.5 15547041
12/7/15 12740062.5 1381030.5 14121093
12/14/15 14692130.5 920892.5 15613023
12/21/15 17386731 1657588 19044319
12/28/15 16950501 1711800 18662301
1/4/16 16050068 1145181 17195249
1/11/16 11638851.5 929355.5 12568207
1/18/16 15435469 1406719 16842188
1/25/16 18588549 2213406 20801955
2/1/16 14550955.5 2007077.5 16558033
2/8/16 12446752 1047165 13493917
2/15/16 17223341.5 1330733.5 18554075
2/22/16 15362917 1070683 16433600
2/29/16 17153684.5 930651.5 18084336
3/7/16 11048406 568681 11617087
3/14/16 19688353 1273652 20962005
3/21/16 17201346.5 1504669.5 18706016
3/28/16 16435977.5 2164665.5 18600643
4/4/16 10283615.5 736294.5 11019910
4/11/16 8189485.5 364735.5 8554221
4/18/16 10800822 509536 11310358
4/25/16 12820516 608830 13429346
5/2/16 7732463 341272 8073735
5/9/16 10492106 562010 11054116
5/16/16 14617590.5 1207711.5 15825302
5/23/16 18510975.5 2670512.5 21181488
5/30/16 15518492 1427242 16945734
6/6/16 9128783 1788377 10917160
6/13/16 7629260.5 1196076.5 8825337
6/20/16 11284673.5 2158230.5 13442904
6/27/16 9307845.5 3232151.5 12539997
7/4/16 9837014.5 4580065.5 14417080
7/11/16 13940683.5 6787308.5 20727992
7/18/16 18642650 10516023 29158673
7/25/16 16638493 10210125 26848618
8/1/16 12265126 9174149 21439275
8/8/16 13501152 10915528 24416680
8/15/16 20579348 16967202 37546550
8/22/16 25863388.5 21392598.5 47255987
8/29/16 25940681 24263257 50203938
9/5/16 29304521 25306259 54610780
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<style>
.axis--x path {
stroke-width: 1px;
stroke: #777;
}
.tick line {
stroke: #777;
}
.axis--x.years {
font-weight: 600;
font-size: 12px;
}
.axis--x text {
fill: #a5a5a5;
}
.axis--y path {
display: none;
}
.annotations text {
fill: #a5a5a5;
}
.band text {
fill: #a5a5a5;
}
.axis--y text {
font-size: 11px;
fill: #a5a5a5;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.25px;
}
.axis--x text {
font-size: 11px;
}
body {
font-family: "Lato", "Helvetica", "Arial", sans-serif;
color: #3d3d3d;
}
h1 {
font-size: 24px;
font-weight: 600;
line-height: 32px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus line {
fill: none;
stroke: steelblue;
}
.title {
margin: auto;
}
.bands {
font-size: 11px;
font-weight: 600;
}
.annotations {
font-size: 10px;
}
#tooltip {
position: absolute;
width: 250px;
height: auto;
padding: 10px;
margin: 60px 0 0 75px;
background-color: #f3f3f3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.15);
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.15);
pointer-events: none;
z-index: 1000;
visibility: visible;
opacity: 1;
transition: visibility .5s, opacity 0.5s linear;
}
#tooltip.hidden {
visibility: hidden;
opacity: 0;
}
#tooltip p {
margin: 0;
font-size: 12px;
line-height: 18px;
}
#copytext {
position: relative;
width: 600px;
height: auto;
padding: 5px;
margin: 10px 0 0 10px;
z-index: 1000;
}
#copytext p {
margin: 0;
color: #a5a5a5;
font-size: 12px;
line-height: 14px;
max-width: 450px;
}
#date {
font-weight: bold;
}
#box {
/*background-color: white;*/
text-transform: uppercase;
padding: 1px 2px 2px 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 10px;
margin-right: 3px;
}
#boxSpacer {
display: inline-block;
width: 30px;
}
.legendTitle {
background-color: #27808e;
color: white;
}
.legendRGB {
background-color: #70cf57;
color: white;
}
.legendNIR {
padding-left: 2px;
background-color: #482475;
color: white;
}
</style>
<div id="copytext">
<h1 class="title">Land Surface Area Imaged Daily</h1>
<p>Launches ranging from four to a couple dozen Doves at a time, our aptly named 'flocks' dramatically increase our imagery cadence with each deployment.</p>
</div>
<div>
<span id="tooltip" class="hidden">
<p><span id="date">Coverage!</span></p>
<p><span id="value">100</span></p>
</span>
</div>
<svg id="chart" width="800" height="350"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 40, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%x"),
bisectDate = d3.bisector(function(d) { return d.date; }).left,
toolTime = d3.timeFormat("%B %d, " + "20" + "%y"),
abbreviateNum = d3.format('.2s');
var xAxisTime = d3.timeFormat("%b");
var x0AxisYear = d3.timeFormat("20" + "%y")
var viridisColors = ["#440154","#440256","#450457","#450559","#46075a","#46085c","#460a5d","#460b5e","#470d60","#470e61","#471063","#471164","#471365","#481467","#481668","#481769","#48186a","#481a6c","#481b6d","#481c6e","#481d6f","#481f70","#482071","#482173","#482374","#482475","#482576","#482677","#482878","#482979","#472a7a","#472c7a","#472d7b","#472e7c","#472f7d","#46307e","#46327e","#46337f","#463480","#453581","#453781","#453882","#443983","#443a83","#443b84","#433d84","#433e85","#423f85","#424086","#424186","#414287","#414487","#404588","#404688","#3f4788","#3f4889","#3e4989","#3e4a89","#3e4c8a","#3d4d8a","#3d4e8a","#3c4f8a","#3c508b","#3b518b","#3b528b","#3a538b","#3a548c","#39558c","#39568c","#38588c","#38598c","#375a8c","#375b8d","#365c8d","#365d8d","#355e8d","#355f8d","#34608d","#34618d","#33628d","#33638d","#32648e","#32658e","#31668e","#31678e","#31688e","#30698e","#306a8e","#2f6b8e","#2f6c8e","#2e6d8e","#2e6e8e","#2e6f8e","#2d708e","#2d718e","#2c718e","#2c728e","#2c738e","#2b748e","#2b758e","#2a768e","#2a778e","#2a788e","#29798e","#297a8e","#297b8e","#287c8e","#287d8e","#277e8e","#277f8e","#27808e","#26818e","#26828e","#26828e","#25838e","#25848e","#25858e","#24868e","#24878e","#23888e","#23898e","#238a8d","#228b8d","#228c8d","#228d8d","#218e8d","#218f8d","#21908d","#21918c","#20928c","#20928c","#20938c","#1f948c","#1f958b","#1f968b","#1f978b","#1f988b","#1f998a","#1f9a8a","#1e9b8a","#1e9c89","#1e9d89","#1f9e89","#1f9f88","#1fa088","#1fa188","#1fa187","#1fa287","#20a386","#20a486","#21a585","#21a685","#22a785","#22a884","#23a983","#24aa83","#25ab82","#25ac82","#26ad81","#27ad81","#28ae80","#29af7f","#2ab07f","#2cb17e","#2db27d","#2eb37c","#2fb47c","#31b57b","#32b67a","#34b679","#35b779","#37b878","#38b977","#3aba76","#3bbb75","#3dbc74","#3fbc73","#40bd72","#42be71","#44bf70","#46c06f","#48c16e","#4ac16d","#4cc26c","#4ec36b","#50c46a","#52c569","#54c568","#56c667","#58c765","#5ac864","#5cc863","#5ec962","#60ca60","#63cb5f","#65cb5e","#67cc5c","#69cd5b","#6ccd5a","#6ece58","#70cf57","#73d056","#75d054","#77d153","#7ad151","#7cd250","#7fd34e","#81d34d","#84d44b","#86d549","#89d548","#8bd646","#8ed645","#90d743","#93d741","#95d840","#98d83e","#9bd93c","#9dd93b","#a0da39","#a2da37","#a5db36","#a8db34","#aadc32","#addc30","#b0dd2f","#b2dd2d","#b5de2b","#b8de29","#bade28","#bddf26","#c0df25","#c2df23","#c5e021","#c8e020","#cae11f","#cde11d","#d0e11c","#d2e21b","#d5e21a","#d8e219","#dae319","#dde318","#dfe318","#e2e418","#e5e419","#e7e419","#eae51a","#ece51b","#efe51c","#f1e51d","#f4e61e","#f6e620","#f8e621","#fbe723","#fde725"]
var viridisThreeColors = [viridisColors[200],viridisColors[25],viridisColors[110]]
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(viridisThreeColors);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.area); });
d3.csv("data.csv", type, function(error, data) {
if (error) throw error;
var bands = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, area: d[id]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(bands, function(c) { return d3.min(c.values, function(d) { return d.area; }); }),
d3.max(bands, function(c) { return d3.max(c.values, function(d) { return d.area; }); })
]);
z.domain(bands.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x months")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(xAxisTime).tickSizeOuter(0).tickPadding(10).ticks(d3.timeMonth));
g.append('g')
.attr('class', 'axis axis--x years')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(x0AxisYear).tickSizeOuter(0).tickPadding(25).ticks(d3.timeYear));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(5, "s").tickSizeOuter(0).tickPadding(5));
g.append('g')
.attr('class', 'legend')
.append("text")
// .attr("transform", "rotate(-90)")
.attr("x", -32)
.attr("y", -9)
.attr("dy", "0.71em")
.attr('font-size', '12px')
.attr("fill", "#3d3d3d")
.text("Area in square kilometers");
// g.append("g")
// .attr("class", "axis axis--y")
// .attr("transform", "translate( " + (width + 20) + ", 0 )")
// .call(d3.axisRight(y).ticks(5, "s").tickSizeOuter(0).tickPadding(5));
var band = g.selectAll(".band")
.data(bands)
.enter().append("g")
.attr("class", "band");
band.append("path")
.attr("class", "line")
.attr("d", function(d) { console.log(d.values[1]); return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
band.append("text")
.attr('class', 'bands')
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + (x(d.value.date) - 10) + "," + (y(d.value.area) - 8) + ")"; })
.attr("x", -20)
.attr('text-align', 'right')
.attr("dy", "0.35em")
// .style("font", "10px sans-serif")
.text(function(d) { return d.id; });
//set your focus circle and make sure it's invisible
var focus = band.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append('line')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', height)
.style('stroke-width', 1)
.style('stroke-dasharray', '1,6')
.style('stroke', '#12BCC2');
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
//Create area of focus for your mouse event
band.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
//Mouse move function for watching over focus.
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
y0 = y(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0,
thisBand = "";
focus.transition()
.duration(50)
.attr('transform', 'translate(' + x(x0) + ', 0)');
// focus.append('line')
// console.log(xx0);
// focus.select('text').text('Test');
d3.select("#tooltip")
// .style("left", width - 50 + "px")
// .style("top", "50px")
.select('#date')
.text("Coverage for " + toolTime(d.date));
d3.select("#tooltip")
.select("#value")
.html('<span id="box" class="legendTitle">Total</span><div id="boxSpacer">' + abbreviateNum(d.Total) + '</div> ' + '<span id="box" class="legendRGB">RGB</span><div id="boxSpacer">' + abbreviateNum(d.RGB) + '</div> ' + '<span id="box" class="legendNIR">VNIR</span>' + abbreviateNum(d.VNIR) + ' sq. km ');
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
}
//Annotations
var annotations = g.append('g').attr('class','annotations');
// Doves //
// Flock 1D
annotations.append('g')
.append('line')
.attr('x1', 97)
.attr('y1', y(5000000))
.attr('x2', 97)
.attr('y2', y(1000000))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 78)
.attr('y', y(6000000))
.text('Flock 1d');
// FLOCK 1E
annotations.append('g')
.append('line')
.attr('x1', 184)
.attr('y1', y(8000000))
.attr('x2', 184)
.attr('y2', y(1000000))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 166)
.attr('y', y(9000000))
.text('Flock 1e');
// FLOCK 2B
annotations.append('g')
.append('line')
.attr('x1', 303)
.attr('y1', y(13000000))
.attr('x2', 303)
.attr('y2', y(1787234))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 285)
.attr('y', y(14221820))
.text('Flock 2b');
//Flock 2e
annotations.append('g')
.append('line')
.attr('x1', 408)
.attr('y1', y(20300000))
.attr('x2', 408)
.attr('y2', y(9255319))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 390)
.attr('y', y(21200000))
.text('Flock 2e');
//Flock 2e'
annotations.append('g')
.append('line')
.attr('x1', 508)
.attr('y1', y(24900000))
.attr('x2', 508)
.attr('y2', y(11438298))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 490)
.attr('y', y(26182704))
.text("Flock 2e'");
//Flock 2p
// annotations.append('g')
// .append('line')
// .attr('x1', 594)
// .attr('y1', y(29000000))
// .attr('x2', 594)
// .attr('y2', y(13500000))
// .attr("stroke-width", 1)
// .attr('stroke-dasharray', '1, 2')
// .attr("stroke", "#12BCC2");
annotations.append('g')
.append('line')
.attr('x1', 594)
.attr('y1', y(8510638))
.attr('x2', 594)
.attr('y2', y(29002979))
.attr("stroke-width", 1)
.attr('stroke-dasharray', '1, 2')
.attr("stroke", "#12BCC2");
annotations.append('g')
.append('text')
.attr('x', 576)
.attr('y', y(30000000))
.text('Flock 2p');
//Build 12 Deployment
// annotations.append('g')
// .append('text')
// .attr('x', 460)
// .attr('y', y(30500000))
// .text('Build 12 Dove Satellites Deployed');
// annotations.append('g')
// .append('line')
// .attr('x1', 533)
// .attr('y1', y(1000000))
// .attr('x2', 533)
// .attr('y2', y(29000000))
// .attr("stroke-width", 1)
// .attr('stroke-dasharray', '2, 2, 5')
// .attr("stroke", "rgb(119,119,119)");
});
function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment