Skip to content

Instantly share code, notes, and snippets.

@veltman
Last active July 3, 2016 04:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veltman/c98b726ab1cc4f4b1477 to your computer and use it in GitHub Desktop.
Save veltman/c98b726ab1cc4f4b1477 to your computer and use it in GitHub Desktop.
Old atlas style #2
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
background: url('harrison.png') no-repeat center center;
background-size: contain;
}
.mesh {
fill: none;
stroke: #ccc;
stroke-width: 0.5px;
}
rect {
stroke: none;
fill: rgba(224,186,148,0.3);
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.albers()
.rotate([96, 0])
.parallels([29.5, 45.5])
.center([-0.62, 38.65])
.scale(1065)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height);
var colors = ["#00d565", "#d5008e", "#d5d500", "#0ab0cc", "#bf5a15"];
d3.json("us.json", function(err, us) {
var mesh = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }),
neighbors = topojson.neighbors(us.objects.states.geometries),
features = topojson.feature(us, us.objects.states).features;
// Greedy color selection
features.forEach(function(d,i){
d.properties.color = colors.filter(function(c){
return neighbors[i].map(function(n){
return features[n].properties.color;
}).indexOf(c) === -1;
})[0];
// Mix it up a bit, get fifth color in
colors.push(colors.shift());
});
svg.selectAll(".state")
.data(features)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path)
.style("fill",function(d){
return transparent(d.properties.color, 0.3);
})
.attr("filter", "url(#splotch)");
svg.append("path")
.datum(mesh)
.attr("class", "mesh")
.attr("d", path);
var filter = svg.append("defs")
.append("filter")
.attr("id", "splotch");
filter.append("feTurbulence")
.attr("type", "fractalNoise")
.attr("baseFrequency", ".01,.01")
.attr("numOctaves", 4);
filter.append("feColorMatrix")
.attr("values", "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.1 1.2")
.attr("result", "texture");
filter.append("feComposite")
.attr("in", "SourceGraphic")
.attr("in2", "texture")
.attr("operator", "in");
});
function transparent(color, alpha) {
var rgb = d3.rgb(color);
return "rgba(" + [rgb.r, rgb.g, rgb.b, alpha].join(",") + ")";
}
</script>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment