phil-pedruco/data.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    Answer to this stackoverflow question which really just needed a bit of work to the forEach loop.  Also, the gist was created from the command line using gist-put by Andy Winterman.

  
## data.csv

          
            first
            second

            
                2
              2

            
                3
              3

            
                4
              4

            
                5
              4

            
                5.5
              5

            
                6
              6

            
                6
              7

            
                6.5
              8

            
                6.5
              16

            
                17
              16

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>D3 test</title>
    <style>
    .grid .tick {
        stroke: lightgrey;
        opacity: 0.7;
    }
    .grid path {
        stroke-width: 0;
    }
    .chart {
    }
    .main text {
        font: 10px sans-serif;
    }
    .axis line, .axis path {
        shape-rendering: crispEdges;
        stroke: black;
        fill: none;
    }
    circle {
        fill: steelblue;
    }
    </style>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
</head>

<body>
    <div class='content'>
        <!-- /the chart goes here -->
    </div>
</body>
<script type="text/javascript">

var data = [];

d3.csv("data.csv", function(csvData) {

    csvData.forEach(function (d,i) {
        data[i] = {
          first: +d.first,
          second: +d.second
        }
    });
    console.log(data);


    var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);

    var margin = {
        top: 20,
        right: 15,
        bottom: 60,
        left: 25
    }, width = 950 - margin.left - margin.right,
        height = 480 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {
            return d.first;
        })])
        .range([0, width]);

    var y = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {
            return d.second;
        })])
    //.range([height, 0]) //flip y
    .range([0, height]);

    var chart = d3.select('body')
        .append('svg:svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .attr('class', 'chart');

    var main = chart.append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'main');

    // draw the x axis
    var xAxis = d3.svg.axis()
        .scale(x)
    //.orient('bottom')
    .orient('top'); // adjust ticks to new x axis position

    main.append('g')
    //.attr('transform', 'translate(0,' + height + ')')
    .attr('transform', 'translate(0,0)') // move x axis up
    .attr('class', 'main axis date')
        .call(xAxis);

    // draw the y axis
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

    main.append('g')
        .attr('transform', 'translate(0,0)')
        .attr('class', 'main axis date')
        .call(yAxis);

    var g = main.append("svg:g");

    g.selectAll("scatter-dots")
        .data(data)
        .enter().append("svg:circle")
        .attr("cx", function(d, i) {
            return x(d.first);
        })
        .attr("cy", function(d) {
            return y(d.second);
        })
        .attr("r", 5)
        .style("fill", function(d,i) {
            return color(i);
        });

    // begin of drawing lines
    var line = d3.svg.line()
        .x(function(d) {
            return x(d.first)
        })
        .y(function(d) {
            return y(d.second);
        })
        .interpolate("linear");

    g.append("path")
        .attr("d", function(d) {
            return line(data)
        })
        .attr("transform", "translate(0,0)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
    // end of drawing lines

    main.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_axis()
            .tickSize(-height, 0, 0)
            .tickFormat(""))

    main.append("g")
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-width, 0, 0)
            .tickFormat(""))

    function make_x_axis() {
        return d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(30)
    }

    function make_y_axis() {
        return d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(17)
    }
});
</script>


</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>D3 test</title>
	<style>
	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}
	.grid path {
	stroke-width: 0;
	}
	.chart {
	}
	.main text {
	font: 10px sans-serif;
	}
	.axis line, .axis path {
	shape-rendering: crispEdges;
	stroke: black;
	fill: none;
	}
	circle {
	fill: steelblue;
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	</head>

	<body>
	<div class='content'>
	<!-- /the chart goes here -->
	</div>
	</body>
	<script type="text/javascript">

	var data = [];

	d3.csv("data.csv", function(csvData) {

	csvData.forEach(function (d,i) {
	data[i] = {
	first: +d.first,
	second: +d.second
	}
	});
	console.log(data);



	var color = d3.scale.ordinal().range(["#b41f2d", "#ff7f0e"]);

	var margin = {
	top: 20,
	right: 15,
	bottom: 60,
	left: 25
	}, width = 950 - margin.left - margin.right,
	height = 480 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.domain([0, d3.max(data, function(d) {
	return d.first;
	})])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, d3.max(data, function(d) {
	return d.second;
	})])
	//.range([height, 0]) //flip y
	.range([0, height]);

	var chart = d3.select('body')
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart');

	var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main');

	// draw the x axis
	var xAxis = d3.svg.axis()
	.scale(x)
	//.orient('bottom')
	.orient('top'); // adjust ticks to new x axis position

	main.append('g')
	//.attr('transform', 'translate(0,' + height + ')')
	.attr('transform', 'translate(0,0)') // move x axis up
	.attr('class', 'main axis date')
	.call(xAxis);

	// draw the y axis
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

	main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

	var g = main.append("svg:g");

	g.selectAll("scatter-dots")
	.data(data)
	.enter().append("svg:circle")
	.attr("cx", function(d, i) {
	return x(d.first);
	})
	.attr("cy", function(d) {
	return y(d.second);
	})
	.attr("r", 5)
	.style("fill", function(d,i) {
	return color(i);
	});

	// begin of drawing lines
	var line = d3.svg.line()
	.x(function(d) {
	return x(d.first)
	})
	.y(function(d) {
	return y(d.second);
	})
	.interpolate("linear");

	g.append("path")
	.attr("d", function(d) {
	return line(data)
	})
	.attr("transform", "translate(0,0)")
	.style("stroke-width", 2)
	.style("stroke", "steelblue")
	.style("fill", "none");
	// end of drawing lines

	main.append("g")
	.attr("class", "grid")
	.attr("transform", "translate(0," + height + ")")
	.call(make_x_axis()
	.tickSize(-height, 0, 0)
	.tickFormat(""))

	main.append("g")
	.attr("class", "grid")
	.call(make_y_axis()
	.tickSize(-width, 0, 0)
	.tickFormat(""))

	function make_x_axis() {
	return d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(30)
	}

	function make_y_axis() {
	return d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(17)
	}
	});
	</script>



	</html>