Skip to content

Instantly share code, notes, and snippets.

@thole

thole/data.json

Last active October 20, 2018 07:14
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 thole/f315294b2c6994cbdb0aaa679b7eccc7 to your computer and use it in GitHub Desktop.
Save thole/f315294b2c6994cbdb0aaa679b7eccc7 to your computer and use it in GitHub Desktop.
Download ZIP
hamburg texture
Display the source blob
Display the rendered blob
Raw
data.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { background-color: #343434; }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="textures.js"></script>
<script>
var width = 960,
height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.albers()
.center([14, 53.75])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(28000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var t1 = textures.lines().stroke("darkorange").orientation("3/8").lighter().size(16).strokeWidth(1);
svg.call(t1);
var t2 = textures.lines().stroke("darkorange").orientation("7/8").lighter().size(16).strokeWidth(1);
svg.call(t2);
var t3 = textures.lines().stroke("darkorange").orientation("4/8").lighter().size(8).strokeWidth(1);
svg.call(t3);
var t4 = textures.lines().stroke("darkorange").orientation("0/8").lighter().size(8).strokeWidth(1);
svg.call(t4);
var textureUrls = [t1.url(),t3.url(),t4.url(),t2.url()];
d3.json("data.json", function(error, hh) {
if (error) return console.error(error);
svg.selectAll(".subunit")
.data(topojson.feature(hh, hh.objects.landkreise_simplify0).features)
.enter().append("path")
.attr("d", path)
.style("fill",function(d,i){ return textureUrls[(i%textureUrls.length)]})
});
</script>
</body>
Raw
textures.js
// Generated by CoffeeScript 1.10.0
(function() {
var rand, umd,
slice = [].slice;
rand = function() {
return ((Math.random().toString(36)) + "00000000000000000").replace(/[^a-z]+/g, "").slice(0, 5);
};
umd = function(factory) {
if (typeof exports === 'object') {
return module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
return define([], factory);
} else {
return this.textures = factory();
}
};
umd(function() {
return {
circles: function() {
var background, circles, complement, fill, id, radius, size, stroke, strokeWidth;
size = 20;
background = "";
radius = 2;
complement = false;
fill = "#343434";
stroke = "#343434";
strokeWidth = 0;
id = rand();
circles = function(sel) {
var corner, g, i, len, ref, results;
g = sel.append("defs").append("pattern").attr("id", id).attr("patternUnits", "userSpaceOnUse").attr("width", size).attr("height", size);
if (background) {
g.append("rect").attr("width", size).attr("height", size).attr("fill", background);
}
g.append("circle").attr("cx", size / 2).attr("cy", size / 2).attr("r", radius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", strokeWidth);
if (complement) {
ref = [[0, 0], [0, size], [size, 0], [size, size]];
results = [];
for (i = 0, len = ref.length; i < len; i++) {
corner = ref[i];
results.push(g.append("circle").attr("cx", corner[0]).attr("cy", corner[1]).attr("r", radius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", strokeWidth));
}
return results;
}
};
circles.heavier = function(_) {
if (!arguments.length) {
radius = radius * 2;
} else {
radius = _ ? radius * 2 * _ : radius * 2;
}
return circles;
};
circles.lighter = function(_) {
if (!arguments.length) {
radius = radius / 2;
} else {
radius = _ ? radius / (2 * _) : radius / 2;
}
return circles;
};
circles.thinner = function(_) {
if (!arguments.length) {
size = size * 2;
} else {
size = _ ? size * 2 * _ : size * 2;
}
return circles;
};
circles.thicker = function(_) {
if (!arguments.length) {
size = size / 2;
} else {
size = _ ? size / (2 * _) : size / 2;
}
return circles;
};
circles.background = function(_) {
background = _;
return circles;
};
circles.size = function(_) {
size = _;
return circles;
};
circles.complement = function() {
complement = true;
return circles;
};
circles.radius = function(_) {
radius = _;
return circles;
};
circles.fill = function(_) {
fill = _;
return circles;
};
circles.stroke = function(_) {
stroke = _;
return circles;
};
circles.strokeWidth = function(_) {
strokeWidth = _;
return circles;
};
circles.id = function(_) {
if (!arguments.length) {
return id;
} else {
id = _;
return circles;
}
};
circles.url = function() {
return "url(#" + id + ")";
};
return circles;
},
lines: function() {
var background, id, lines, orientation, path, shapeRendering, size, stroke, strokeWidth;
size = 20;
strokeWidth = 2;
stroke = "#343434";
id = rand();
background = "";
orientation = ["diagonal"];
shapeRendering = "auto";
path = function(orientation) {
switch (orientation) {
case "0/8":
return (function(s) {
return "M " + (s / 2) + ", 0 l 0, " + s;
})(size);
case "vertical":
return (function(s) {
return "M " + (s / 2) + ", 0 l 0, " + s;
})(size);
case "1/8":
return (function(s) {
return "M " + (s / 4) + ",0 l " + (s / 2) + "," + s + " M " + (-s / 4) + ",0 l " + (s / 2) + "," + s + "\nM " + (s * 3 / 4) + ",0 l " + (s / 2) + "," + s;
})(size);
case "2/8":
return (function(s) {
return "M 0," + s + " l " + s + "," + (-s) + " M " + (-s / 4) + "," + (s / 4) + " l " + (s / 2) + "," + (-s / 2) + "\nM " + (3 / 4 * s) + "," + (5 / 4 * s) + " l " + (s / 2) + "," + (-s / 2);
})(size);
case "diagonal":
return (function(s) {
return "M 0," + s + " l " + s + "," + (-s) + " M " + (-s / 4) + "," + (s / 4) + " l " + (s / 2) + "," + (-s / 2) + "\nM " + (3 / 4 * s) + "," + (5 / 4 * s) + " l " + (s / 2) + "," + (-s / 2);
})(size);
case "3/8":
return (function(s) {
return "M 0," + (3 / 4 * s) + " l " + s + "," + (-s / 2) + " M 0," + (s / 4) + " l " + s + "," + (-s / 2) + "\nM 0," + (s * 5 / 4) + " l " + s + "," + (-s / 2);
})(size);
case "4/8":
return (function(s) {
return "M 0," + (s / 2) + " l " + s + ",0";
})(size);
case "horizontal":
return (function(s) {
return "M 0," + (s / 2) + " l " + s + ",0";
})(size);
case "5/8":
return (function(s) {
return "M 0," + (-s / 4) + " l " + s + "," + (s / 2) + "M 0," + (s / 4) + " l " + s + "," + (s / 2) + "\nM 0," + (s * 3 / 4) + " l " + s + "," + (s / 2);
})(size);
case "6/8":
return (function(s) {
return "M 0,0 l " + s + "," + s + " M " + (-s / 4) + "," + (3 / 4 * s) + " l " + (s / 2) + "," + (s / 2) + "\nM " + (s * 3 / 4) + "," + (-s / 4) + " l " + (s / 2) + "," + (s / 2);
})(size);
case "7/8":
return (function(s) {
return "M " + (-s / 4) + ",0 l " + (s / 2) + "," + s + " M " + (s / 4) + ",0 l " + (s / 2) + "," + s + "\nM " + (s * 3 / 4) + ",0 l " + (s / 2) + "," + s;
})(size);
default:
return (function(s) {
return "M " + (s / 2) + ", 0 l 0, " + s;
})(size);
}
};
lines = function(sel) {
var g, i, len, o, results;
g = sel.append("defs").append("pattern").attr("id", id).attr("patternUnits", "userSpaceOnUse").attr("width", size).attr("height", size);
if (background) {
g.append("rect").attr("width", size).attr("height", size).attr("fill", background);
}
results = [];
for (i = 0, len = orientation.length; i < len; i++) {
o = orientation[i];
results.push(g.append("path").attr("d", path(o)).attr("stroke-width", strokeWidth).attr("shape-rendering", shapeRendering).attr("stroke", stroke).attr("stroke-linecap", "square"));
}
return results;
};
lines.background = function(_) {
background = _;
return lines;
};
lines.shapeRendering = function(_) {
shapeRendering = _;
return lines;
};
lines.heavier = function(_) {
if (!arguments.length) {
strokeWidth = strokeWidth * 2;
} else {
strokeWidth = _ ? strokeWidth * 2 * _ : strokeWidth * 2;
}
return lines;
};
lines.lighter = function(_) {
if (!arguments.length) {
strokeWidth = strokeWidth / 2;
} else {
strokeWidth = _ ? strokeWidth / (2 * _) : strokeWidth / 2;
}
return lines;
};
lines.thinner = function(_) {
if (!arguments.length) {
size = size * 2;
} else {
size = _ ? size * 2 * _ : size * 2;
}
return lines;
};
lines.thicker = function(_) {
if (!arguments.length) {
size = size / 2;
} else {
size = _ ? size / (2 * _) : size / 2;
}
return lines;
};
lines.orientation = function() {
var args;
args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
orientation = args;
return lines;
};
lines.size = function(_) {
size = _;
return lines;
};
lines.stroke = function(_) {
stroke = _;
return lines;
};
lines.strokeWidth = function(_) {
strokeWidth = _;
return lines;
};
lines.id = function(_) {
if (!arguments.length) {
return id;
} else {
id = _;
return lines;
}
};
lines.url = function() {
return "url(#" + id + ")";
};
return lines;
},
paths: function() {
var background, d, fill, height, id, paths, shapeRendering, size, stroke, strokeWidth, svgPath, width;
size = 20;
height = 1;
width = 1;
strokeWidth = 2;
stroke = "#343434";
background = "";
d = "";
shapeRendering = "auto";
fill = "transparent";
id = void 0;
svgPath = function(_) {
switch (_) {
case "squares":
return (function(s) {
return "M " + (s / 4) + " " + (s / 4) + " l " + (s / 2) + " 0 l 0 " + (s / 2) + " l " + (-s / 2) + " 0 Z";
})(size);
case "nylon":
return (function(s) {
return "M 0 " + (s / 4) + " l " + (s / 4) + " 0 l 0 " + (-s / 4) + " M " + (s * 3 / 4) + " " + s + " l 0 " + (-s / 4) + "\nl " + (s / 4) + " 0 M " + (s / 4) + " " + (s / 2) + " l 0 " + (s / 4) + " l " + (s / 4) + " 0 M " + (s / 2) + " " + (s / 4) + "\nl " + (s / 4) + " 0 l 0 " + (s / 4);
})(size);
case "waves":
return (function(s) {
return "M 0 " + (s / 2) + " c " + (s / 8) + " " + (-s / 4) + " , " + (s * 3 / 8) + " " + (-s / 4) + " , " + (s / 2) + " 0\nc " + (s / 8) + " " + (s / 4) + " , " + (s * 3 / 8) + " " + (s / 4) + " , " + (s / 2) + " 0 M " + (-s / 2) + " " + (s / 2) + "\nc " + (s / 8) + " " + (s / 4) + " , " + (s * 3 / 8) + " " + (s / 4) + " , " + (s / 2) + " 0 M " + s + " " + (s / 2) + "\nc " + (s / 8) + " " + (-s / 4) + " , " + (s * 3 / 8) + " " + (-s / 4) + " , " + (s / 2) + " 0";
})(size);
case "woven":
return (function(s) {
return "M " + (s / 4) + "," + (s / 4) + "l" + (s / 2) + "," + (s / 2) + "M" + (s * 3 / 4) + "," + (s / 4) + "l" + (s / 2) + "," + (-s / 2) + "\nM" + (s / 4) + "," + (s * 3 / 4) + "l" + (-s / 2) + "," + (s / 2) + "M" + (s * 3 / 4) + "," + (s * 5 / 4) + "l" + (s / 2) + "," + (-s / 2) + "\nM" + (-s / 4) + "," + (s / 4) + "l" + (s / 2) + "," + (-s / 2);
})(size);
case "crosses":
return (function(s) {
return "M " + (s / 4) + "," + (s / 4) + "l" + (s / 2) + "," + (s / 2) + "M" + (s / 4) + "," + (s * 3 / 4) + "l" + (s / 2) + "," + (-s / 2);
})(size);
case "caps":
return (function(s) {
return "M " + (s / 4) + "," + (s * 3 / 4) + "l" + (s / 4) + "," + (-s / 2) + "l" + (s / 4) + "," + (s / 2);
})(size);
case "hexagons":
return (function(s) {
width = 3;
height = Math.sqrt(3);
return "M " + s + ",0 l " + s + ",0 l " + (s / 2) + "," + (s * Math.sqrt(3) / 2) + "\nl " + (-s / 2) + "," + (s * Math.sqrt(3) / 2) + " l " + (-s) + ",0\nl " + (-s / 2) + "," + (-s * Math.sqrt(3) / 2) + " Z M 0," + (s * Math.sqrt(3) / 2) + "\nl " + (s / 2) + ",0 M " + (3 * s) + "," + (s * Math.sqrt(3) / 2) + " l " + (-s / 2) + ",0";
})(size);
default:
return _(size);
}
};
paths = function(sel) {
var g, path;
path = svgPath(d);
id = rand();
g = sel.append("defs").append("pattern").attr("id", id).attr("patternUnits", "userSpaceOnUse").attr("width", size * width).attr("height", size * height);
if (background) {
g.append("rect").attr("width", size * width).attr("height", size * height).attr("fill", background);
}
return g.append("path").attr("d", path).attr("fill", fill).attr("stroke-width", strokeWidth).attr("shape-rendering", shapeRendering).attr("stroke", stroke).attr("stroke-linecap", "square");
};
paths.background = function(_) {
background = _;
return paths;
};
paths.shapeRendering = function(_) {
shapeRendering = _;
return paths;
};
paths.heavier = function(_) {
if (!arguments.length) {
strokeWidth = strokeWidth * 2;
} else {
strokeWidth = _ ? strokeWidth * 2 * _ : strokeWidth * 2;
}
return paths;
};
paths.lighter = function(_) {
if (!arguments.length) {
strokeWidth = strokeWidth / 2;
} else {
strokeWidth = _ ? strokeWidth / (2 * _) : strokeWidth / 2;
}
return paths;
};
paths.thinner = function(_) {
if (!arguments.length) {
size = size * 2;
} else {
size = _ ? size * 2 * _ : size * 2;
}
return paths;
};
paths.thicker = function(_) {
if (!arguments.length) {
size = size / 2;
} else {
size = _ ? size / (2 * _) : size / 2;
}
return paths;
};
paths.d = function(_) {
d = _;
return paths;
};
paths.size = function(_) {
size = _;
return paths;
};
paths.stroke = function(_) {
stroke = _;
return paths;
};
paths.strokeWidth = function(_) {
strokeWidth = _;
return paths;
};
paths.id = function(_) {
if (!arguments.length) {
return id;
} else {
id = _;
return paths;
}
};
paths.url = function() {
return "url(#" + id + ")";
};
return paths;
}
};
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment