VictorDu/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Domine' rel='stylesheet' type='text/css'>
    <style>

        .chart-line {
            fill: none;
            stroke: #0000b0;
            stroke-width: 1px;
        }

        .axis text {
            font-family: 'Domine', cursive;
            font-size: 12pt;
        }
        .axis .label {
            font-size: 22pt;
        }

        .axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

    </style>
</head>
<body>
<script>

    var outerWidth = 1024;
    var outerHeight = 798;
    var margin = { left: 200, top: 20, right: 20, bottom: 100 };

    var xColumn = "median_income";
    var yColumn = "median_house_value";

    var xAxisLabelText = "median_income";
    var xAxisLabelOffset = 48;

    var yAxisLabelText = "median_house_value";
    var yAxisLabelOffset = 100;

    var innerWidth  = outerWidth  - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top  - margin.bottom;

    var svg = d3.select("body").append("svg")
            .attr("width", outerWidth)
            .attr("height", outerHeight);
    var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var path = g.append("path")
            .attr("class", "chart-line");

    var xAxisG = g.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + innerHeight + ")")
    var xAxisLabel = xAxisG.append("text")
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
            .attr("class", "label")
            .text(xAxisLabelText);

    var yAxisG = g.append("g")
            .attr("class", "y axis");
    var yAxisLabel = yAxisG.append("text")
            .style("text-anchor", "middle")
            .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
            .attr("class", "label")
            .text(yAxisLabelText);

    var xScale = d3.scale.linear().range([0, innerWidth]);
    var yScale = d3.scale.linear().range([innerHeight, 0]);

    var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
            .ticks(5)
            .outerTickSize(0);
    var yAxis = d3.svg.axis().scale(yScale).orient("left")
            .ticks(5)
            .tickFormat(d3.format("s"))
            .outerTickSize(0);

    var line = d3.svg.line()
            .x(function(d) { return xScale(d[xColumn]); })
            .y(function(d) { return yScale(d[yColumn]); });

    function render(data){
        data.sort(sortFunction);

        function sortFunction(a, b) {
            if (a.median_income === b.median_income) {
                return 0;
            }
            else {
                return (a.median_income < b.median_income) ? -1 : 1;
            }
        }


        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));

        xAxisG.call(xAxis);
        yAxisG.call(yAxis);

        path.attr("d", line(data));
    }

    function type(d){
        //console.log(d.median_income);
        d.median_income = +d.median_income;
        d.median_house_value = +d.median_house_value;
        return d;
    }

    d3.csv("https://gist.githubusercontent.com/VictorDu/fbd642275a936c99c90c/raw/412276f252fa93b23cd5c6d2f68e8fbb66fe2112/cadata.csv", type, render);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>D3 Example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Domine' rel='stylesheet' type='text/css'>
	<style>

	.chart-line {
	fill: none;
	stroke: #0000b0;
	stroke-width: 1px;
	}

	.axis text {
	font-family: 'Domine', cursive;
	font-size: 12pt;
	}
	.axis .label {
	font-size: 22pt;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>
	<body>
	<script>

	var outerWidth = 1024;
	var outerHeight = 798;
	var margin = { left: 200, top: 20, right: 20, bottom: 100 };

	var xColumn = "median_income";
	var yColumn = "median_house_value";

	var xAxisLabelText = "median_income";
	var xAxisLabelOffset = 48;

	var yAxisLabelText = "median_house_value";
	var yAxisLabelOffset = 100;

	var innerWidth = outerWidth - margin.left - margin.right;
	var innerHeight = outerHeight - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight);
	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var path = g.append("path")
	.attr("class", "chart-line");

	var xAxisG = g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + innerHeight + ")")
	var xAxisLabel = xAxisG.append("text")
	.style("text-anchor", "middle")
	.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
	.attr("class", "label")
	.text(xAxisLabelText);

	var yAxisG = g.append("g")
	.attr("class", "y axis");
	var yAxisLabel = yAxisG.append("text")
	.style("text-anchor", "middle")
	.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
	.attr("class", "label")
	.text(yAxisLabelText);

	var xScale = d3.scale.linear().range([0, innerWidth]);
	var yScale = d3.scale.linear().range([innerHeight, 0]);

	var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
	.ticks(5)
	.outerTickSize(0);
	var yAxis = d3.svg.axis().scale(yScale).orient("left")
	.ticks(5)
	.tickFormat(d3.format("s"))
	.outerTickSize(0);

	var line = d3.svg.line()
	.x(function(d) { return xScale(d[xColumn]); })
	.y(function(d) { return yScale(d[yColumn]); });

	function render(data){
	data.sort(sortFunction);

	function sortFunction(a, b) {
	if (a.median_income === b.median_income) {
	return 0;
	}
	else {
	return (a.median_income < b.median_income) ? -1 : 1;
	}
	}


	xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
	yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));

	xAxisG.call(xAxis);
	yAxisG.call(yAxis);

	path.attr("d", line(data));
	}

	function type(d){
	//console.log(d.median_income);
	d.median_income = +d.median_income;
	d.median_house_value = +d.median_house_value;
	return d;
	}

	d3.csv("https://gist.githubusercontent.com/VictorDu/fbd642275a936c99c90c/raw/412276f252fa93b23cd5c6d2f68e8fbb66fe2112/cadata.csv", type, render);
	</script>
	</body>
	</html>