Skip to content

Instantly share code, notes, and snippets.

@skoslitz

skoslitz/_.md

Created March 7, 2016 20:23
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 skoslitz/c1fe3b075ed1e5d8d95b to your computer and use it in GitHub Desktop.
Save skoslitz/c1fe3b075ed1e5d8d95b to your computer and use it in GitHub Desktop.
Download ZIP
web map with d3js
Raw
_.md
Raw
config.json
{"description":"web map with d3js","endpoint":"","display":"svg","public":true,"require":[{"name":"topojson","url":"https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}
Raw
inlet.js
var svg = d3.select("svg")
console.log(svg)
var width = 600;
var height = 600;
svg
.attr("width", width)
.attr("height", height);
var features = svg.append("g");
// middle europe
var lon = -10.5;
var lat = 51.0;
d3.json("kartenelemente.topojson", function(error, kartenelemente) {
// -------------------------------------------- set projection
var projection = d3.geo.albers()
.center([0, lat])
.rotate([lon, 0])
// parallels sets two-element array
// of latitudes and returns the projection
.parallels([48, 55])
.scale(4000)
.translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
// ------------------------------------------- Kartenelemente
features.selectAll(".gebiete")
.data(topojson.feature(kartenelemente, kartenelemente.objects.gebiete).features)
.enter().append("path")
.attr("class", function(d) { return "gebiete " + d.id; })
.attr("d", path);
features.selectAll(".fluesse")
.data(topojson.feature(kartenelemente, kartenelemente.objects.fluesse).features)
.enter().append("path")
.attr("class", "fluesse")
.attr("d", path);
features.selectAll(".grenzen")
.data(topojson.feature(kartenelemente, kartenelemente.objects.grenzen).features)
.enter().append("path")
.attr("class", "grenzen")
.attr("d", path);
//offsets for tooltips
var offsetL = 20;
var offsetT = 10;
features.selectAll(".regionen")
.data(topojson.feature(kartenelemente, kartenelemente.objects.regionen).features)
.enter().append("path")
.attr("class", "regionen")
.attr("d", path)
.attr("d", path)
.on("click", function(d) {
console.log(d.properties.bandnr);
// toDo: $baseurl + content id
location.href = "http://lid-online.de/" + d.properties.bandnr;})
// ------------------------------------------- tooltip
.on("mousemove", function(d,i) {
var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );
tooltip.classed("hidden", false)
.attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
.html("Bandnummer: " + d.properties.bandnr);})
.on("mouseout", function(d,i) {
tooltip.classed("hidden", true);
});
features.selectAll(".place")
.data(topojson.feature(kartenelemente, kartenelemente.objects.orte).features)
.enter().append("path")
.attr("class", "place")
.attr("d", path.pointRadius(2));
features.selectAll(".place-label")
.data(topojson.feature(kartenelemente, kartenelemente.objects.orte).features)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
// label height adjustment
.attr("dy", ".35em")
.text(function(d) { return d.properties.ortsname; });
// right-aligned labels
svg.selectAll(".place-label")
.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment