Skip to content

Instantly share code, notes, and snippets.

@lee1043

lee1043/Parallel Coordinates Ordinal Axis

Forked from syntagmatic/README.md
Last active August 22, 2018 18:48
Show Gist options
  • Save lee1043/6ba92f4f648213c1622e45f87c72d80b to your computer and use it in GitHub Desktop.
Save lee1043/6ba92f4f648213c1622e45f87c72d80b to your computer and use it in GitHub Desktop.
Download ZIP
Parallel Coordinates Ordinal Axis
Raw
readme.md
Raw
enso_perf.csv
name BiasPrLatRmse BiasPrLonRmse BiasSstLatRmse BiasSstLonRmse BiasTauxLatRmse BiasTauxLonRmse EnsoAmpl NinaSstLonRmse NinaSstTsRmse NinoSstLonRmse NinoSstTsRmse SeasonalPrLatRmse SeasonalSstLatRmse SeasonalSstLonRmse
ACCESS1-0 1.533647213092708 1.5000648280166673 1.875863732652019 0.6811510565509662 10.480202196672792 10.578930249644793 -0.09971899477767177 0.2668235991387346 0.3108454258370743 0.37501518866324046 0.2758466203113737 1.1121806492600863 0.14672925025927824 0.2843091979796988
ACCESS1-3 1.2087167526303846 2.095242915181706 1.6184645584614392 0.7287585201338935 10.604574788280582 10.691897627689238 -0.13220112212816482 0.31631654097352185 0.3713698034963557 0.4995013863463543 0.3594779608689042 1.226011321517591 0.20182056979384044 0.24589295949658466
BCC-CSM1-1 2.6755516057370428 2.162969980951549 12.174032352890928 9.1900647902377 29.669374538417625 12.452705494819721 -0.1394476846946734 0.30800869605678854 0.46650063975550293 0.5868261078790022 0.4034603201941892 1.5486363059353443 0.41664876798575656 0.3726795244608974
BCC-CSM1-1-M 3.0597158572545884 2.149343281455734 8.227378619498673 8.386562508627666 22.74280899320761 9.648187267067758 0.4481103566675665 0.22342482486430043 0.485637769520511 0.41640775840707533 0.5651867765028344 1.7057184316219187 0.33553775668040337 0.21513050516963733
BNU-ESM 2.2203859318781185 2.0852867184199377 12.134871022354515 8.982844671624695 85.1658525966681 56.47275727385607 0.5748364631689865 0.3226259480827829 0.4075490447739869 0.3712995685071147 0.5082358810312327 1.528443437446123 0.39954796620888794 0.2149704257953627
CanCM4 1.6184674152018916 2.4984379402089116 12.153210917987838 9.064507987761425 30.42163235975244 8.017725894855284 0.11316313743261341 0.3218475196499481 0.32433149539179834 0.6577554031643984 0.3318331954013607 1.0607089723132708 0.39895504010250626 0.39417625907840487
CanESM2 1.6613502384502785 2.5101944152085687 12.163903937981363 9.127051894265948 30.207198141375606 8.289897091809316 0.12329482522181634 0.26975994586288377 0.37253870231101466 0.6437194937184758 0.2701880836611884 1.1104906773299097 0.3995780266896075 0.3916419014005806
CCSM4 1.3861147320335714 2.195321490855247 8.147780524710221 7.988261281134988 15.150888038125185 6.743257717386429 0.25878236856113823 0.26143183143942117 0.2647702547464029 0.3805929549225694 0.3817935254778651 1.7654678373474726 0.32275603760863836 0.35641306619013113
CESM1-BGC 1.5203752566152242 2.149356311647954 8.150976167688935 7.986962966329614 15.229984778656044 6.628674766388053 0.09480037326230173 0.2671460536588876 0.26298830839869447 0.533891931923752 0.2801533529424567 1.8578629847812285 0.32647113430283015 0.35380436503118917
CESM1-CAM5 1.4680159602208513 2.3160176041859772 8.165394449569296 8.541475274046615 15.501433152145312 6.7464979552807085 0.09546401946920935 0.33073953480701 0.30430765736748405 0.5790559042369966 0.271532494820755 1.3963288807554308 0.33353837987424556 0.20088612931189725
CESM1-FASTCHEM 1.4216655960303128 2.0970570949794363 8.149155379104553 7.940456743627424 15.158154170431686 6.880081437900104 0.09647496096927155 0.2589275170028496 0.22700834838002235 0.4989804241496323 0.3593483182168452 1.8156500909857103 0.321145416737503 0.35595497036263263
CESM1-WACCM 1.8000467871777515 1.7183803258921453 8.14954160252976 0.5667769930378717 21.556165852790073 7.039322382640888 0.25356964503538204 0.3944459982925866 0.2986072936885142 0.38730134444115455 0.275234228973683 1.5517200825802098 0.3361527000706523 0.14336001071249532
CMCC-CESM 2.459321350723787 3.988361968233369 11.740502945713159 15.866336690114627 25.752604778133826 22.26083817001712 0.5289370158423768 0.36735228863254316 0.4442113269089443 0.7223682667901223 0.5380529587146013 1.497737802792356 0.38626515967509795 0.46557318822052357
CMCC-CM 2.0040598234678995 1.5216353684829005 8.157759142679025 0.36028062202123556 16.318872125208657 10.583651343277154 -0.2269165551569221 0.2313883762876646 0.375507112197282 0.48280392063596345 0.41524476118679765 1.42460769640278 0.31543204148674026 0.2596673907461585
CMCC-CMS 2.0670083078583565 1.5204755308936484 8.188910055794414 0.3826737433617612 21.110788003591654 5.113688512093769 0.02973382353107301 0.23296125955928695 0.3359383824746507 0.3748625348854741 0.29458268824517914 1.416635815841218 0.32334875092998866 0.20295047432612956
CNRM-CM5 1.8574802925335427 1.3967883408843065 8.62988679777205 2.9827215496734127 16.18889608549796 7.863301702395471 0.06787250572422998 0.1638521893285735 0.33345507234075483 0.2758325920223079 0.386213148005977 0.9904898045085304 0.4111004555209779 0.2187449864427798
CSIRO-Mk3-6-0 1.471616840877135 3.7056688881387396 8.541274122848383 2.2859748092973464 22.15970800909456 15.185347749743434 -0.09459466612086609 0.7164804785717229 0.333939457849862 0.9244787457921261 0.3611685839114897 1.0455588857538538 0.35708198860936824 0.2373408513881662
FGOALS-g2 2.182267287738024 1.403544467481466 12.175524556852903 9.21128354523127 29.716735606160047 14.245869366768181 -0.06317495516656813 0.2942625962755987 0.24299675373470364 0.5591092049877652 0.36446820632358606 1.1783148092768727 0.41424495649773624 0.36198763436108095
FIO-ESM 2.0118297720339138 1.8183574248758188 11.931486168566805 8.507575717302624 83.73134330332459 51.747368432674094 0.5593310580055236 0.25018690383317493 0.3803256937483762 0.360435331479062 0.6038527167399789 1.3112970062468126 0.40991598390747214 0.42267664868921023
GFDL-CM3 2.080387957513774 2.239899797960412 3.2238628633031916 3.855551031572879 4.126017100794389 8.539645771556312 0.1546785283628601 0.3751150358931893 0.5263105184499597 0.3800180646992637 0.3881733315729717 2.0041139586284107 0.19648450696168143 0.16905545622564042
GFDL-ESM2G 2.346125240866316 3.9623940146117467 12.071076005254 9.60162423025457 26.798664852991088 11.87466228860647 -0.020152689188297823 0.39424774867314966 0.36344261203870726 0.7282883406183686 0.2984766346059486 1.492305730837059 0.47962591486220724 0.1534993231777455
GFDL-ESM2M 2.230578663352587 3.0850916838076716 11.893649445495658 9.266175846482614 26.218985249664833 12.679513809445698 0.7417855610272711 0.4082554583597242 0.5460912015757001 0.44068811497789845 0.6546638763829188 1.6588259746877587 0.3974454014245484 0.2373130899042048
GISS-E2-H 3.054242857395767 1.7693006741025337 1.9013020501600562 3.858766473788129 13.54441481564633 18.187791750349888 -0.28306395351649727 0.4209967300544261 0.2562376965999264 0.6247028066325437 0.3702620287595738 1.0254695768728401 0.2680384089762836 0.32754815628517464
GISS-E2-H-CC 3.2554748397645916 1.783024022865825 1.8280021509264952 3.9066525034937882 12.798207423879155 19.378138899597893 -0.06735047640937009 0.5046973864044889 0.36554977500646935 0.5978175560610763 0.4532531126313707 1.0529837540617593 0.2694540499622896 0.30753262510936585
GISS-E2-R 2.0806438487151473 2.1228444422954813 1.845225286216651 3.9057190624407734 7.921807172174201 14.915024290844297 -0.3244470710739187 0.24746910216233256 0.2675400767770206 0.47514133901518285 0.3096187244012935 0.6861053366597601 0.21395292428975363 0.29788775743894086
GISS-E2-R-CC 2.11638550610569 2.151236214910706 1.8290738411817562 3.911854768662266 8.142493154222823 15.242064786466006 -0.3351920696068116 0.29477330185353445 0.3017542498247103 0.43792309099290216 0.5603742278342461 0.708782833839198 0.21785530230629732 0.3061168444831851
HadCM3 0.8323837216045843 3.010423133847589 2.9482575532017834 2.7262530133607057 21.800796653327 14.701335334205357 -0.03036381342079686 0.4086998703128319 0.32652418528040383 0.6355702904899554 0.3599258294482952 0.6584843858102053 0.21896710081208928 0.30455172820787896
HadGEM2-AO 1.0145627074501802 1.3653090543702826 1.807202851031889 0.7358223091518566 8.137323107133916 13.062568514358906 -0.061863089678946825 0.27072972736148887 0.4114250416658571 0.5270558001925019 0.48113728256724336 1.5579210983749048 0.17506361092872355 0.1845885345713899
HadGEM2-CC 0.870889171429514 1.2685544013610537 2.2912828201847137 1.1455239071663226 6.327686267333977 12.13703395707583 0.048783834431494366 0.3405867791846912 0.393506975359807 0.49059893903218266 0.4044652290666735 1.3743869564845936 0.16774419319451164 0.18672021203481068
HadGEM2-ES 0.9424164130303312 1.4942809081130892 2.1988610025673827 1.0498921763478006 7.319975188624838 13.151763432853311 -0.018470675876644527 0.27286888516121294 0.4157371907923971 0.49283072416204865 0.3867037823798574 1.4462391442938214 0.16297179315133214 0.1893394983406717
INMCM4 2.3144688905349406 2.9945620793160925 8.175995141660927 8.691085126328199 16.813083584261157 10.000294318802178 -0.23406005131752605 0.3604939307369253 0.3729687916225937 0.7924164739008774 0.3854345473113907 1.0592112630820143 0.43899319713158064 0.22276347624846876
IPSL-CM5A-LR 1.819077885634813 3.093222606642562 8.75900034802019 2.755788344606453 21.672068514232038 9.758641603463108 -0.10254138736864471 0.3099305670624544 0.26615803032413204 0.5847705523368046 0.3154528327311736 1.476792429270301 0.3839310694739862 0.12453173257743992
IPSL-CM5A-MR 1.786948525612638 3.6363025723493854 8.172910163894098 8.274353840821911 21.888872432908812 7.581599246100784 -0.05755470387833783 0.3936614318970224 0.287276577511656 0.7335693636554471 0.29517969668327754 1.5203460609585522 0.41144887504657585 0.22853422364218628
IPSL-CM5B-LR 1.8210404633147879 1.8120014341354513 8.440660101244298 2.622946313006572 22.26431700576026 7.8752152852345905 -0.14831276605222776 0.175109068017153 0.20626291808836825 0.46178014542596735 0.39048988829470876 1.110028034527825 0.34417125966414785 0.2526263723793284
MIROC-ESM 1.6169871722461722 2.4646527569265944 12.490206563624032 9.744174907993054 31.08139990123087 16.4360148786356 -0.3985257802463827 0.48354976892550566 0.3689153800626696 0.8666045286724086 0.45472154356595157 0.9736464804934646 0.41149505427893224 0.4683138758636753
MIROC-ESM-CHEM 1.618529786497888 2.4410634466206553 12.492951242032392 9.738461556582216 31.006635313644377 16.41297472143923 -0.36403292642242935 0.45348796033154765 0.4941406637372926 0.847853948417276 0.49611975512138096 0.9806899962799327 0.4113725151500267 0.4789320663869287
MIROC4h 1.5013622472747403 1.77528610988092 8.159424942318633 2.979204642163 17.011887408531216 11.954242729733352 -0.22609925635503714 0.3337951092290149 0.5021173320973479 0.5851001304141008 0.45565406273851133 1.352998478935669 0.466082642927261 0.2903385331477724
MIROC5 0.722359442451867 1.991216380894314 8.681646310419504 2.962075163506353 15.853541298267528 11.488647648174686 0.34072316142662495 0.4496659751449916 0.5096673783613154 0.7103727533487961 0.7515963986693674 0.8512412801449319 0.29795094665206656 0.2029881323497254
MPI-ESM-LR 1.9797550751404882 3.6140728357543352 8.42730556059726 1.4511611920952117 22.325088113100698 9.183979874852282 -0.05210862700013241 0.3551764339153887 0.3193663394315224 0.6419609325379834 0.4073242136263949 1.524628205023572 0.35796738825917407 0.22043449890663566
MPI-ESM-MR 2.0643952577962588 3.2100967154469986 8.412222630569733 1.2231880078306145 21.772123496732224 10.660953750855285 -0.19018567241631124 0.3038964005669012 0.31119157765151995 0.634859147516728 0.36559681699560287 1.5712773533368711 0.4428433689113572 0.20271637247538563
MPI-ESM-P 1.9530338348648393 3.6340279517384424 8.426751239721549 1.4663831258841373 22.429178084923763 9.457390971742875 -0.03306559278288668 0.3529390955098016 0.3018138133573187 0.5512231925223434 0.3896896914965799 1.533158563280338 0.35114806179156294 0.22294283792675426
NorESM1-M 1.3901636223171843 0.9263635147033569 8.188039691149035 0.8076472037428444 22.613526748650454 9.966793842052718 0.143793655644056 0.23608044012995463 0.28473944862247114 0.37818589695195126 0.2927622707293581 1.5253775130500882 0.3708235529040491 0.18802387497343623
NorESM1-ME 1.3774306487580585 1.1038626047293547 8.217274279262316 0.9920636749251517 23.003304650976478 9.852907837157522 0.21381417361646815 0.23627772586620482 0.2979606417684401 0.3167819249533194 0.35129475880625033 1.4209843601399885 0.34826076379605037 0.13515445490277778
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Parallel Coordinates Ordinal Axis</title>
<style>
svg {
font: 8px sans-serif;
}
.background path {
fill: none;
stroke: none;
stroke-width: 8px;
pointer-events: stroke;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.axis .title {
font-size: 6px;
font-weight: bold;
text-transform: uppercase;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis.string {
font-size: 6px;
}
.label {
-webkit-transition: fill 125ms linear;
}
.active .label:not(.inactive) {
font-weight: bold;
font-size: 11px;
}
.label.inactive {
fill: #ccc;
}
.foreground path.inactive {
stroke: #ccc;
stroke-opacity: .5;
stroke-width: 1px;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script>
var margin = {top: 30, right: 40, bottom: 20, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var dimensions = [
{
name: "name",
scale: d3.scale.ordinal().rangePoints([0, height]),
type: "string"
},
{
name: "BiasPrLatRmse",
scale: d3.scale.linear().range([0, height]),
type: "number"
},
{
name: "BiasPrLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "BiasSstLatRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "BiasSstLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "BiasTauxLatRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "BiasTauxLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "EnsoAmpl",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "NinaSstLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "NinaSstTsRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "NinoSstLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "NinoSstTsRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "SeasonalPrLatRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "SeasonalSstLatRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
{
name: "SeasonalSstLonRmse",
scale: d3.scale.linear().range([height, 0]),
type: "number"
},
];
var x = d3.scale.ordinal()
.domain(dimensions.map(function(d) { return d.name; }))
.rangePoints([0, width]);
var line = d3.svg.line()
.defined(function(d) { return !isNaN(d[1]); });
var yAxis = d3.svg.axis()
.orient("left");
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 dimension = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d.name) + ")"; });
d3.csv("enso_perf.csv", function(data) {
// Extract the list of dimensions and create a scale for each.
dimensions.forEach(function(dimension) {
dimension.scale.domain(dimension.type === "number"
? d3.extent(data, function(d) { return +d[dimension.name]; })
: data.map(function(d) { return d[dimension.name]; }).sort());
});
// Add grey background lines for context.
svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", draw);
// Add blue foreground lines for focus.
svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", draw);
// Add an axis and title.
dimension.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); })
.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d.name; });
var ordinal_labels = svg.selectAll(".axis text")
.on("mouseover", mouseover)
.on("mouseout", mouseout);
var projection = svg.selectAll(".background path,.foreground path")
.on("mouseover", mouseover)
.on("mouseout", mouseout);
function mouseover(d) {
svg.classed("active", true);
// this could be more elegant
if (typeof d === "string") {
projection.classed("inactive", function(p) { return p.name !== d; });
projection.filter(function(p) { return p.name === d; }).each(moveToFront);
ordinal_labels.classed("inactive", function(p) { return p !== d; });
ordinal_labels.filter(function(p) { return p === d; }).each(moveToFront);
} else {
projection.classed("inactive", function(p) { return p !== d; });
projection.filter(function(p) { return p === d; }).each(moveToFront);
ordinal_labels.classed("inactive", function(p) { return p !== d.name; });
ordinal_labels.filter(function(p) { return p === d.name; }).each(moveToFront);
}
}
function mouseout(d) {
svg.classed("active", false);
projection.classed("inactive", false);
ordinal_labels.classed("inactive", false);
}
function moveToFront() {
this.parentNode.appendChild(this);
}
});
function draw(d) {
return line(dimensions.map(function(dimension) {
return [x(dimension.name), dimension.scale(d[dimension.name])];
}));
}
</script>
Raw
Parallel Coordinates Ordinal Axis
Parallel Coordinates Ordinal Axis
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment