|
<!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; |
|
} |
|
|
|
.tsu { |
|
stroke: cyan; |
|
animation: pulse 5s infinite; |
|
} |
|
.EQ { |
|
stroke: cyan; |
|
} |
|
|
|
|
|
|
|
@keyframes pulse { |
|
0% { |
|
stroke-width: 3; |
|
} |
|
50% { |
|
stroke-width: 1; |
|
} |
|
100% { |
|
stroke-width: 3; |
|
} |
|
} |
|
|
|
|
|
</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('class', function(d) { |
|
return d.Tsu ? 'tsu' : ''; |
|
}) |
|
|
|
|
|
|
|
.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]; |
|
|
|
}) |
|
|
|
var veis = [ |
|
0, 1, 2, 3, 4, 5, 6, 7 |
|
] |
|
|
|
var circles = [ |
|
3, 10, 20, 30, 35 |
|
] |
|
|
|
var rectScale = d3.scaleLinear() |
|
.domain([0, 1]) |
|
.range([200, 200 + 40]) |
|
|
|
group |
|
.selectAll('rect') |
|
.data(veis) |
|
.enter() |
|
.append('rect') |
|
|
|
.attr('x', function (d) { |
|
return rectScale(d) |
|
}) |
|
.attr('y', 550) |
|
.attr('fill', function (d) { |
|
return scaleColor(d) |
|
}) |
|
.attr('width', 40) |
|
.attr('height', 25) |
|
|
|
group |
|
.selectAll('text') |
|
.data(veis) |
|
.enter() |
|
.append('text') |
|
|
|
.attr('x', function (d) { |
|
return rectScale(d + 0.5) |
|
}) |
|
.attr('y', 550 + 18) |
|
.attr('fill', 'white') |
|
.attr('text-anchor', 'middle') |
|
.text(function (d) { |
|
return d |
|
}) |
|
|
|
group |
|
.append('text') |
|
.attr("x", 200) |
|
.attr("y", 600) |
|
.text("Сила извержения") |
|
.attr('fill', 'white') |
|
|
|
group |
|
.append('text') |
|
.attr("x", 590) |
|
.attr("y", 600) |
|
.text("Количество жертв") |
|
.attr('fill', 'white') |
|
|
|
|
|
group |
|
.append('text') |
|
.attr("x",5) |
|
.attr("y",30) |
|
.style("font-size", "34px") |
|
.text("Извержение вулканов") |
|
.attr('fill', 'white') |
|
|
|
|
|
group |
|
.append('g') |
|
.selectAll('circle') |
|
.data(circles) |
|
.enter() |
|
.append('circle') |
|
|
|
.attr("cx", function(d, i) { |
|
return 600 + i * 65 |
|
}) |
|
.attr("cy", function(d, i) { |
|
return 560 - d |
|
}) |
|
.attr('r', function(d) { |
|
return d |
|
}) |
|
.attr('fill', 'grey') |
|
|
|
|
|
group |
|
.append('g') |
|
.selectAll('text') |
|
.data(circles) |
|
.enter() |
|
.append('text') |
|
|
|
|
|
.attr("x", function(d, i) { |
|
return 600 + i * 65 |
|
}) |
|
.attr("y", 580) |
|
.attr('text-anchor', 'middle') |
|
.text(function (d) { |
|
return (scaleSize.invert(d) ** 2).toFixed() |
|
}) |
|
.attr('fill', 'white') |
|
}) |
|
|
|
}); |
|
</script> |