GeoJSON & D3

geojson-d3.markdown

GeoJSON & D3

A Pen by thmsdnnr on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-md-offset-2" id="header"><h1>AMIMETEORITE?! you just might be the space rock that I'm lookinnnnnn for...</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-2" id="m_map">
    </div>
  </div>
</div>

script.js

var width=800, height=500;

//tooltips
var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
var proj = d3.geoMercator()
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);
var path = d3.geoPath().projection(proj);//proj(proj));

var svg = d3.select("#m_map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.zoom()
          .scaleExtent([1, 8])
          .on("zoom", zoom));

// Get the data in an asynch queue
var q=d3.queue(1);
q.defer(d3.json,"//d3js.org/world-50m.v1.json");
////raw.githubusercontent.com/thmsdnnr/learnyounode/master/world-110m.json
q.defer(d3.json,"//raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json");
q.await(ready);
var massArr=[];
function ready (err, data, m_data) {
  if (err) { throw err; }
  var massRange=d3.extent(m_data.features, function(d) { return Number(d.properties.mass);});
  var radius = d3.scaleLog()
    .domain([massRange[0]+1,massRange[1]])
    .range([0.5, 3]);
  console.log(radius(2));
  
svg.selectAll("path") //draw the world
    .data(topojson.feature(data, data.objects.countries).features)
    .enter().append("path").attr("d", path);
  
  svg.selectAll("circle") //plot the meteorite strikes
    .data(m_data.features)
    .enter().append("circle")
    .attr('cx',(function(d){return proj([d.properties.reclong,d.properties.reclat])[0];}))
    .attr('cy',(function(d){return proj([d.properties.reclong,d.properties.reclat])[1];}))
    .attr('r', function(d) {return radius(Number(d.properties.mass)+1); }) //can't pass 0 to a log fn
    .attr("class","points")
    .on("mouseover", function(d) {
         //d3.select("#dat_data_tho").html(Object.keys(d.properties));
       div.transition()
         .duration(200)
         .style("opacity", 0.9); //give more information
       div.html("<b>"+d.properties.name+"</b><br />"+d.properties.recclass+"<br />Mass: "+d.properties.mass+" Year:  "+d.properties.year.split("-")[0])
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
           })
     .on("mouseout", function(d) {
       div.transition()
         .duration(500)
         .style("opacity", 0);
       });
}
function zoom() { //scale everything appropriately on zoom, redraw dots and map, reduce border width of map & circles
  var transform=d3.zoomTransform(this);
  d3.select(div.tooltip).attr("zoom",(transform.y/2));
  console.log(transform+" was called");
  var f_x=0, f_y=0;
  f_x=Math.min((width/2)*(transform.k-1)+(50*transform.k),Math.max(transform.x, (width/2)*(1-transform.k)));
  f_y=Math.min((height/2)*(transform.k-1),Math.max((height/2)*(1-transform.k),transform.y));
  svg.selectAll("path")
    .attr("transform", "translate(" + f_x + "," + f_y + ") scale(" + transform.k + ")").attr("stroke-width", (1/transform.k));
  
  proj.scale(transform.k).translate([f_x,f_y]);
  
  svg.selectAll("circle")
      .attr("transform", "translate(" + f_x + "," + f_y + ") scale(" + transform.k + ")")
      .attr("stroke-width", (1/transform.k));
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
  background: #FFF;
}

svg {
  display: block;
  background: #CCC;
  margin: auto;
  fill:#222;
  stroke:#111;
  border: 10px;
  border-style: solid;
}

.points {
  opacity: 0.4;
  stroke: #000;
  fill: #F00;
  border: 0.25px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: auto;
  height: auto;
  padding: 5px;
  font-family: 'Amatic SC', cursive, sans-serif;
  font-size: 24px;
  background: #EEE;
  border: 5px;
  border-radius: 2.5px;
  border-style: solid;
  border-color: #CCC;
  pointer-events: none;
  opacity: 0;
}

h1 {
  font-family: 'Amatic SC', cursive, sans-serif;
  font-size: 36px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />