dc.js

Extending dc.js to add a “simpleLineChart” chart

由 一曲冷凌霜 提交于 2019-12-06 11:56:49
问题 edit See here for the non-working example of what I'm trying to do: http://bl.ocks.org/elsherbini/5814788 I am using dc.js to plot data collected from bee hives at my university. I am pushing new data to the graphs on every database change (using the magic of Meteor). When the database is over 5000 records or so, rerendering the lines gets really slow. So I want to use simplify.js to preprocess the lines before rendering. To see what I'm talking about, go to http://datacomb.meteor.com/. The

Bar Chart on Dimension-1 and Stacked by Dimension-2

由 倾然丶 夕夏残阳落幕 提交于 2019-12-06 10:30:21
Summary I want to display a bar chart whose dimension is days and is stacked by a different category (i.e. x-axis = days and stack = category-1). I can do this "manually" in that I can write if-then's to zero or display the quantity, but I'm wondering if there's a systematic way to do this. JSFiddle https://jsfiddle.net/wostoj/rum53tn2/ Details I have data with dates, quantities, and other classifiers. For the purpose of this question I can simplify it to this: data = [ {day: 1, cat: 'a', quantity: 25}, {day: 1, cat: 'b', quantity: 15}, {day: 1, cat: 'b', quantity: 10}, {day: 2, cat: 'a',

Avoid multiple sums in custom crossfilter reduce functions

由 痴心易碎 提交于 2019-12-06 09:45:26
This question arise from some difficulties in creating a crossfilter dataset, in particular on how to group the different dimension and compute a derived values. The final aim is to have a number of dc.js graphs using the dimensions and groups. (Fiddle example https://jsfiddle.net/raino01r/0vjtqsjL/ ) Question Before going on with the explanation of the setting, the key question is the following: How to create custom add , remove , init , functions to pass in .reduce so that the first two do not sum multiple times the same feature? Data Let's say I want to monitor the failure rate of a number

Strategies to reduce DOM elements of large data sets

由 試著忘記壹切 提交于 2019-12-06 09:05:24
问题 I have a large dataset that I want to display using dc.js. The amount of entries exceeds the available drawing space in pixels on the screen by far. So it does not make sense to render 20k points on a 500px wide chart and also slows down the browser. I read the Performance teak section of the wiki and thought of some other things: Aggregating groups using crossfilter (e.g. chunk the dataset in 500 groups if I have a 500px wide svg) simplify my data using a Douglas–Peucker or Visvalingam’s

dc.js - dynamically change valueAccessor of a stacked layer in a lineChart and redraw it

由 三世轮回 提交于 2019-12-06 08:13:52
I am trying to realize a dashboard to display basic data. I am actually completely stuck on an issue. Strangely enough, I couldn't find anything even similar to it online, so I don't have many leads on how to move forward. I have mainly two charts: a lineChart called "stackChart" that displays consumption as a base layer with its valueAccessor function dispalys production as a stacked layer with its value Accessor function a barChart called "volumeChart" that is simply the rangeChart for the lineChart I use radio buttons to select whether to aggregate the grouped data by sum or by average

dc.js composite chart toggle chart

由 放肆的年华 提交于 2019-12-06 07:43:38
问题 Is there a way to toggle charts on/off in a composite chart ? If I hover over Legend the respective chart is highlighted but it would be nice if we could choose which ones to display (hide/show with Legend, check boxes etc). I did find reference to hideStack but I don't think this is what I need. Any ideas? (Current DC Version: 2.0.0-alpha.2 ) 回答1: You're right, legend toggling is currently focused on stacks and not the subcharts of a composite chart. It may be possible to hack the legend's

Generating histogram for highly skewed data

由 不打扰是莪最后的温柔 提交于 2019-12-06 06:33:07
问题 I'm using dc.js , crossfilter.js and d3.js to generate a barchart. The barchart represents data for credit card transactions. It plots number of transactions (y-axis) over transaction dollar amount (x-axis). It looks like this: The data array basically looks like: [ ... { txn_id: 1, txn_amount: 20 }, ... ] The data is highly variable depending on different merchants etc and I can't make any assumptions about distributions. As you can see this graph isn't all that useful because of the data

DC.js to React conversion

由 元气小坏坏 提交于 2019-12-06 05:06:26
Is there an example for dc.js to react conversion? Interested in line chart,table and timeSlider (bar chart with brush). Any help would be appreciated. Thanks! This is the begining of converting DC.js into React. The versions of the used library are as followed (package.json): "dependencies": { "babel-polyfill": "^6.3.14", "bootstrap": "^3.3.6", "crossfilter": "^1.3.12", "d3": "^4.2.8", "d3-request": "^1.0.2", "d3-scale": "^1.0.3", "d3-time-format": "^2.0.2", "dc": "^2.0.0-beta.32", "history": "^1.17.0", "isomorphic-fetch": "^2.2.0", "keymirror": "^0.1.0", "react": "^0.14.8", "react-addons

Sorting (ordering) the bars in a bar chart by the bar values with dc.js

由 余生长醉 提交于 2019-12-06 03:00:01
问题 How can I sort the x-axis (dimension) in the dc.js example by the computed value of the dimension instead of by the name of the dimension itself? For example, consider the dc.js example for an Ordinal Bar Chart at: https://github.com/dc-js/dc.js/blob/master/web/examples/ord.html How can I sort the x-axis in descending order of fruit counts? Here is what I have tried: ( jsfiddle: http://jsfiddle.net/gautam/re9r9kk7/ ) var counts = [ {name: "apple", cnt: 10}, {name: "orange", cnt: 15}, {name:

How to add axis labels for row chart using dc.js or d3.js

由 假如想象 提交于 2019-12-06 02:36:33
问题 For Bar Chart and Stacked Chart, we can use .xAxisLabel("X Axis Label") and .yAxisLabel("Y Axis Label") functions to add labels for respective axis. But, Is there any way to add axis labels for Row Chart? 回答1: Try something like this: dc.renderAll(); function AddXAxis(chartToUpdate, displayText) { chartToUpdate.svg() .append("text") .attr("class", "x-axis-label") .attr("text-anchor", "middle") .attr("x", chartToUpdate.width()/2) .attr("y", chartToUpdate.height()-3.5) .text(displayText); }
订阅 dc.js