Built with blockbuilder.org
forked from GitNoise's block: Map #1
forked from GitNoise's block: Map #4 - län
license: gpl-3.0 |
Built with blockbuilder.org
forked from GitNoise's block: Map #1
forked from GitNoise's block: Map #4 - län
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var colorScale = | |
d3.scaleLinear() | |
.domain([0,1]) | |
.range(["#f8f8f5","DarkOrange"]); | |
function randomColor () { | |
var h = Math.random(); | |
var r = Math.random(); | |
if(r < 0.5) return "#f8f8f5"; | |
return colorScale(h); | |
} | |
function randomSize() { | |
var h = (Math.random()*10) + 1; | |
var r = Math.random(); | |
if(r < 0.95) return 0; | |
return h; | |
} | |
var width = 960, | |
height = 1160; | |
var projection = d3.geoMercator() | |
.translate([0, 2050]) | |
.scale([1200]); | |
//Define path generator | |
var path = d3.geoPath() | |
.projection(projection); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
//Container for the gradients | |
var defs = svg.append("defs"); | |
//Filter for the outside glow | |
var filter = defs.append("filter") | |
.attr("id","glow"); | |
filter.append("feGaussianBlur") | |
.attr("stdDeviation","1.8") | |
.attr("result","coloredBlur"); | |
var feMerge = filter.append("feMerge"); | |
feMerge.append("feMergeNode") | |
.attr("in","coloredBlur"); | |
feMerge.append("feMergeNode") | |
.attr("in","SourceGraphic"); | |
d3.json("lan.json", function(error, geo) { | |
var groups = svg.selectAll("g") | |
.data(geo.features) | |
.enter() | |
.append("g"); | |
groups | |
.append("path") | |
.attr("d", path) | |
.style("fill", randomColor) | |
.style("stroke", "#575757") | |
.style("stroke-width", "0.5"); | |
groups | |
.each(function(d,i) { | |
var | |
rs = randomSize(), | |
center = projection(d3.geoCentroid(d)); | |
d3.select(this) | |
.append("circle") | |
.attr("class", "glow") | |
.attr("cx", center[0]) | |
.attr("cy", center[1]) | |
.attr("r", rs != 0 ? rs + 3 : 0) | |
.style("fill", "lightgray") | |
.style("fill-opacity", "0.8") | |
.style("stroke", "#cccccc") | |
.style("stroke-width", "0.5"); | |
d3.select(this) | |
.append("circle") | |
.attr("cx", center[0]) | |
.attr("cy", center[1]) | |
.attr("r", rs) | |
.style("fill", "steelblue") | |
.style("stroke", "#575757") | |
.style("stroke-width", "0.5"); | |
if (i == 10 | |
) { | |
d3.select(this) | |
.append("line") | |
.attr("x1", center[0]) | |
.attr("y1", center[1]) | |
.attr("x2", center[0]+10) | |
.attr("y2", center[1]-10) | |
.style("stroke", "black"); | |
d3.select(this) | |
.append("line") | |
.attr("x1", center[0]+10) | |
.attr("y1", center[1]-10) | |
.attr("x2", center[0]+130) | |
.attr("y2", center[1]-10) | |
.style("stroke", "black"); | |
d3.select(this) | |
.append("text") | |
.attr("x", center[0]+130) | |
.attr("y", center[1]-12) | |
.text("Gotland 10%") | |
.style("fill", "black") | |
.style("font-family","sans-serif") | |
.style("text-anchor","end"); | |
} | |
d3.selectAll(".glow") | |
.style("filter","url(#glow)"); | |
}); | |
}); | |
</script> | |
</body> |