| license: gpl-3.0 |
This is a version of Mike Bostock’s parallel coordinates example, modified to include reorderable axes.
This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.
forked from jasondavies's block: Parallel Coordinates
| 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 |
| 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 |
| <!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> |