Skip to content

Instantly share code, notes, and snippets.

@mukhtyar

mukhtyar/.block

Last active October 24, 2018 22:07
Show Gist options
  • Save mukhtyar/0cce050c83073ee5e30977dae4bfdf8d to your computer and use it in GitHub Desktop.
Save mukhtyar/0cce050c83073ee5e30977dae4bfdf8d to your computer and use it in GitHub Desktop.
Download ZIP
Parallel Coordinates
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
drought_truckee_early_century.csv
wateryear tasmax (°F) tair (°F) tasmin (°F) pr (inch) baseflow (inch) et (inch) runoff (inch) swe (inch)
2018 61.192511804601686 44.28274179759261 27.36269995385479 0.052688154243191176 0.04193533115764913 0.06744282893393592 0.0052726059191436315 1.874808588450781
2019 58.9786808045271 42.07806665973255 25.17409764120028 0.07530205801508334 0.01095144987374632 0.05622604430026354 0.005666063322196392 2.3651415819335235
2020 59.80238509381412 43.436001013632335 27.07308626769024 0.11963508422483853 0.0426239167463073 0.057272214884615404 0.021668118142171497 4.644631832913331
2021 60.57068252354459 44.294275746147505 28.008876108666012 0.12123024485360456 0.04627563309517339 0.060618078582857254 0.013890269825809562 3.5011119479762893
2022 58.94346796741226 42.84711067965587 26.738239085576375 0.12874831638815 0.03615503480632483 0.06330809198331551 0.025360851264299718 5.68780077165315
2023 59.94182645614842 43.84267528294575 27.74154969933922 0.11080795524291347 0.03694935412794802 0.06168851951858697 0.016469574843619186 0.9757931952888604
2024 59.70659151671369 43.38206248908901 27.048490850730047 0.09450706495250137 0.03134394522827831 0.054840344713930955 0.00856692439804552 1.3864816956538633
2025 62.09609866625649 45.2744994100816 28.44395065516644 0.060670402673969615 0.002359900874264593 0.05130745458870297 0.0051230031102524306 0.5388871959799322
2026 60.17914258146947 43.69056561854554 27.20137557356329 0.07667461844609233 0.01376153353248015 0.05824989603599779 0.006126086852973897 0.7421569323922685
2027 61.832117518594906 44.70104269145898 27.556509156945662 0.06374989969497971 0.0025275999287730343 0.05747522880196733 0.004540658078521576 0.15758108621237696
2028 61.43331811123211 45.16800021792408 28.899267648165356 0.07994496809536608 0.016800080227967907 0.05610377785932207 0.006297890360005691 2.0113061362603983
2029 61.25608281383779 45.31293523318962 29.363012912698025 0.09596057409212913 0.01842820198407177 0.06680716077072486 0.011418105751481049 0.08994762408878501
2030 63.02192978114309 46.017460139085564 29.00658843576096 0.13458641652053707 0.051454782521110284 0.05218885064319524 0.031013980389069277 3.2411583406285227
2031 61.33501220703134 45.18645828184197 29.02857824874253 0.13426282708024012 0.04636568062843952 0.0590368119938328 0.02878653538958851 2.6776148083193987
2032 63.1419159135663 45.684038359256576 28.223391443471463 0.05435440312538028 0.0016439222935363599 0.049246373889898214 0.003562596616899646 0.11455616914130377
2033 60.969913798293064 44.4155411245674 27.85722392043025 0.08200576137643828 0.019116327662212797 0.05428655103460134 0.00855984887377752 1.2043817032581219
2034 64.11879861073957 46.87819216593999 29.627485435172336 0.0741587067609727 0.013709871815611407 0.054158785170307575 0.006304520644766314 0.4762419444837549
2035 62.89261151875541 45.68705142016126 28.48972428831339 0.04607919650472317 0.0016361782283393857 0.04086805252143016 0.0035799040156451003 0.2588861550124126
2036 61.85947867971958 45.70328890526145 29.531173325835702 0.09098419348425554 0.01901486378553543 0.06265538859201977 0.007565422843230897 0.3604081561953324
2037 62.44834502755789 45.87623941849766 29.297395036253246 0.10269393981765243 0.032934589716350125 0.05930018025967992 0.010356862563852555 0.6354549699435245
2038 62.44039017350712 45.98667088248139 29.529304759404482 0.0907265081582979 0.02147908209853319 0.0636131281033595 0.007463197811218456 0.5510813360325632
2039 63.54011559891377 46.74598792214916 29.94445973853547 0.06571570805046535 0.0021484519834506304 0.05339283478830744 0.0044249134071907064 0.05851119894671708
2040 64.00882215155941 46.963414791623364 29.915095965276038 0.08302949768365477 0.018368254699616133 0.058152716560202815 0.012270688454570033 0.13648819505316429
2041 64.60567625280937 46.978134296468575 29.344721805102246 0.05896616224951093 0.0018415765778189222 0.052657259696888295 0.00450931447865435 0.09996410674972246
2042 65.3408093930598 48.10293868894731 30.853193417901863 0.08511761695066597 0.023346251739103742 0.05329076829402873 0.00846033554789028 3.8026535503382632
2043 62.12732542273119 45.65362056075251 29.171749668905203 0.10448446951095543 0.035511234656158894 0.05693276552595492 0.011269168147527093 3.5039461429468868
2044 65.67296719910671 48.651501283886276 31.620211461802032 0.1095021237898943 0.04144551280517086 0.05412146000713712 0.011962347350014318 0.05068671728412759
2045 61.27812590298597 45.59567817516114 29.90888909326845 0.09173772615112341 0.018307475952183086 0.0683080208996922 0.007452052228483465 0.42491455853924925
2046 62.9579037182952 46.566604119804616 30.17235583997757 0.13101074973725077 0.055197127065859435 0.054584649353980594 0.021596099749264 2.5285265132203816
2047 57.569289059846376 41.215642545485615 24.85887394117276 0.11766096568027909 0.001116144857257558 0.00969820879775201 0.0018064587722548735 0.6483749318958246
Raw
drought_truckee_late_century.csv
wateryear tasmax (°F) tair (°F) tasmin (°F) pr (inch) baseflow (inch) et (inch) runoff (inch) swe (inch)
2046 64.85267020089293 47.938791191618805 31.01113054547998 0.052688154243191176 0.014695731648068915 0.0692405788768862 0.004118919551789791 0.7084741117225519
2047 62.816400715031044 45.8380118492715 28.855727413647855 0.07530205801508334 0.011816360935085275 0.055880719152205584 0.005680700276516784 0.2610994943099787
2048 63.634773999823985 47.19109019186714 30.750819942286782 0.11963508422483853 0.04304981889631188 0.057918139120731106 0.020196258808799866 0.9636444667486691
2049 64.4082876043451 48.053916432006325 31.690426568854377 0.12123024485360456 0.04640013886465394 0.06342154409155182 0.010927108196337673 0.49615212476782516
2050 62.781183362987 46.60678566298333 30.41986404209924 0.12874831622621574 0.05019524203037519 0.0631962350223626 0.011631752990085604 0.8074344462346281
2051 63.779532671366745 47.602822090443496 31.423183685720804 0.11080795524291347 0.032042239064593615 0.06723039121554909 0.01561013043924734 0.07566549071657513
2052 63.53898942791054 47.137963100552064 30.726215370053193 0.09450706495250137 0.027315509197732027 0.058090020783186584 0.009268417662303987 0.40179486604621867
2053 65.93370811148873 49.03461217735727 32.125492386491366 0.060670402673969615 0.001785491185627492 0.052681696622158894 0.00436944880946723 0.2654478117752287
2054 64.01685391360773 47.450728401280436 30.883005195513213 0.07667461844609233 0.01147008093139841 0.06104143955508397 0.005830248471928884 0.3441095014411307
2055 65.66982433580385 48.46121003339349 31.238147357261376 0.06374989969497971 0.002087742124850856 0.057777393954310786 0.004441619245031988 0.022678435628306442
2056 65.26570686715552 48.92399482827207 32.57697850962159 0.07994496809536608 0.014226420759528846 0.059270320859845266 0.00582122632992631 0.551696571611461
2057 65.09369677399943 49.072215668643786 33.04454982809827 0.09596057422653861 0.014010969533561528 0.07140023006824027 0.011114999036339588 0.010340579134610929
2058 66.85963163192972 49.77708604904988 32.68822708756958 0.13458641652053707 0.04478764786808993 0.05301314435516148 0.03685523425146174 2.026302812633516
2059 65.17272790360138 48.946252290134986 32.71020787069246 0.13426282708024012 0.044308034268811004 0.060350044507104135 0.029560204209150957 0.18527359029954726
2060 66.97431442510893 49.43917783155544 31.901124817895123 0.05435440312538028 0.001575961485860596 0.0492285381177939 0.0036238522858767857 0.008972851156509847
2061 64.8075277584547 48.175166612892106 31.53877016668451 0.08200576137643828 0.017781080129662803 0.055131057490394327 0.009046603978031332 0.07863332661975035
2062 67.95650016053088 50.63841196683989 33.30911505712222 0.0741587067609727 0.008856167319675562 0.05855639963829537 0.006748009153127334 0.07117717845717812
2063 66.73032224890316 49.44687435723125 32.17134939533395 0.04607919650472317 0.0015846575911955814 0.04103337748137463 0.003502747912675752 0.14647042622481027
2064 65.69188139368285 49.45850121574016 33.20890249783881 0.09098419348425554 0.015935833694481805 0.06588243424871305 0.007559110678121056 0.21521613187552524
2065 66.28595025885602 49.63598844739468 32.978945345943934 0.10269393981765243 0.028082578636597327 0.06387890840167032 0.010556428106213206 0.23617772029826334
2066 66.27809653922317 49.74673302703932 33.21092971592735 0.0907265081582979 0.017810322798325128 0.06675921428101485 0.007888383015857517 0.0803442950217792
2067 67.37782196462982 50.50585691595604 33.6260892099877 0.06571570765185787 0.0019246705717127712 0.05408852980600274 0.004335261458767889 0.020677020791635695
2068 67.84122456534976 50.71843035944173 33.59282033451269 0.08302949768365477 0.015144812922241657 0.06098768304828717 0.012275400972095962 0.024202353738211925
2069 68.4432950288956 50.73744372985997 33.02625887100017 0.05896616224951093 0.0017110593773495338 0.05263709737428579 0.0046679007581248025 0.0542615464767001
2070 69.17852042420283 51.862810916363806 34.53482288935415 0.08511761695066597 0.0272836222325586 0.05028812695479529 0.007541315290398247 0.672660914174777
2071 65.96502742401552 49.413564558233276 32.85338786922093 0.10448446951095543 0.033399150455748476 0.059770457636240185 0.010627340306161135 1.300132455015267
2072 69.50536976298359 52.406830143537654 35.29793613121161 0.1095021237898943 0.03912510901840659 0.05731292278812173 0.011144425130704487 0.013928019863456743
2073 65.11573986314754 49.35543121706541 33.590430824593334 0.09173772615112341 0.012726213526857853 0.0737623204936079 0.007520877047196675 0.045343940404636296
2074 66.79560541858417 50.32622553208104 33.85398997685685 0.13101074973725077 0.0531359868726687 0.05582139942681119 0.022335138275516805 0.24685266318995172
2075 61.9338491290549 45.287574909125325 28.639036586595655 0.11766096568027909 0.0011497230277094704 0.01238626882726725 0.0060404728747905975 0.35022817569648224
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
/*stroke: steelblue;*/
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scalePoint().range([0, width], 1),
y = {},
dragging = {};
var line = d3.line(),
axis = d3.axisLeft(),
background,
foreground;
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 + ")");
d3.csv("drought.csv", function(error, climatevars) {
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(climatevars[0]).filter(function(d) {
return d != "wateryear" && (y[d] = d3.scaleLinear()
.domain(d3.extent(climatevars, function(p) { return +p[d]; }))
.range([height, 0]));
}));
// Create color scale
var years = climatevars.map(d => +d.wateryear);
var colorScale = d3.scaleLinear()
.domain(d3.extent(years))
.range([d3.rgb('pink'),d3.rgb('red')]);
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(climatevars)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(climatevars)
.enter().append("path")
.attr("d", path)
.style("stroke", d => colorScale(+d.wateryear));
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// .call(d3.behavior.drag()
// .origin(function(d) { return {x: x(d)}; })
// .on("dragstart", function(d) {
// dragging[d] = x(d);
// background.attr("visibility", "hidden");
// })
// .on("drag", function(d) {
// dragging[d] = Math.min(width, Math.max(0, d3.event.x));
// foreground.attr("d", path);
// dimensions.sort(function(a, b) { return position(a) - position(b); });
// x.domain(dimensions);
// g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
// })
// .on("dragend", function(d) {
// delete dragging[d];
// transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
// transition(foreground).attr("d", path);
// background
// .attr("d", path)
// .transition()
// .delay(500)
// .duration(0)
// .attr("visibility", null);
// }));
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment