Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active July 21, 2019 17:33
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mbostock/9234731 to your computer and use it in GitHub Desktop.
Save mbostock/9234731 to your computer and use it in GitHub Desktop.
Timezones
license: gpl-3.0
redirect: https://observablehq.com/@mbostock/time-zones
.DS_Store
build
node_modules
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
pointer-events: none;
}
.timezones {
fill: #222;
}
.timezones :hover {
fill: orange;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
pointer-events: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 960;
var projection = d3.geo.mercator()
.scale(width / 2 / Math.PI)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("timezones.json", function(error, timezones) {
if (error) throw error;
path.projection(null);
svg.insert("g", ".graticule")
.attr("class", "timezones")
.selectAll("path")
.data(topojson.feature(timezones, timezones.objects.timezones).features)
.enter().append("path")
.attr("d", path)
.append("title")
.text(function(d) { return d.id; });
svg.insert("path", ".graticule")
.datum(topojson.mesh(timezones, timezones.objects.timezones, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
GENERATED_FILES = \
timezones.json
.PHONY: all clean
all: $(GENERATED_FILES)
clean:
rm -rf -- $(GENERATED_FILES) build
build/tz_world_mp.zip:
mkdir -p $(dir $@)
curl -o $@ 'http://efele.net/maps/tz/world/tz_world_mp.zip'
build/tz_world_mp.shp: build/tz_world_mp.zip
rm -rf -- $(basename $@)
mkdir -p $(basename $@)
unzip -d $(basename $@) $<
for file in `find $(basename $@) -type f`; do chmod 644 $$file; mv $$file $(basename $@).$${file##*.}; done
rm -rf -- $(basename $@)
touch $@
timezones.json: build/tz_world_mp.shp
node_modules/.bin/topojson -o $@ --projection='d3.geo.mercator().scale(960 / 2 / Math.PI).translate([960 / 2, 960 / 2]).precision(.1)' --simplify=1 -q 1e5 --id-property=TZID -- timezones=$<
{
"name": "anonymous",
"version": "0.0.1",
"private": true,
"devDependencies": {
"topojson": "1"
}
}
Display the source blob
Display the rendered blob
Raw
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