cjseeger/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="d3 date chart" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin d3 test</title>
<style id="jsbin-css">
.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
</style>
</head>
<body>
  <button type="button" onclick="updateData()">add data</button>
  <div id="test-graph"></div>
<script id="jsbin-javascript">
var testData = [
        {
            date: "2013-07-09",
            programs: 2
        },
        {
            date: "2013-07-10",
            programs: 4
        },
        {
            date: "2013-07-11",
            programs: 6
        },
        {
            date: "2013-07-12",
            programs: 8
        }
];

console.clear();

function updateData(){
  //console.log(testData[3].programs);
  testData[3].programs = 12;

  d3.select("svg")
       .remove();


 renderGraph();
}


function renderGraph(){


        var margin = {top: 20, right: 16, bottom: 32, left: 64},
            width = 600,   // width of svg
            height = 400,  // height of svg
            chartWidth = width - margin.left - margin.right,
            chartHeight = height - margin.top - margin.bottom,
            parseDate = d3.time.format("%Y-%m-%d").parse;

        var data = testData;

        var x_domain = d3.extent(data, function(d) { return parseDate(d.date); }),
            y_domain = [0, d3.max(data, function(d) { return d.programs; })];

        /* get
        y_domain: Array[2]
            0: 2
            1: 33
        x_domain: Array[2]
            0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
            1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
        */

        // display date format
        var  date_format = d3.time.format("%m-%d-%y");

        // create an svg container
        var vis = d3.select("#test-graph")
                .append("svg:svg")
                .attr("width", width)
                .attr("height", height);

        // define the y scale  (vertical)
        var yScale = d3.scale.linear()
            .domain(y_domain)
            .range([chartHeight, 0]);

        var xScale = d3.time.scale()
            .domain(x_domain)
            .range([0, chartWidth]);

        // define the y axis
        var yAxis = d3.svg.axis()
            .orient("left")
            .ticks(d3.range(y_domain[0], y_domain[1]).length)
            .scale(yScale);

        // define the x axis
        var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .ticks(d3.time.days(x_domain[0], x_domain[1]).length)
            .tickFormat(date_format);

        vis.append("g")
            .attr("class", "axis")
            .attr("transform", "translate("+margin.left+"," + margin.top + ")")
            .call(yAxis)
            .selectAll('text')
              .style('text-anchor','middle');

        vis.append("g")
            .attr("class", "xaxis axis")
            .attr("transform", "translate(" +margin.left+ "," + (margin.top + chartHeight) + ")")
            .call(xAxis);
}

renderGraph();
</script>


<script id="jsbin-source-css" type="text/css">.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var testData = [
        {
            date: "2013-07-09",
            programs: 2
        },
        {
            date: "2013-07-10",
            programs: 4
        },
        {
            date: "2013-07-11",
            programs: 6
        },
        {
            date: "2013-07-12",
            programs: 8
        }
];

console.clear();

function updateData(){
  //console.log(testData[3].programs);
  testData[3].programs = 12;

  d3.select("svg")
       .remove();


 renderGraph();
}


function renderGraph(){


        var margin = {top: 20, right: 16, bottom: 32, left: 64},
            width = 600,   // width of svg
            height = 400,  // height of svg
            chartWidth = width - margin.left - margin.right,
            chartHeight = height - margin.top - margin.bottom,
            parseDate = d3.time.format("%Y-%m-%d").parse;

        var data = testData;

        var x_domain = d3.extent(data, function(d) { return parseDate(d.date); }),
            y_domain = [0, d3.max(data, function(d) { return d.programs; })];

        /* get
        y_domain: Array[2]
            0: 2
            1: 33
        x_domain: Array[2]
            0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
            1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
        */

        // display date format
        var  date_format = d3.time.format("%m-%d-%y");

        // create an svg container
        var vis = d3.select("#test-graph")
                .append("svg:svg")
                .attr("width", width)
                .attr("height", height);

        // define the y scale  (vertical)
        var yScale = d3.scale.linear()
            .domain(y_domain)
            .range([chartHeight, 0]);

        var xScale = d3.time.scale()
            .domain(x_domain)
            .range([0, chartWidth]);

        // define the y axis
        var yAxis = d3.svg.axis()
            .orient("left")
            .ticks(d3.range(y_domain[0], y_domain[1]).length)
            .scale(yScale);

        // define the x axis
        var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .ticks(d3.time.days(x_domain[0], x_domain[1]).length)
            .tickFormat(date_format);

        vis.append("g")
            .attr("class", "axis")
            .attr("transform", "translate("+margin.left+"," + margin.top + ")")
            .call(yAxis)
            .selectAll('text')
              .style('text-anchor','middle');

        vis.append("g")
            .attr("class", "xaxis axis")
            .attr("transform", "translate(" +margin.left+ "," + (margin.top + chartHeight) + ")")
            .call(xAxis);
}

renderGraph();</script></body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="d3 date chart" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin d3 test</title>
	<style id="jsbin-css">
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<button type="button" onclick="updateData()">add data</button>
	<div id="test-graph"></div>
	<script id="jsbin-javascript">
	var testData = [
	{
	date: "2013-07-09",
	programs: 2
	},
	{
	date: "2013-07-10",
	programs: 4
	},
	{
	date: "2013-07-11",
	programs: 6
	},
	{
	date: "2013-07-12",
	programs: 8
	}
	];

	console.clear();

	function updateData(){
	//console.log(testData[3].programs);
	testData[3].programs = 12;

	d3.select("svg")
	.remove();


	renderGraph();
	}


	function renderGraph(){




	var margin = {top: 20, right: 16, bottom: 32, left: 64},
	width = 600, // width of svg
	height = 400, // height of svg
	chartWidth = width - margin.left - margin.right,
	chartHeight = height - margin.top - margin.bottom,
	parseDate = d3.time.format("%Y-%m-%d").parse;

	var data = testData;

	var x_domain = d3.extent(data, function(d) { return parseDate(d.date); }),
	y_domain = [0, d3.max(data, function(d) { return d.programs; })];

	/* get
	y_domain: Array[2]
	0: 2
	1: 33
	x_domain: Array[2]
	0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
	1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
	*/

	// display date format
	var date_format = d3.time.format("%m-%d-%y");

	// create an svg container
	var vis = d3.select("#test-graph")
	.append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	// define the y scale (vertical)
	var yScale = d3.scale.linear()
	.domain(y_domain)
	.range([chartHeight, 0]);

	var xScale = d3.time.scale()
	.domain(x_domain)
	.range([0, chartWidth]);

	// define the y axis
	var yAxis = d3.svg.axis()
	.orient("left")
	.ticks(d3.range(y_domain[0], y_domain[1]).length)
	.scale(yScale);

	// define the x axis
	var xAxis = d3.svg.axis()
	.orient("bottom")
	.scale(xScale)
	.ticks(d3.time.days(x_domain[0], x_domain[1]).length)
	.tickFormat(date_format);

	vis.append("g")
	.attr("class", "axis")
	.attr("transform", "translate("+margin.left+"," + margin.top + ")")
	.call(yAxis)
	.selectAll('text')
	.style('text-anchor','middle');

	vis.append("g")
	.attr("class", "xaxis axis")
	.attr("transform", "translate(" +margin.left+ "," + (margin.top + chartHeight) + ")")
	.call(xAxis);
	}

	renderGraph();
	</script>


	<script id="jsbin-source-css" type="text/css">.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var testData = [
	{
	date: "2013-07-09",
	programs: 2
	},
	{
	date: "2013-07-10",
	programs: 4
	},
	{
	date: "2013-07-11",
	programs: 6
	},
	{
	date: "2013-07-12",
	programs: 8
	}
	];

	console.clear();

	function updateData(){
	//console.log(testData[3].programs);
	testData[3].programs = 12;

	d3.select("svg")
	.remove();


	renderGraph();
	}


	function renderGraph(){




	var margin = {top: 20, right: 16, bottom: 32, left: 64},
	width = 600, // width of svg
	height = 400, // height of svg
	chartWidth = width - margin.left - margin.right,
	chartHeight = height - margin.top - margin.bottom,
	parseDate = d3.time.format("%Y-%m-%d").parse;

	var data = testData;

	var x_domain = d3.extent(data, function(d) { return parseDate(d.date); }),
	y_domain = [0, d3.max(data, function(d) { return d.programs; })];

	/* get
	y_domain: Array[2]
	0: 2
	1: 33
	x_domain: Array[2]
	0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
	1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
	*/

	// display date format
	var date_format = d3.time.format("%m-%d-%y");

	// create an svg container
	var vis = d3.select("#test-graph")
	.append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	// define the y scale (vertical)
	var yScale = d3.scale.linear()
	.domain(y_domain)
	.range([chartHeight, 0]);

	var xScale = d3.time.scale()
	.domain(x_domain)
	.range([0, chartWidth]);

	// define the y axis
	var yAxis = d3.svg.axis()
	.orient("left")
	.ticks(d3.range(y_domain[0], y_domain[1]).length)
	.scale(yScale);

	// define the x axis
	var xAxis = d3.svg.axis()
	.orient("bottom")
	.scale(xScale)
	.ticks(d3.time.days(x_domain[0], x_domain[1]).length)
	.tickFormat(date_format);

	vis.append("g")
	.attr("class", "axis")
	.attr("transform", "translate("+margin.left+"," + margin.top + ")")
	.call(yAxis)
	.selectAll('text')
	.style('text-anchor','middle');

	vis.append("g")
	.attr("class", "xaxis axis")
	.attr("transform", "translate(" +margin.left+ "," + (margin.top + chartHeight) + ")")
	.call(xAxis);
	}

	renderGraph();</script></body>
	</html>