xxxxxxxxxx
<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.4) 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 == 7) {
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>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js