----------------------------------------------------------
Why, if we've just explored the benefits of crossfilter are we now introducing a completely different JavaScript library (dc.js)?
Well, crossfilter isn't a library that's designed to draw graphs. It's designed to manipulate data. D3.js is a library that's designed to manipulate graphical objects (and more) on a web page. The two of them will work really well together, but the barrier to getting data onto a web page can be slightly daunting because the combination of two non-trivial technologies can be difficult to achieve.
This is where dc.js comes in. It was developed by Nick Qi Zhu and the first version was released on the 7th of July 2012.
Dc.js is designed to be an enabler for both libraries. Taking the power of crossfilter's data manipulation capabilities and integrating the graphical capabilities of d3.js.
It is designed to provide access to a range of different chart types in a relatively easy to use fashion. It is more limited in the range of options available for graphical design in this respect than d3.js, but the simplicity that it provides for creating pages using crossfiltered data is a real benefit if you're anything like me and need all the help you can get.
The different (generic) types of chart that dc.js supports are
- Bar Chart
- Pie Chart
- Row Chart
- Line Chart
- Bubble Chart
- Geo Choropleth Chart
- Data Table
All these examples come with a range of options which we will cover in greater depth in later sections.
My initial sources of information for developing the examples here came primarily from;
Bar Chart
This is a standard bar chart.
Pie Chart
This is a standard pie chart. The examples below are from one of Nick Zhu's dc.js example pages.
Row Chart
The row chart is a horizontal version of a bar chart, but with the ability to represent discrete values and to be able to select them for filtering by clicking on them. The example below is from one of Nick Zhu's dc.js example pages
Line Chart
Standard line chart.
Bubble Chart
The bubble chart is a derivative of a scatter plot with control over x axis position, y axis position, bubble radius and colour.
Geo Choropleth Chart
A Choropleth map is one where areas are shaded or patterned in proportion to the measurement of a variable being displayed on the map, such as population density or per-capita income. The example below is from one of Nick Zhu's dc.js example pages
Data Table
A data table is a simple table made up of data elements derived from the information loaded.
The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).
what is the maximum od dimensions manipulated by dc.js?
ReplyDeleteI don't know from my own experience, but since it relies on crossfilter to do the data manipulation, I would fall back on the advice from the wiki here (https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension) "Creating more than 8 dimensions, and more than 16 dimensions, introduces additional overhead. More than 32 dimensions at once is not currently supported"
DeleteI want to export the svg graph as pdf file in d3 js
ReplyDeleteGood question (perhaps an odd place to ask, but hey! Why not? :-)).
DeleteI can steer you towards some basics in the post here (http://www.d3noob.org/2013/07/export-image-from-d3js-page-as-svg-or.html) and at the point where you have an svg image you can then open that up in one of the Libre Office products (like Draw or similar) and then save as a PDF. Or you couls check out the Google Groups discussion on the topic (https://groups.google.com/forum/#!topic/d3-js/wzeM41mCyFY) or check out what looks to be a great overview from Sergiy O. Nesterko on his blog here (http://nesterko.com/blog/2012/01/30/measuring-homophily-in-network-data-and-how-to-export-from-d3-js-to-pdf/). Sorry I don't have a direct answer, but Google the following (export pdf d3.js svg) and you will see over 200,000 results. Good luck.
How can I add a Click event to a DataTable cell, so I can view the document referenced in the cell. The Render Column seems to abstract out the event. Can't find a way to do a POST. A Get won't withstand security.
ReplyDeleteWow! I have no idea sorry. What I have there would be the limit of my understanding.
Delete