app/current/current_view.js
//add or update D3 chart panel data
add or update D3 chart panel data
add or update D3 chart panel data
function updateD3Chart() {
            var datasets = [];
            var datasetsLabel = [];
            var dataset;
            var index, len;
            var location;
            var colorsLow = ['lightgreen', 'pink', 'lightblue', 'white'];
            var colorsHigh = ['green', 'red', 'blue', 'purple'];
            var largestDataSetLen = 0;
            for (index = 0, len = $scope.compareLocations.length; index < len; ++index) {
                location = getLocationById($scope.compareLocations[index]);
                datasets.push(_.map(location.history, function (n) {
                        return kelvinToFahrenheit(n.main.temp);
                    })
                );
                datasetsLabel.push(_.map(location.history, function (n) {
                        return n.dt;
                    })
                );
                if(datasets[index].length > largestDataSetLen){
                    largestDataSetLen = datasets[index].length;
                }
            }
            var margin = {top:25,right:5,bottom:5,left:35}
            var totalWidth = 835;
            var totalHeight = 300;
            for (index = 0, len = datasets.length; index < len; ++index) {
                dataset = datasets[index];
                var w = 835 - margin.left - margin.right;
                var h = totalHeight/len - margin.top - margin.bottom;
                var svg = d3.select('#chartArea')
                    .append('svg')
                    .attr('width', w + margin.left + margin.right)
                    .attr('height', h + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
                var xScale = d3.scale.ordinal()
                    .domain(dataset)
                    .rangeBands([0, w], 0.1, 0)
                var allData = _.flatten(datasets);
                var yScale = d3.scale.linear()
                    .domain([d3.min(allData),d3.max(allData)])
                    .range([h,0]);
                var colorScale = d3.scale.linear()
                    .domain([d3.min(allData), d3.max(allData) ])
                    .range([colorsHigh[index], colorsLow[index]]);
                var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient('left')
                    .ticks(20/len)
                    .innerTickSize(1)
                    .outerTickSize(2)
                    .tickPadding(5);
                var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient('top')
                    .ticks(8)
                    .innerTickSize(1)
                    .outerTickSize(2)
                    .tickPadding(5);
                svg.append('g')
                    .attr('class', 'y axis')
                    .call(yAxis);
                    svg.append('g')
                        .attr('class', 'x axis')
                        .call(xAxis);
                svg.selectAll('rect')
                    .data(dataset)
                    .enter()
                    .append('rect')
                    .attr('class', 'bar')
                    .attr('x', function (d, i) {
                        return xScale(d);
                    })
                    .attr('y', function (d) {
                        return h-yScale(d);
                    })
                    .attr('width', xScale.rangeBand())
                    .attr('height', function (d) {
                        return yScale(d);
                    })
                    .attr('fill', colorScale)
                    .on('mouseover', function(d){
                        d3.select(this).classed('overState', true)
                    })
                    .on('mouseout', function(d){
                        d3.select(this).classed('overState', false)
                    });
            }
        }
function updateD3Chart ( ) { var datasets = [ ] ; var datasetsLabel = [ ] ; var dataset ; var index , len ; var location ; var colorsLow = [ 'lightgreen' , 'pink' , 'lightblue' , 'white' ] ; var colorsHigh = [ 'green' , 'red' , 'blue' , 'purple' ] ; var largestDataSetLen = 0 ; for ( index = 0 , len = $scope . compareLocations . length ; index < len ; ++ index ) { location = getLocationById ( $scope . compareLocations [ index ] ) ; datasets . push ( _ . map ( location . history , function ( n ) { return kelvinToFahrenheit ( n . main . temp ) ; } ) ) ; datasetsLabel . push ( _ . map ( location . history , function ( n ) { return n . dt ; } ) ) ; if ( datasets [ index ] . length > largestDataSetLen ) { largestDataSetLen = datasets [ index ] . length ; } } var margin = { top : 25 , right : 5 , bottom : 5 , left : 35 } var totalWidth = 835 ; var totalHeight = 300 ; for ( index = 0 , len = datasets . length ; index < len ; ++ index ) { dataset = datasets [ index ] ; var w = 835 - margin . left - margin . right ; var h = totalHeight / len - margin . top - margin . bottom ; var svg = d3 . select ( '#chartArea' ) . append ( 'svg' ) . attr ( 'width' , w + margin . left + margin . right ) . attr ( 'height' , h + margin . top + margin . bottom ) . append ( 'g' ) . attr ( 'transform' , 'translate(' + margin . left + ', ' + margin . top + ')' ) ; var xScale = d3 . scale . ordinal ( ) . domain ( dataset ) . rangeBands ( [ 0 , w ] , 0.1 , 0 ) var allData = _ . flatten ( datasets ) ; var yScale = d3 . scale . linear ( ) . domain ( [ d3 . min ( allData ) , d3 . max ( allData ) ] ) . range ( [ h , 0 ] ) ; var colorScale = d3 . scale . linear ( ) . domain ( [ d3 . min ( allData ) , d3 . max ( allData ) ] ) . range ( [ colorsHigh [ index ] , colorsLow [ index ] ] ) ; var yAxis = d3 . svg . axis ( ) . scale ( yScale ) . orient ( 'left' ) . ticks ( 20 / len ) . innerTickSize ( 1 ) . outerTickSize ( 2 ) . tickPadding ( 5 ) ; var xAxis = d3 . svg . axis ( ) . scale ( xScale ) . orient ( 'top' ) . ticks ( 8 ) . innerTickSize ( 1 ) . outerTickSize ( 2 ) . tickPadding ( 5 ) ; svg . append ( 'g' ) . attr ( 'class' , 'y axis' ) . call ( yAxis ) ; svg . append ( 'g' ) . attr ( 'class' , 'x axis' ) . call ( xAxis ) ; svg . selectAll ( 'rect' ) . data ( dataset ) . enter ( ) . append ( 'rect' ) . attr ( 'class' , 'bar' ) . attr ( 'x' , function ( d , i ) { return xScale ( d ) ; } ) . attr ( 'y' , function ( d ) { return h - yScale ( d ) ; } ) . attr ( 'width' , xScale . rangeBand ( ) ) . attr ( 'height' , function ( d ) { return yScale ( d ) ; } ) . attr ( 'fill' , colorScale ) . on ( 'mouseover' , function ( d ) { d3 . select ( this ) . classed ( 'overState' , true ) } ) . on ( 'mouseout' , function ( d ) { d3 . select ( this ) . classed ( 'overState' , false ) } ) ; } }
add or update D3 chart panel data
add or update D3 chart panel data
//static mock data //    var dataset = [1, 31, 42, 35, 23, 55, 32, 44, 36]; //get location object //map the temprature sets into an array //allData is used for global chart metrics //if(index === 0){ //.attr('transform', 'translate(' + margin.left + ', ' + h + ')') //}