Skip to content

Instantly share code, notes, and snippets.

@HermanSontrop

HermanSontrop/data.json

Created January 17, 2014 07:17
Show Gist options
  • Save HermanSontrop/8469606 to your computer and use it in GitHub Desktop.
Save HermanSontrop/8469606 to your computer and use it in GitHub Desktop.
Download ZIP
d3.js simple zoom and pan
Raw
data.json
{
"canvasSize": [
960, 500
],
"simpleBoxes": [
[ 140.000000, 20.000000, 120.000000, 200.000000, [ 30, 0.30, 0.90 ] ],
[ 280.000000, 20.000000, 120.000000, 400.000000, [ 120, 0.50, 0.80 ] ],
[ 420.000000, 50.000000, 120.000000, 800.000000, [ 240, 0.90, 0.70 ] ]
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Block Diagram</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var data;
var svg;
var canvas;
d3.json("./data.json", function(error, json) {
if (error) return console.warn(error);
data = json;
main();
});
function redraw() {
var translation = d3.event.translate,
newx = translation[0],
newy = translation[1];
canvas.attr("transform",
"translate(" + newx + "," + newy + ") " +
"scale(" + d3.event.scale + ")");
}
function main() {
svg = d3.select("body").append("svg")
.attr("width", data["canvasSize"][0])
.attr("height", data["canvasSize"][1]);
canvas = svg.append("g")
.attr("class", "canvas");
svg.call(d3.behavior.zoom()
.scaleExtent([1.0/5.0,5.0])
.on("zoom", redraw));
canvas.selectAll("rect")
.data(data["simpleBoxes"])
.enter()
.append("rect")
.attr("x", function(d, i) {return d[0]})
.attr("y", function(d, i) {return d[1]})
.attr("width", function(d, i) {return d[2]})
.attr("height", function(d, i) {return d[3]})
.attr("fill", function(d, i) {return d3.hsl(d[4][0],d[4][1],d[4][2])})
.attr("stroke", "black")
.attr("stroke-width", 2);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment