block by syntagmatic 42d5b54c5cfe002e7dd8

EcoEngine Parallel Coordinates

Full Screen

Multidimensional view of EcoEngine observations data

index.html

<!doctype html>
<title>EcoEngine Parallel Coordinates</title>
<link rel="stylesheet" type="text/css" href="//syntagmatic.github.io/parallel-coordinates/d3.parcoords.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<style>
html, body {
  height: 100%;
  margin: 0;
}
text {
  font-size: 9px;
}
text.label {
  font-weight: bold;
}
</style>
<body>
<div id="example" class="parcoords" style="width:100%;height:100%"></div>
</body>
<script>

var parcoords = d3.parcoords()("#example");

// https://ecoengine.berkeley.edu/api/observations/?extra=kingdom,phylum,clss,order,family,genus,last_modified&page_size=2000
d3.json("data.json", function(error,raw) {
  var data = raw.results.map(function(d) {
    // un-nest geojson coordinates
    if (d.geojson && "coordinates" in d.geojson) {
      d.long = d.geojson.coordinates[0];
      d.lat = d.geojson.coordinates[1];
    } else {
      d.long = null;
      d.lat = null;
    }
    delete d.geojson;

    // parse dates
    d.begin_date = new Date(d.begin_date);
    d.end_date = new Date(d.end_date);
    d.modified = new Date(d.last_modified);

    // extra names
    if (d.kingdom) {
      d.kingdom = d.kingdom.replace("https://ecoengine.berkeley.edu/api/kingdom/","").replace("/","");
    }
    if (d.phylum) {
      d.phylum = d.phylum.replace("https://ecoengine.berkeley.edu/api/phylum/","").replace("/","").slice(0,12);
    }
    if (d.clss) {
      d.class = d.clss.replace("https://ecoengine.berkeley.edu/api/class/","").replace("/","").slice(0,12);
    }
    if (d.order) {
      d.order = d.order.replace("https://ecoengine.berkeley.edu/api/order/","").replace("/","").slice(0,12);
    }
    if (d.family) {
      d.family = d.family.replace("https://ecoengine.berkeley.edu/api/family/","").replace("/","").slice(0,12);
    }
    if (d.genus) {
      d.genus = d.genus.replace("https://ecoengine.berkeley.edu/api/genus/","").replace("/","").slice(0,12);
    }
    if (d.state_province) {
      d.state_province = d.state_province.slice(0,12);
    }
    if (d.country) {
      d.country = d.country.slice(0,12);
    }
    if (d.scientific_name) {
      d.scientific_name = d.scientific_name.slice(0,12);
    }

    delete d.clss;

    return d;
  });

  var color = d3.scale.ordinal()
    .range(["rgb(158,1,66)", "rgb(213,62,79)", "rgb(244,109,67)", "rgb(253,174,97)", "rgb(254,224,139)", "rgb(255,255,191)", "rgb(230,245,152)", "rgb(171,221,164)", "rgb(102,194,165)", "rgb(50,136,189)", "rgb(94,79,162)"].reverse());

  parcoords
    .data(data)
    .dimensions(["observation_type", "country", /*"state_province",*/ "begin_date", "end_date", "long", "lat", "kingdom", "phylum", "class", "order", "family", /*"genus", "scientific_name",*/ "modified"])
    .types({
      "url":"string",
      "observation_type":"string",
      "scientific_name":"string",
      "country":"string",
      "state_province":"string",
      "begin_date":"date",
      "end_date":"date",
      "source":"string",
      "remote_resource":"string",
      "kingdom":"string",
      "phylum":"string",
      "class":"string",
      "order":"string",
      "family":"string",
      "genus":"string",
      "long":"number",
      "lat":"number",
      "modified":"date"
    });

  parcoords.ctx.foreground.lineWidth = 1.5;
  parcoords.ctx.foreground.globalCompositeOperation = "darker";

  parcoords
    .alpha(0.3)
    .composite("darker")
    .mode("queue")
    .rate(60)
    .margin({ top: 24, left: 120, bottom: 12, right: 0 })
    .autoscale()
    .color(function(d) { return color(d.country); })
    .render()
    .brushMode("1D-axes")
    .reorderable();


});
</script>