marcdhansen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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>
	<!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>