Line Chart

by mpmckenna8

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

CSS

svg {
    margin-top:0px;
    margin-left:1%;
    display:grid;
    position:relative;
}
.leg {
    background-color:grey;
    height:auto;
    width:20%;
    float:right;
    margin-top:130px;
    position:absolute;
    margin-left:80%;
    z-index:2;
    min-height:300px;
}
.allie {
    background-color:pink;
    height:8px;
    width:15px;
    display:fixed;
    float:left;
    margin-left:5px;
    margin-right:4px;
    margin-top:5px;
}
.keyer {
    height:8px;
    width:15px;
    display:fixed;
    float:left;
    margin-left:5px;
    margin-right:4px;
    margin-top:5px;
}

JavaScript

var url = 'http://data.sfgov.org/resource/gxxq-x39z.json?$order=date ASC&$limit=5000'


 //'http://data.sfgov.org/resource/tmnf-yvry.json?$order=:date&$limit='+ numbRes

 d3.json(url, function (err, data) {
     if (err) {
         throw err
     }

     var infoG = _.groupBy(data, 'descript');

     var keys = Object.keys(infoG);

     console.log('keys count descript', keys.length)






     var sorted = _.sortBy(infoG, function (d) {

         //  console.log('sorting',d)

         return -d.length
     }) //.reverse()

     //  console.log(sorted);

     var colnum = 0;

     var color = d3.scale.category20();

     var names = keys;

     d3.select('body')
         .append('div')
         .html('<p>In the past 3 months there have been a total of ' + data.length + ' SFPD incidents reported with ' + keys.length + ' different descriptions. Below is the total crime reports plotted each day.  To plot a specific description scroll down and click on the one you would like and the scale will change for that value. If things are getting too cluttered click on a line to remove it.</p>')



     console.log('colors', color(0));

     data.map(function (d) {
         d.readDate = new Date(d.date * 1000)
     })

     var maxDay = d3.max(data, function (d) {
         //  console.log(new Date(d.date*1000).toString())
         return d.date
     })

     var maxRDay = d3.max(data, function (d) {
         //  console.log(new Date(d.date*1000).toString())
         return d.readDate
     })

     var minDay = d3.min(data, function (d) {
         return d.date
     })

     var readMax = new Date(maxDay * 1000)
     var readMin = new Date(minDay * 1000)


     var perDay = _.groupBy(data, 'date');

     var dayKeys = Object.keys(perDay);

     console.log(dayKeys)
     console.log(perDay)

     console.log('maxRDay', maxRDay);
     console.log(readMax)
     console.log(readMax.getMonth() + 1 + '/' + readMax.getDate() + '/' + readMax.getFullYear());
     console.log('minDay',...