Skip to content

Instantly share code, notes, and snippets.

@nsonnad
Last active December 11, 2015 02:08
Show Gist options
  • Save nsonnad/4528210 to your computer and use it in GitHub Desktop.
Save nsonnad/4528210 to your computer and use it in GitHub Desktop.
Axis grid using groups
{"description":"Axis grid using groups","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":14},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.571875,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}
var width = 400;
var height = 400;
var gridGraph = d3.select("svg")
.append("svg")
.attr("width", width)
.attr("height", height)
var xGraph = gridGraph.append("g");
var yGraph = gridGraph.append("g");
var yaxiscoorddata = d3.range(25, height, 25);
var xaxiscoorddata = d3.range(25, width, 25);
// Vertical lines
xGraph.selectAll("line")
.data(xaxiscoorddata)
.enter().append("svg:line")
.attr("x1", function(d){return d;})
.attr("y1", 25)
.attr("x2", function(d){return d;})
.attr("y2", height-25)
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", 2);
// Horizontal lines (these do not get drawn)
yGraph.selectAll("line")
.data(yaxiscoorddata)
.enter().append("svg:line")
.attr("x1", 25)
.attr("y1", function(d){return d;})
.attr("x2", width-25)
.attr("y2", function(d){return d;})
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", 2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment