D3 graphs

by FrictionlessPulley

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>
<div id="question0"></div>
        <div id="question1"></div>

JavaScript

(function(){
   function drawQuestionGraph(id)
   {
       console.log('rendering question graph');
       var width    = 300;
       var height   = 300;
       var padding  = 20;
       var minRating = 0;
       var maxRating = 100;
       window.dictionary = {};
       
       _.each(calendarJson, function (i) { 
            window.dictionary[i._id] = new Date(i.publishedOn); 
       });
              
       function getDateTime(item){
           return window.dictionary[item.s];
       }
       
       var maxIndex = calendarJson.length - 1;
       var minDate = new Date(calendarJson[0].publishedOn);
       var maxDate = new Date(calendarJson[maxIndex].publishedOn);
       
       //scales
       console.log(minDate,maxDate);
       var scale = {
           X : d3.time.scale().domain([minDate, maxDate]).range([padding, width - padding]),
           Y : d3.scale.linear().domain([0,100]).range([height -padding, padding])
       };
       
       var lineBehavior = d3.svg
                            .line()
                            .x(function(d) { 
                                return scale.X(getDateTime(d));
                            })
                            .y(function(d) { 
                                return scale.Y(d.r);
                            });
        //scale for graph
       var axis = {
           X :d3.svg.axis().scale(scale.X).orient("bottom"),
           Y : d3.svg.axis().scale(scale.Y).orient("right")           
       };
       
       var svg = d3.select('body').append('svg').attr( { width : width, height : height });
       
       var dataset = responseJson[0].ratings;
       svg.append('g').call(axis.Y).attr('class', 'axis').attr('transform', 'translate(30,0)');
       svg.append('g').call(axis.X).attr('class', 'axis').attr('transform', 'translate(0,' + (height - padding) +')');
       var viz = svg.append('path').attr({
                    d: lineBehavior(dataset),
                    stroke: "purple",
                 ...