how to display rowchart in dc.js - d3.js

Question

I'm making a rowchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. i am displaying rowchart for us population. how to display top 10 counties population in us and top less 10 counties counties of popualtion.Thanx

Answer 1

Stack Overflow is about helping peoples with what they've tried.
It doesn't encourage spoon feeding.
Here's a list of few website which will you help you through the basic blocks of d3.
Moving onto dc.js. It is a wonderful multi-dimensional charting javascript library.
dc.js - Here's the official website.
Annotated Source - For the charts in the dc.js website.
Code Project - And here's another website where I learned step by step dc.js.
Fiddle - For creating a pie chart using dc.js.
Steps :
You need to load the following libraries and css files -
d3.js
crossfilter.js
dc.js
dc.css
This code is using the crossfilter js.
var ndx = crossfilter(data);
Here I'm parsing the data.
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.total= d.http_404+d.http_200+d.http_302;
d.Year=d.date.getFullYear();
});
Here we are creating a dimension for the year and we get the sum of total column.
var yearDim = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.total;});
And through this block of code we create a pie chart in the div.
var yearRingChart = dc.pieChart("#chart-ring-year");
yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
.innerRadius(30);
Finally at the end of all the charts we create, this is the code that renders all the chart to the browser.
dc.renderAll();
To make a row chart just simply change the pie chart to row chart something like this.
var yearRingChart = dc.rowChart("#chart-ring-year");
And remove the innerRadius property which we do not have for a row chart.
yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
By changing it you'll be having a row chart.
And here's a complete fiddle with a rowChart.
Hope this helps.