Responsive charts

42 views

Skip to first unread message

AndyGAO

unread,

Jun 2, 2015, 6:37:20 PM6/2/15

to d3...@googlegroups.com

Hi there,

I managed to get this basic chart working, but cant get it t be responsive,any ideas how?

Many thanks

Andy

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#body{
width:100% auto;
margin:0px auto;
}

path { stroke: #fff; }
path:hover { opacity:0.9; }
rect:hover { fill:blue; }
.axis { font: 10px sans-serif; }
.legend tr{ border-bottom:1px solid grey; }
.legend tr:first-child{ border-top:1px solid grey; }

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

.x.axis path { display: none; }
.legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
.legend td{
    padding:4px 5px;
    vertical-align:bottom;
}
.legendFreq, .legendPerc{
    align:right;
    width:50px;
}

</style>
<body>
<div id='dashboard'>
</div>
<script src=".../js/d3.min.js"></script>
<script>
function dashboard(id, fData, fData2, fData3){
    var barColor = 'steelblue';
    function segColor(c){ return {low:"#807dba", mid:"#e08214"}[c]; }

    // compute total for each Month.
    fData.forEach(function(d){d.total=100;});

// compute total for each Month.
fData2.forEach(function(d2){d2.total=d2.freq2.lower+d2.freq2.upper;});

    // compute total for each Month.
    fData3.forEach(function(d3){d3.total=d3.freq3.lower2+d3.freq3.upper2;});

    // function to handle histogram.
    function histoGram(fD){
        var hG={},    hGDim = {t: 60, r: 0, b: 30, l: 0};
        hGDim.w = 500 - hGDim.l - hGDim.r,
        hGDim.h = 150 - hGDim.t - hGDim.b;

        //create svg for histogram.
        var hGsvg = d3.select(id).append("svg")
            .attr("width", hGDim.w + hGDim.l + hGDim.r)
            .attr("height", hGDim.h + hGDim.t + hGDim.b).append("g")
            .attr("transform", "translate(" + hGDim.l + "," + hGDim.t + ")");

        // create function for x-axis mapping.
        var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
                .domain(fD.map(function(d) { return d[0]; }));

        // Add x-axis to the histogram svg.
        hGsvg.append("g").attr("class", "x axis")
            .attr("transform", "translate(0," + hGDim.h + ")")
            .call(d3.svg.axis().scale(x).orient("bottom"));

        // Create function for y-axis map.
        var y = d3.scale.linear().range([hGDim.h, 0])
                .domain([0, d3.max(fD, function(d) { return d[1]; })]);

        // Create bars for histogram to contain rectangles and freq labels.
        var bars = hGsvg.selectAll(".bar").data(fD).enter()
                .append("g").attr("class", "bar");

        //create the rectangles.
        bars.append("rect")
            .attr("x", function(d) { return x(d[0]); })
            .attr("y", function(d) { return y(d[1]); })
            .attr("width", x.rangeBand())
            .attr("height", function(d) { return hGDim.h - y(d[1]); })
            .attr('fill',barColor)
            .on("mouseover",mouseover)// mouseover is defined below.
            .on("mouseout",mouseout);// mouseout is defined below.

        //Create the frequency labels above the rectangles.
//        bars.append("text").text(function(d){ return d3.format(",")(d[1])})
//            .attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
//            .attr("y", function(d) { return y(d[1])-5; })
//            .attr("text-anchor", "middle");
//
        function mouseover(d){ // utility function to be called on mouseover.

            // filter for selected Month.
            var st = fData.filter(function(s){ return s.Month == d[0];})[0],
                nD = d3.keys(st.freq).map(function(s){ return {type:s, freq:st.freq[s]};});
                nD2 = d3.keys(st.freq2).map(function(s){ return {type:s, freq2:st.freq2[s]};});

            // call update functions of pie-chart and legend.
            pC.update(nD);
            leg.update(nD);

           // call the update function of histogram with new data.
            hG2.update(fData.map(function(v2){
                return [st.Month,st.freq['mid']];}),segColor('mid'));

           // call the update function of histogram with new data.
            hG3.update(fData.map(function(v3){
                return [st.Month,st.freq['low']];}),segColor('low'));

}

        function mouseout(d){    // utility function to be called on mouseout.
            // reset the pie-chart and legend.
            pC.update(tF);
            leg.update(tF);

            // call the update function of histogram with all data.
            hG2.update(fData.map(function(v2){
                return [st.Month,v2.total];}), barColor);

}

        // create function to update the bars. This will be used by pie-chart.
        hG.update = function(nD, color){
            // update the domain of the y-axis map to reflect change in frequencies.
            y.domain([0, d3.max(nD, function(d) { return d[1]; })]);

            // Attach the new data to the bars.
            var bars = hGsvg.selectAll(".bar").data(nD);

            // transition the height and color of rectangles.
            bars.select("rect").transition().duration(500)
                .attr("y", function(d) {return y(d[1]); })
                .attr("height", function(d) { return hGDim.h - y(d[1]); })
                .attr("fill", color);

            // transition the frequency labels location and change value.
            bars.select("text").transition().duration(500)
                .text(function(d){ return d3.format(",")(d[1])})
                .attr("y", function(d) {return y(d[1])-5; });
        }
        return hG;
    }

    // calculate total frequency by Month for all segment.
    var sF = fData.map(function(d){return [d.Month,d.total];});
    var hG = histoGram(sF); // create the histogram.

}
</script>

var freqData2=[
{TempRange:'Low',freq2:{lower:1234, upper:5678}}
];

var freqData3=[
{TempRange2:'High',freq3:{lower2:1234, upper2:5678}}
];

dashboard('#dashboard',freqData,freqData2,freqData3);

</script>
</body>

Reply all

Reply to author

Forward

0 new messages