Skip to content

Instantly share code, notes, and snippets.

@GitNoise

GitNoise/.block

Last active August 12, 2016 07:04
Show Gist options
  • Save GitNoise/723d1b4f3d6b288028ade7fcacf66cd9 to your computer and use it in GitHub Desktop.
Save GitNoise/723d1b4f3d6b288028ade7fcacf66cd9 to your computer and use it in GitHub Desktop.
Download ZIP
Map #4 - län
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!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.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>
Display the source blob
Display the rendered blob
Raw
lan.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment