testing vertical lines

_.md

[ Launch: test ] 7a8d34246b24d6bbcbe7 by cvargasm
[ Launch: test ] ded1f8645bfae584dfe9 by cvargasm
[ Launch: test ] ed76258becad4a422555 by cvargasm

config.json

{"description":"testing vertical lines","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsc":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data3.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

data2.json

[{ "points":[
  
{"date":"2011-10-19","value":"3980000"},
{"date":"2011-10-18","value":"4220024"},
{"date":"2011-10-17","value":"4190099"},
{"date":"2011-10-14","value":"4220000"},
{"date":"2011-10-13","value":"4080043"},
{"date":"2011-10-12","value":"4020019"},
{"date":"2011-10-11","value":"4000029"},
{"date":"2011-10-10","value":"3880081"},
{"date":"2011-10-07","value":"3690800"},
{"date":"2011-10-06","value":"3770370"},
{"date":"2011-10-05","value":"3780205"},
{"date":"2011-10-04","value":"3720500"},
{"date":"2011-10-03","value":"3740060"}
  
]}]

data3.json

[{ "date":"2011-10-14","label":"A"},{"date":"2011-10-09","label":"B"}]

inlet.js

			var rawData = tributary.data2;
            var rawEvents = tributary.data3;
            var metricName = rawData[0].metricLabel;


            //Date parser for the JSON object
            var parseDate = d3.time.format("%Y-%m-%d").parse;

            //Transforming the data to its corresponding data types
            var data = rawData[0].points;
            data.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +parseFloat(d.value) / 1000000;
            });
            
            var minDate = d3.min(data.map(function(d){return d.date;}));
            var maxDate = d3.max(data.map(function(d){return d.date;}));
            
            var events = [];
            rawEvents.forEach(function(d) {
            	if(minDate <= parseDate(d.date) && parseDate(d.date) <= maxDate) {
            		events.push(d);
            	}
            });

            //Creating the magins for the brush and chart
            var margin = {top: 30, right: 10, bottom: 100, left: 40};
            var marginBrush = {top: 430, right: 10, bottom: 20, left: 40};
            var width = 960 - margin.left - margin.right;
            var height = 500 - margin.top - margin.bottom;
            var heightBrush = 500 - marginBrush.top - marginBrush.bottom;

            //Creating the required scales for the chart and brush
            var x = d3.time.scale().range([0, width]);
            var xBrush = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);
            var yBrush = d3.scale.linear().range([heightBrush, 0]);

            //creating the axis (two for the chart one for the brush)
            var xAxis = d3.svg.axis().scale(x).orient("bottom");
            var xAxisBrush = d3.svg.axis().scale(xBrush).orient("bottom");
            var yAxis = d3.svg.axis().scale(y).orient("left");

            //Creating the brush
            var brush = d3.svg.brush()
                .x(xBrush)
                .on("brush", brushed);

            //States the functions to be used when rendering the chart's line
            var line = d3.svg.line().x(function(d) { return x(d.date); }).y(function(d) { return y(d.value); });

            //States the functions to be used when rendering the brush's line
            var lineBrush = d3.svg.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return yBrush(d.value); });

            //selecting the page's svg and setting its width and height
            var svg = d3.select("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom);

            //Creating a new group that manages the display of the chart
            var focus = svg.append("g")
                .attr("class", "focus")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            //Create a new group used to manage the display of the brush
            var context = svg.append("g")
                .attr("class", "context")
                .attr("transform", "translate(" + marginBrush.left + "," + marginBrush.top + ")");

            //setting the domains
            x.domain(d3.extent(data.map(function(d) { return d.date; })));
            y.domain(d3.extent(data.map(function(d) { return d.value; })));
            xBrush.domain(x.domain());
            yBrush.domain(y.domain());

            var lineEvents = [];
            var lineEventsBrush = [];
            events.forEach(function(d) {
                var tempLine = [];
              tempLine.push({date:d.date,label:d.label,value:y.domain()[0]});
                tempLine.push({date:d.date,label:d.label,value:y.domain()[1]});
                lineEvents.push(tempLine);
                tempLine = [];
                tempLine.push({date:d.date,label:d.label,value:yBrush.domain()[0]});
                tempLine.push({date:d.date,label:d.label,value:yBrush.domain()[1]});
                lineEventsBrush.push(tempLine);
            });

            lineEvents.forEach(function(a) {
              a.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +parseFloat(d.value);
              })
            });

            lineEventsBrush.forEach(function(a) {
              a.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +parseFloat(d.value);
              })
            });
            var allEvents = [];
            allEvents = allEvents.concat.apply(allEvents, lineEvents);
            //Horribly innefficient. Need to change.
            var xAxisEvents = d3.svg.axis().scale(x).orient("top").tickValues(allEvents.map(function(d) { return d.date; }))
                 .tickFormat(function(d,i) {return allEvents.filter(function(c) { return c.date === d })[0].label;});

            //creates the chart's line
            focus.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);

            lineEvents.forEach(function(d) {
                 focus.append("path")
                     .datum(d)
                     .attr("class","event")
                     .attr("d", line)
             });

            focus.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            
            focus.append("g")
                .attr("class","x axis")
                .call(xAxisEvents)

            focus.append("g")
                .attr("class", "y axis")
                .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text(metricName + (" (MM)"));

focus.append("g")

            //Creates the brush's line
            context.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", lineBrush);

            lineEventsBrush.forEach(function(d) {
               context.append("path")
                .datum(d)
                .attr("class","event")
                .attr("d", line);
            });

            context.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + heightBrush + ")")
                .call(xAxisBrush);

            context.append("g")
                .attr("class", "x brush")
                .call(brush)
              .selectAll("rect")
                .attr("y", -6)
                .attr("height", heightBrush + 7);

            //Function executed when the brush event is triggered
            function brushed() {
              
              x.domain(brush.empty() ? xBrush.domain() : brush.extent());
              d3.select("#since").text(x.domain()[0].toISOString().substring(0,10));
              d3.select("#until").text(x.domain()[1].toISOString().substring(0,10));
              focus.select(".line").attr("d", line);
              focus.selectAll(".event").attr("d", line);
              focus.select(".x.axis").call(xAxis);
            }

            function type(d) {
              d.date = parseDate(d.date);
              d.value = +d.value;
              return d;
            }

style.css

 svg {
  font: 10px sans-serif;
}

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

 .brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

 .x.axis path {
  display: none;
}

 .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

 .event {
  fill: none;
  stroke: black;
  stroke-width: 0.5px;
}