To see the chart in action, open it in a new window. When you resize the new window, the chart will update to reflect its new size.
Last active
August 29, 2015 14:04
-
-
Save marcdhansen/5396f76063286b9990fc to your computer and use it in GitHub Desktop.
Responsive Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
.axis line, .axis path { | |
shape-rendering: crispEdges; | |
stroke: black; | |
fill: none; | |
} | |
</style> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
</head> | |
<body> | |
<div id="viz" style="position:absolute;width:100%;height:100%"></div> | |
<script type="text/javascript"> | |
var w = window; | |
window.onresize = updateWindow; | |
var margin = {top: 41, right: 42, bottom: 63, left: 64}; | |
var div = d3.select("#viz"); | |
var svg = div | |
.append("svg"); | |
var svgRect = svg.append("rect") | |
.attr("x", 0) | |
.attr("y", 0) | |
.attr("fill", "burlywood"); | |
var svgSize = svg.append("text") | |
.attr("x", 5) | |
.attr("y", margin.top/2)/// | |
.attr("text-anchor", "left") | |
.style("font-size", "20px"); | |
var marginTop = svg.append("text") | |
.attr("text-anchor", "center") | |
.style("font-size", "20px"); | |
var marginRight = svg.append("text") | |
.attr("text-anchor", "center") | |
.style("font-size", "20px"); | |
var marginBottom = svg.append("text") | |
.attr("text-anchor", "center") | |
.style("font-size", "20px"); | |
var marginLeft = svg.append("text") | |
.attr("x", 5) | |
.attr("text-anchor", "center") | |
.style("font-size", "20px"); | |
var g = svg.append('g') | |
.attr("transform", | |
"translate(" + margin.left + "," + margin.top + ")"); | |
var gRect = g.append("rect") | |
.attr("x", 0) | |
.attr("y", 0) | |
.attr("fill", "wheat"); | |
var gText = g.append("text") | |
.attr("x", 5) | |
.attr("y", 20) | |
.attr("text-anchor", "left") | |
.style("font-size", "20px") | |
// Define identity (1:1) scales | |
var x = d3.scale.identity(); | |
var y = d3.scale.identity(); | |
// Define stock x and y axis | |
var xAxis = d3.svg.axis().scale(x).orient('bottom'); | |
var yAxis = d3.svg.axis().scale(y).orient('left').ticks(10); | |
var gXAxis = g.append('g') | |
.attr("class", "x axis"); | |
var gYAxis = g.append('g') | |
.attr("class", "y axis"); | |
updateWindow(); | |
function updateWindow(){ | |
var divWidth = parseInt(div.style("width")); | |
var divHeight = parseInt(div.style("height")); | |
var width = divWidth - margin.left - margin.right; | |
var height = divHeight - margin.top - margin.bottom; | |
svg | |
.attr("width", divWidth) | |
.attr("height", divHeight); | |
svgRect | |
.attr("width", divWidth) | |
.attr("height", divHeight); | |
svgSize | |
.text(divWidth + "x" + divHeight); | |
marginTop | |
.attr("x", divWidth/2)/// | |
.attr("y", margin.top * 2/3)/// | |
.text(margin.top); | |
marginRight | |
.attr("x", divWidth - (margin.right * 4/5))/// | |
.attr("y", divHeight/2)/// | |
.text(margin.right); | |
marginBottom | |
.attr("x", divWidth/2)/// | |
.attr("y", divHeight - (margin.bottom * 1/3))/// | |
.text(margin.bottom); | |
marginLeft | |
.attr("y", divHeight/2)/// | |
.text(margin.left); | |
gRect | |
.attr("width", width) | |
.attr("height", height); | |
gText | |
.text(width + "x" + height); | |
// Define identity (1:1) scales | |
x.domain([0, width]); | |
y.domain([0, height]).range([height,0]); | |
gXAxis | |
.attr('transform', 'translate(0,' + height + ')') | |
.call(xAxis); | |
gYAxis | |
.call(yAxis); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment