Study Diff Between My Code and Lars

http://stackoverflow.com/questions/22717976/add-dots-on-a-multi-line-d3-js-graph-with-nested-data

by Nivaldo

CSS

body {


    font: 10px sans-serif;


}


.axis path, .axis line {


    fill: none;


    stroke: #000;


    shape-rendering: crispEdges;


}


.x.axis path {


    display: none;


}


.line {


    fill: none;


    stroke: steelblue;


    stroke-width: 1.5px;


}

JavaScript

var data = [
    {
        "City": "New York",
        "Data": [
            {
                "Date": "20111001",
                "Value": "63.4"
            },
            {
                "Date": "20111002",
                "Value": "58.0"
            },
            {
                "Date": "20111003",
                "Value": "53.3"
            },
            {
                "Date": "20111004",
                "Value": "56.3"
            }
        ]
    },
    {
        "City": "San Francisco",
        "Data": [
            {
                "Date": "20111001",
                "Value": "62.7"
            },
            {
                "Date": "20111002",
                "Value": "59.9"
            },
            {
                "Date": "20111003",
                "Value": "59.1"
            },  {
                "Date": "20111004",
                "Value": "52.1"
            }
        ]
    },
    {
        "City": "Austin",
        "Data": [
            {
                "Date": "20111001",
                "Value": "72.2"
            },
            {
                "Date": "20111002",
                "Value": "67.7"
            },
            {
                "Date": "20111003",
                "Value": "69.4"
            }
        ]
    }
];

var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
},
width = 360 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("linear")
    .x(function (d) {
    return x(d.Date);
})
    .y(function (d) {
    return y(d.Value);
});


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left +...