Skip to content

Instantly share code, notes, and snippets.

@NPashaP
Last active December 27, 2019 04:55
  • Star 5 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save NPashaP/96447623ef4d342ee09b to your computer and use it in GitHub Desktop.
DashBoard
license: gpl-3.0

A simple example of creating a dashboard. This example was created for the paper Interactive HTML Reporting Using D3 at the MWSUG2014 conference.

  • Hovering over a bar in histogram will modify the pie chart and legend.
  • Hovering over pie slice will update the histogram.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
width:1060px;
margin:50px 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="http://d3js.org/d3.v3.min.js"></script>
<script>
function dashboard(id, fData){
var barColor = 'steelblue';
function segColor(c){ return {low:"#807dba", mid:"#e08214",high:"#41ab5d"}[c]; }
// compute total for each state.
fData.forEach(function(d){d.total=d.freq.low+d.freq.mid+d.freq.high;});
// 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 = 300 - 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 state.
var st = fData.filter(function(s){ return s.State == d[0];})[0],
nD = d3.keys(st.freq).map(function(s){ return {type:s, freq:st.freq[s]};});
// call update functions of pie-chart and legend.
pC.update(nD);
leg.update(nD);
}
function mouseout(d){ // utility function to be called on mouseout.
// reset the pie-chart and legend.
pC.update(tF);
leg.update(tF);
}
// 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;
}
// function to handle pieChart.
function pieChart(pD){
var pC ={}, pieDim ={w:250, h: 250};
pieDim.r = Math.min(pieDim.w, pieDim.h) / 2;
// create svg for pie chart.
var piesvg = d3.select(id).append("svg")
.attr("width", pieDim.w).attr("height", pieDim.h).append("g")
.attr("transform", "translate("+pieDim.w/2+","+pieDim.h/2+")");
// create function to draw the arcs of the pie slices.
var arc = d3.svg.arc().outerRadius(pieDim.r - 10).innerRadius(0);
// create a function to compute the pie slice angles.
var pie = d3.layout.pie().sort(null).value(function(d) { return d.freq; });
// Draw the pie slices.
piesvg.selectAll("path").data(pie(pD)).enter().append("path").attr("d", arc)
.each(function(d) { this._current = d; })
.style("fill", function(d) { return segColor(d.data.type); })
.on("mouseover",mouseover).on("mouseout",mouseout);
// create function to update pie-chart. This will be used by histogram.
pC.update = function(nD){
piesvg.selectAll("path").data(pie(nD)).transition().duration(500)
.attrTween("d", arcTween);
}
// Utility function to be called on mouseover a pie slice.
function mouseover(d){
// call the update function of histogram with new data.
hG.update(fData.map(function(v){
return [v.State,v.freq[d.data.type]];}),segColor(d.data.type));
}
//Utility function to be called on mouseout a pie slice.
function mouseout(d){
// call the update function of histogram with all data.
hG.update(fData.map(function(v){
return [v.State,v.total];}), barColor);
}
// Animating the pie-slice requiring a custom function which specifies
// how the intermediate paths should be drawn.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return arc(i(t)); };
}
return pC;
}
// function to handle legend.
function legend(lD){
var leg = {};
// create table for legend.
var legend = d3.select(id).append("table").attr('class','legend');
// create one row per segment.
var tr = legend.append("tbody").selectAll("tr").data(lD).enter().append("tr");
// create the first column for each segment.
tr.append("td").append("svg").attr("width", '16').attr("height", '16').append("rect")
.attr("width", '16').attr("height", '16')
.attr("fill",function(d){ return segColor(d.type); });
// create the second column for each segment.
tr.append("td").text(function(d){ return d.type;});
// create the third column for each segment.
tr.append("td").attr("class",'legendFreq')
.text(function(d){ return d3.format(",")(d.freq);});
// create the fourth column for each segment.
tr.append("td").attr("class",'legendPerc')
.text(function(d){ return getLegend(d,lD);});
// Utility function to be used to update the legend.
leg.update = function(nD){
// update the data attached to the row elements.
var l = legend.select("tbody").selectAll("tr").data(nD);
// update the frequencies.
l.select(".legendFreq").text(function(d){ return d3.format(",")(d.freq);});
// update the percentage column.
l.select(".legendPerc").text(function(d){ return getLegend(d,nD);});
}
function getLegend(d,aD){ // Utility function to compute percentage.
return d3.format("%")(d.freq/d3.sum(aD.map(function(v){ return v.freq; })));
}
return leg;
}
// calculate total frequency by segment for all state.
var tF = ['low','mid','high'].map(function(d){
return {type:d, freq: d3.sum(fData.map(function(t){ return t.freq[d];}))};
});
// calculate total frequency by state for all segment.
var sF = fData.map(function(d){return [d.State,d.total];});
var hG = histoGram(sF), // create the histogram.
pC = pieChart(tF), // create the pie-chart.
leg= legend(tF); // create the legend.
}
</script>
<script>
var freqData=[
{State:'AL',freq:{low:4786, mid:1319, high:249}}
,{State:'AZ',freq:{low:1101, mid:412, high:674}}
,{State:'CT',freq:{low:932, mid:2149, high:418}}
,{State:'DE',freq:{low:832, mid:1152, high:1862}}
,{State:'FL',freq:{low:4481, mid:3304, high:948}}
,{State:'GA',freq:{low:1619, mid:167, high:1063}}
,{State:'IA',freq:{low:1819, mid:247, high:1203}}
,{State:'IL',freq:{low:4498, mid:3852, high:942}}
,{State:'IN',freq:{low:797, mid:1849, high:1534}}
,{State:'KS',freq:{low:162, mid:379, high:471}}
];
dashboard('#dashboard',freqData);
</script>
@SjoerdH
Copy link

SjoerdH commented Aug 31, 2014

I'm a beginner at d3 and currently experimenting with the technology. I'm trying to get your great visualization to work with an external data source (CSV) with 'State' on the rows and 'high', 'mid' and 'low' as column headers. I just can't get the parsed data in the right format. The problem is with the freq object, I suspect it to be generated by a d3.nest function; however, instead of one object per row it returns an array of one object per row. Can you help me out?

var nested_data = d3.nest()
.key(function (d) { return d.State; })
.entries(csv_data);
nested_data.forEach(function (d) {
d.State = d.key;
d.freq = d.values;
console.log(nested_data)
});

@NPashaP
Copy link
Author

NPashaP commented Sep 22, 2014

Hey, sorry I just saw your comment. If you can send me a sample data, I can try to make it work.

@kubera
Copy link

kubera commented Mar 17, 2015

Hi, I just realized that there is a dependency on the order of the json-freq-array. For example, if you change freq:{low:162, mid:379, high:471} to freq:{high:471, low:162, mid:379} you will have some false numbers in the pie when you mouseover on a bar.
This is unexpected. But besides, nice work thus!

@AndyatGAO
Copy link

Hi Naushad,

Saw your dashboard, very good and I tried to adapt it to my own use, but one last hurdle, I can't get the histogram2 (2nd single pillar histogram) to shrink and rise with different values being fed, look at the
.attr("height", function(d) { return hG2Dim.h - y(d[1]); }) statement and can't figure why it's not responding.
Any ideas?

P.S. My script is below

Many Thanks

Andy

<style> body{ width:100% auto; margin:50px 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>
<script src="/globeatone/templates/uber/js/d3.min.js"></script> <script> function dashboard(id, fData, fData2){ var barColor = 'steelblue'; function segColor(c){ return {low:"#807dba", mid:"#e08214"}[c]; } // compute total for each Month. fData.forEach(function(d){d.total=d.freq.low+d.freq.mid;}); // compute total for each Month. fData2.forEach(function(d2){d2.total=d2.freq2.lower+d2.freq2.upper;}); // 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); // d.data.type = 'mid'; // d.data.freq = '23047'; // d.value = '23047'; // d.startAngle = '3.22821659819522'; // d.endAngle = '6.283185307179586'; // d.padAngle = '0'; //alert(JSON.stringify(d, null, 4)); // call the update function of histogram with new data. hG2.update(fData.map(function(v2){ return [st.Month,st.freq['mid']];}),segColor('mid')); // return [v2.Month,v2.freq[d.data.type]];}),segColor(d.data.type)); } 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; } // function to handle histogram2. function histoGram2(fD){ var hG2={}, hG2Dim = {t: 60, r: 0, b: 30, l: 0}; hG2Dim.w = 500 - hG2Dim.l - hG2Dim.r, hG2Dim.h = 300 - hG2Dim.t - hG2Dim.b; //create svg for histogram2. var hG2svg = d3.select(id).append("svg") .attr("width", hG2Dim.w + hG2Dim.l + hG2Dim.r) .attr("height", hG2Dim.h + hG2Dim.t + hG2Dim.b).append("g") .attr("transform", "translate(" + hG2Dim.l + "," + hG2Dim.t + ")"); // create function for x-axis mapping. var x = d3.scale.ordinal().rangeRoundBands([0, hG2Dim.w], 0.1) .domain(fD.map(function(d) { return d[0]; })); // Add x-axis to the histogram2 svg. hG2svg.append("g").attr("class", "x axis") .attr("transform", "translate(0," + hG2Dim.h + ")") .call(d3.svg.axis().scale(x).orient("bottom")); // Create function for y-axis map. var y = d3.scale.linear().range([hG2Dim.h, 0]) .domain([0, d3.max(fD, function(d) { return d[1]; })]); // Create bars for histogram2 to contain rectangles and freq labels. var bars = hG2svg.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 hG2Dim.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 temp. var st = fData.filter(function(s){ return s.Temp == d[0];})[0], nD = 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); } function mouseout(d){ // utility function to be called on mouseout. // reset the pie-chart and legend. pC.update(tF); leg.update(tF); } // create function to update the bars. This will be used by pie-chart. hG2.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 = hG2svg.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 hG2Dim.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 hG2; } // function to handle pieChart. function pieChart(pD){ var pC ={}, pieDim ={w:250, h: 250}; pieDim.r = Math.min(pieDim.w, pieDim.h) / 2; // create svg for pie chart. var piesvg = d3.select(id).append("svg") .attr("width", pieDim.w).attr("height", pieDim.h).append("g") .attr("transform", "translate("+pieDim.w/2+","+pieDim.h/2+")"); // create function to draw the arcs of the pie slices. var arc = d3.svg.arc().outerRadius(pieDim.r - 10).innerRadius(0); // create a function to compute the pie slice angles. var pie = d3.layout.pie().sort(null).value(function(d) { return d.freq; }); // Draw the pie slices. piesvg.selectAll("path").data(pie(pD)).enter().append("path").attr("d", arc) .each(function(d) { this._current = d; }) .style("fill", function(d) { return segColor(d.data.type); }) .on("mouseover",mouseover).on("mouseout",mouseout); // create function to update pie-chart. This will be used by histogram. pC.update = function(nD){ piesvg.selectAll("path").data(pie(nD)).transition().duration(500) .attrTween("d", arcTween); } // Utility function to be called on mouseover a pie slice. function mouseover(d){ // call the update function of histogram with new data. hG.update(fData.map(function(v){ return [v.Month,v.freq[d.data.type]];}),segColor(d.data.type)); // d.data.type = 'mid'; // d.data.freq = '23047'; // d.value = '23047'; // d.startAngle = '3.22821659819522'; // d.endAngle = '6.283185307179586'; // d.padAngle = '0'; //alert(JSON.stringify(d, null, 4)); // call the update function of histogram with new data. hG2.update(fData.map(function(v2){ return [v2.Month,v2.freq[d.data.type]];}),segColor(d.data.type)); } //Utility function to be called on mouseout a pie slice. function mouseout(d){ // call the update function of histogram with all data. hG.update(fData.map(function(v){ return [v.Month,v.total];}), barColor); } // Animating the pie-slice requiring a custom function which specifies // how the intermediate paths should be drawn. function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; } return pC; } // function to handle pieChart2. function pieChart2(pD){ var pC2={}, hG2Dim = {t: 60, r: 0, b: 30, l: 0}; hG2Dim.w = 500 - hG2Dim.l - hG2Dim.r, hG2Dim.h = 300 - hG2Dim.t - hG2Dim.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"); // create function to update the bars. This will be used by pie-chart. hG2.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 = hG2svg.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 hG2Dim.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 pC2; } // function to handle legend. function legend(lD){ var leg = {}; // create table for legend. var legend = d3.select(id).append("table").attr('class','legend'); // create one row per segment. var tr = legend.append("tbody").selectAll("tr").data(lD).enter().append("tr"); // create the first column for each segment. tr.append("td").append("svg").attr("width", '16').attr("height", '16').append("rect") .attr("width", '16').attr("height", '16') .attr("fill",function(d){ return segColor(d.type); }); // create the second column for each segment. tr.append("td").text(function(d){ return d.type;}); // create the third column for each segment. tr.append("td").attr("class",'legendFreq') .text(function(d){ return d3.format(",")(d.freq);}); // create the fourth column for each segment. tr.append("td").attr("class",'legendPerc') .text(function(d){ return getLegend(d,lD);}); // Utility function to be used to update the legend. leg.update = function(nD){ // update the data attached to the row elements. var l = legend.select("tbody").selectAll("tr").data(nD); // update the frequencies. l.select(".legendFreq").text(function(d){ return d3.format(",")(d.freq);}); // update the percentage column. l.select(".legendPerc").text(function(d){ return getLegend(d,nD);}); } function getLegend(d,aD){ // Utility function to compute percentage. return d3.format("%")(d.freq/d3.sum(aD.map(function(v){ return v.freq; }))); } return leg; } // calculate total frequency by segment for all Month. var tF = ['low','mid'].map(function(d){ return {type:d, freq: d3.sum(fData.map(function(t){ return t.freq[d];}))}; }); // calculate total frequency by segment for all Month. var tF2 = ['low','mid'].map(function(d){ return {type:d, freq: d3.sum(fData.map(function(t){ return t.freq[d];}))}; }); // calculate total frequency by Month for all segment. var sF = fData.map(function(d){return [d.Month,d.total];}); var sF2 = fData2.map(function(d2){return [d2.TempRange,d2.total];}); var hG = histoGram(sF), // create the histogram. hG2 = histoGram2(sF2), // create the histogram. // pC2 = pieChart2(tF), // create the pie-chart. pC = pieChart(tF), // create the pie-chart. leg= legend(tF); // create the legend. } </script> <script> var freqData=[ {Month:'Jan',freq:{low:1101, mid:1319}} ,{Month:'Feb',freq:{low:6886, mid:412}} ,{Month:'Mar',freq:{low:932, mid:2149}} ,{Month:'Apr',freq:{low:832, mid:1152}} ,{Month:'May',freq:{low:4481, mid:3304}} ,{Month:'Jun',freq:{low:1619, mid:167}} ,{Month:'Jul',freq:{low:1819, mid:247}} ,{Month:'Aug',freq:{low:4498, mid:3852}} ,{Month:'Sep',freq:{low:797, mid:1849}} ,{Month:'Oct',freq:{low:162, mid:379}} ,{Month:'Nov',freq:{low:727, mid:4259}} ,{Month:'Dec',freq:{low:500, mid:3958}} ]; var freqData2=[ {TempRange:'Low',freq2:{lower:1234, upper:5678}} //,{TempRange:'High',freq2:{lower:2468, upper:8888}} ]; dashboard('#dashboard',freqData,freqData2); </script>

@suresh0x03
Copy link

hi, i'm a beginner at D3 and trying to add the funcitonality of displaying the frequency labels for the pie chart. can you help me out

Copy link

ghost commented May 12, 2016

Hi, Dear Sr NPashaP, I sow your codes on "https://github.com/NPashaP/BiPartite" about "BiPartite visualization" and I want to use of that. Because that is so usefull for my data in order to visualization. But I have a problem. I want to have 5 diagram like that in pne page (your codes have only 2 diagram in one page). can you please help me how can change it?
thank you a lot- Jahani

@shorty2hops
Copy link

hi, great example, i wanted to ask you how to create the bar to go past the 0 mark and make a negative Y axis.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment