Simple Line Chart

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.

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js