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>