Skip to content

Instantly share code, notes, and snippets.

@bsr203
Created September 26, 2012 11:16
Show Gist options
  • Save bsr203/3787415 to your computer and use it in GitHub Desktop.
Save bsr203/3787415 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var w = 800,
h = 600;
var data = [
{"name": "A", "X": 10, "Y": 90, "W": 40, "H": -80}, //x1=10, y1= 10, w= 40, H=80
{"name": "B", "X": 60, "Y": 100, "W": 20, "H": -40}//x1=60, y1= 60, w= 20, H=40
]
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", d.x)
.attr("y", d.Y))
.attr("width", d.W)
.attr("height", d.H);
.axis text, .origintext {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment