Created
June 30, 2018 21:40
-
-
Save ix4/0f7ecd7b9bce510c373f67c886de4ae7 to your computer and use it in GitHub Desktop.
GeoJSON & D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment