Dc.js - Dimensional Charting Javascript Library

Making Dashboards with Dc.js - Part 1: Using Crossfilter.js Introduction Dc.js is a JavaScript library used to make interactive dashboards in JavaScript. By clicking and selecting different events in graphs, you can filter the entire dashboard to drill into a particular event. This is the first of a 4 part series. Background In order to do this, DC.js relies on two other JavaScript plugins/libraries: D3.js and Crossfilter js. D3.js is the evolution of Protovis. While D3.js allows you to make really cool graphs, it isn't a graphing library. Crossfilter.js is a JavaScript plug-in used to slice and dice JavaScript arrays. Using the Code Now that we have the background, we can start to write some code. Download the Crossfilter.js file from GitHub and include it in your HTML page. Hide Copy Code We'll first need some data. We'll make our Crossfilter instance. var ndx = crossfilter(data); For our first example, we'll setup a filter using one of the integer columns. var totalDim = ndx.dimension(function(d) { return d.total; }); Now we can start to filter it.

austinlyons/dcjs-leaflet-untappd Coloring dc.js Stacked Bar Charts I recently went through the exercise of providing custom colors to a dc.js stacked bar chart. For all of the acceleration that dc.js provides, it is still a work in progress, and one of the missing capabilities seems to be using the .color() and .colorAccessor() functions to fill a stacked rectangle. That said, I tip my hat to @NickQiZhu for writing an extremely useful library. Renderlet Approach My initial approach ended up as a renderlet to process the rectangles in the bar and apply a color to each based on the key. Then you can apply the renderlet to the chart as part of the function chain (highlighted). I applied some CSS to override the default fill for these elements, which helped with the delay while the renderlet filled the rectangles. That basically leaves the chart empty until the renderlet has finished. CSS Approach After I sorted that out, I still didn’t like the short wait while the rectangles are painted, so here is an alternative approach using only CSS: Join Us

Nested Selections D3’s selections can be hierarchical, much like the elements and data they join. Consider a table: <table><thead><tr><td> A</td><td> B</td><td> C</td><td> D</td></tr></thead><tbody><tr><td> 0</td><td> 1</td><td> 2</td><td> 3</td></tr><tr><td> 4</td><td> 5</td><td> 6</td><td> 7</td></tr><tr><td> 8</td><td> 9</td><td> 10</td><td> 11</td></tr><tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr></tbody></table> How would you select only the body cells? The selector "td" would match the td elements in the head as well as the body. To match only those elements A within some other elements B, use the descendant combinator, "B A". var td = d3.selectAll("tbody td"); Alternatively, select the tbody element first, then select the td elements within: var td = d3.select("tbody").selectAll("td"); This produces the same result because selectAll, for each element in the current selection, selects the matching descendants. #Nesting and Index var td = d3.selectAll("tbody tr").selectAll("td");

Making Dashboards with Dc.js - Part 4: Style Introduction In this part, we will focus more on style. We'll change the colors, the look and some StyleSheets for our graphs to give them a bit more individuality. We'll also cover a new type of graph and a little of how SVG works; so you can get familiar with how dc, and in turn, d3 is making the graphs. Background You can find my other articles here: Using the code Since we've covered how to make basic graphs, I'm going to start with a basic setup. We're going to restructure our data again, so we can format the date. Hide Copy Code var parseDate = d3.time.format("%m/%d/%Y").parse; var parseDate2 = d3.time.format("%m/%d").parse; data.forEach(function(d) { d.date = parseDate(d.date); d.qtime = parseDate2((d.date.getMonth()+1)+"/"+d.date.getDate()); d.Year=d.date.getFullYear(); }); var ndx = crossfilter(data); We'll start with a ring like our previous example to filter the years for comparison. To show off the different years, we're going to use a stacked line chart. .width(200).height(200)