esip-mapping

View Github Repository Open presentation in a new window

fillerwriter

See all presentation from fillerwriter

esip-mapping

0 0

esip-mapping

Slides for 2014 ESIP Summer Meeting Mapping Presentation

On Github fillerwriter / esip-mapping

Data Viz and Mapping in Drupal for Fun and Profit

ESIP Summer Meeting

July 11, 2014

Native Drupal Mapping Tools

Tornadoes

http://www.spc.noaa.gov/gis/svrgis/

Tilemill

Magnitude (F1-F5)

Financial Impact

Injuries

CartoCSS

#tornado {
  line-width: 1;
  line-color: #f6e10c;
  line-opacity: 1;

  [zoom > 5] {
    line-width: 2; 
  }
  [zoom > 7] {
    line-width: 4; 
  }

  [MAG = "1"] {
    line-color: #feedde;
    line-opacity: 1; 
  }
  [MAG = "2"] {
    line-color: #fdbe85;
    line-opacity: 1; 
  }
  [MAG = "3"] {
    line-color: #fd8d3c;
    line-opacity: 1; 
  }
  [MAG = "4"] {
    line-color: #e6550d;
    line-opacity: 1; 
  }
  [MAG = "5"] {
    line-color: #a63603;
    line-opacity: 1; 
  }
}

CartoDB

HeatMap

D3

D3 Map Code

  var width = 900,
  height = 510;

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  var path = d3.geo.path()
    .projection(d3.geo.albersUsa());

  d3.json("data/us.json", function(error, us) {
  if (error) return console.error(error);

  svg.selectAll(".state")
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("class", function(d) { return "state"; })
      .attr("d", path);
  });

Reusable D3 Charting Libraries

Data Processing Tools

Resources

Questions?

Slides: fillerwriter.github.io/esip-mapping

: Brandon Morrison

: bmorrison@phase2technology.com

: @fillerwriter

D.O: Brandonian