D3 line graph example

this example takes an array of js objects and sorts them on 'activity' and 'date' then renders them in a graph

by jacobwsmith

CSS

.grid .tick line {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}

JavaScript

var dataset = [{"id":109, "time":1362145698957, "userName":"perky", "activity":"caught pacman"},
               {"id":110, "time":1362145696050, "userName":"pinky", "activity":"respawn"},
               {"id":111, "time":1362145553187, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1362145523957, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1362068521903, "userName":"perky", "activity":"respawn"},
               {"id":111, "time":1362067554943, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1362066127737, "userName":"perky", "activity":"change direction"},
               {"id":112, "time":1362063878087, "userName":"clyde", "activity":"caught pacman"},
               {"id":113, "time":1362060704480, "userName":"perky", "activity":"respawn"},
               {"id":114, "time":1362055941193, "userName":"perky", "activity":"caught pacman"},
               {"id":115, "time":1362053409677, "userName":"clyde", "activity":"caught pacman"},
               {"id":116, "time":1362050389927, "userName":"perky", "activity":"caught pacman"},
               {"id":117, "time":1362049688533, "userName":"perky", "activity":"caught pacman"},
               {"id":118, "time":1362048768800, "userName":"pinky", "activity":"respawn"},
               {"id":119, "time":1361984202243, "userName":"clyde", "activity":"respawn"},
               {"id":120, "time":1361983730340, "userName":"clyde", "activity":"caught pacman"},
               {"id":121, "time":1361982886800, "userName":"perky", "activity":"respawn"},
               {"id":122, "time":1361982415347, "userName":"perky", "activity":"change direction"},
               {"id":123, "time":1361981332543, "userName":"pinky", "activity":"caught pacman"},
               {"id":124, "time":1361873308440, "userName":"clyde", "activity":"change direction"}]

var dateFormat = d3.time.format("%x"),
    nestedData = d3.nest()
   ...