forked from mbostock's block: Tobler–Mercator
forked from anonymous's block: Tobler–Mercator
license: gpl-3.0 | |
height: 960 | |
border: no |
forked from mbostock's block: Tobler–Mercator
forked from anonymous's block: Tobler–Mercator
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-opacity: 0.5; | |
} | |
.land { | |
fill: #555; | |
} | |
.boundary { | |
fill: none; | |
stroke: #000; | |
stroke-width: 0.5px; | |
} | |
</style> | |
<svg width="960" height="960"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/topojson-client@3"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script> | |
var svg = d3.select("svg") | |
.style('background', '#000') | |
var width = +svg.attr("width") | |
var height = +svg.attr("height") | |
var projection = d3.geoNaturalEarth1(); | |
var path = d3.geoPath() | |
.projection(projection); | |
var graticule = d3.geoGraticule(); | |
svg.append("defs").append("path") | |
.datum(graticule.outline()) | |
.attr("id", "sphere") | |
.attr("d", path); | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(world) { | |
svg.insert("path", ".graticule") | |
.datum(topojson.feature(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
d3.csv('volcano.csv', function(dots) { | |
var scaleColor = d3.scaleLinear() | |
.domain([0, 7]) | |
.range(["#866", "#FF0000"]); | |
var scaleSize = d3.scaleLinear() | |
.domain([0, Math.sqrt(30000)]) | |
.range([3, 35]) | |
var group = svg | |
.append('g') | |
group | |
.selectAll('circle') | |
.data(dots) | |
.enter() | |
.append('circle') | |
.style('opacity', 0.75) | |
.attr('r', function(d){ | |
return scaleSize(Math.sqrt(d.death_num)) | |
}) | |
.attr('fill', function(d){ | |
return scaleColor(d.VEI) | |
}) | |
.attr('cx', function (d) { | |
var point = projection([ | |
d.Longitude, | |
d.Latitude | |
]); | |
return point[0]; | |
}) | |
.attr('cy', function (d) { | |
var point = projection([ | |
d.Longitude, | |
d.Latitude | |
]); | |
return point[1]; | |
}) | |
}) | |
}); | |
</script> |
���� JFIF H H �� C | |
$.' ",#(7),01444'9=82<.342�� C 2!!22222222222222222222222222222222222222222222222222�� ��" |