score:5
you'll need to build custom grouping/reduce functions to track the count of each status as well as the total count. then you can just divide in the chart to calculate your percentage. if you are interested in using reductio, you can probably do the following:
var reducer = reductio().count(true);
// do this as many times as you need for different status counts. each
// call of reducer.value will add a new property to your groups where
// you can store the count for that status.
reducer.value("screenfailure").sum(
function(d) {
// this counts records with subjectstatus = "screen failure"
return d["subjectstatus"] === "screen failure" ? 1 : 0;
});
// build the group with the reductio reducers.
var numsubjectsbysite = reducer(sitename.group());
// in your dc.js chart, calculate the % using a value accessor.
sitelevelchart
.width(2000)
.height(200)
.transitionduration(1000)
.dimension(sitename)
.group(numsubjectsbysite)
.valueaccessor(function(p) { return p.value.screenfailure.sum / p.value.count; })
.ordering(function(d){return d.value;})
score:3
you can use a custom groupall for this. here is a straight crossfilter solution, based on the jsfiddle you provided in a later question.
(it's a lot easier to answer with a fiddle to work with!)
var all = ndx.groupall();
var failurepercentgroup = all.reduce(
function(p, v) {
++p.count;
p.failures += (v.status === 'screen failure' ? 1 : 0);
p.failpercent = p.count ? p.failures/p.count : 0;
return p;
},
function(p, v) {
--p.count;
p.failures -= (v.status === 'screen failure' ? 1 : 0);
p.failpercent = p.count ? p.failures/p.count : 0;
return p;
},
function() {
return {
count: 0,
failures: 0,
failpercent: 0
};
}
);
failurepercent.valueaccessor(function (x) {
return x.failpercent;
})
.group(failurepercentgroup);
@ethan's answer looks like it should work, but you remarked elsewhere that you couldn't get it to work.
updated fiddle here: http://jsfiddle.net/gordonwoodhull/vct0dzou/8/
i didn't deal with formatting it as a percent, so it just shows a ratio, but you should be able to figure that part out.
Source: stackoverflow.com
Related Query
- crossfilter - calculating percent of all records with a property
- DC.js numberDisplay with crossfilter get total records
- How do I remove all children elements from a node and then apply them again with different color and size?
- Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Redrawing histograms with Crossfilter and D3
- How can I start with all the nodes collapsed in d3js?
- Working With Filters in Crossfilter
- Using dc.js on the clientside with crossfilter on the server
- Binding dc.js to Google Maps with crossfilter
- How to pick elements in d3 with a specific property value
- Javascript: Array of dictionaries, get all key value pairs from one dictionairy with condition
- dc.js Incorporate regression chart into existing scatterplot with crossfilter
- d3 force collapsible layout - start page with all nodes collapsed
- Permanently change CSS Property with Javascript/D3JS/JQuery
- Trouble with d3 zoom transform. Error: [ts] Property 'translate' does not exist on type 'Event | BaseEvent'
- d3.v3 scatterplot with all circles the same radius
- Increase margins for rotated axis labels with Crossfilter
- d3.js set with attribute in percent rather than pixels
- Using d3-tip with npm: "Uncaught TypeError: Cannot read property 'node' of undefined"?
- Uncaught TypeError: Cannot read property 'type' of undefined with d3.js
- Given a range of date intervals, create an array of all 1440 minutes in a day with the frequency each minute appears in the source intervals
- Display original (conditional) brushed unbrushed crossfilter bars with dc.js with different colors
- D3 bar chart not working properly with all negative and positive values
- D3 Object Constancy not working with key function. Enter and Update contain all elements every time
- Display all the leafs on the same level with D3.JS
- Displaying SVG elements with D3 and d3.slider: Uncaught TypeError: Cannot read property 'length' of undefined
- Count number of items in an array of objects with a specific property value (JavaScript)
- Remove all .fixed classes from force layout nodes with jQuery
- Crossfilter scatterplot with 2-d brushing
More Query from same tag
- D3 graph (with links) over google maps
- What is the code to use your own data instead of the random data that is generated here?
- How to load data from a CSV file in D3 v5
- How to register multiple external listeners to the same selection in d3?
- how to load csv file with vue.js and d3.js
- Understanding Javascript D3 visualization quadtree
- d3 General Update Pattern
- D3 Plotting Rectangles from Coordinate data
- Putting custom labels on D3 X axis graph
- dimple d3 plot, average of the values, quick command fix
- How do I load JSON data synchronously with d3.js?
- Parenting D3.js-Nodes for dragging
- D3.js read csv file with special characters, é à ü è
- Logic for static triangular plot
- D3: order of selections: style and text
- How to set limits of y axis?
- How to change easing in d3 pathTween function
- dc.js heatmap deselected colors
- D3 link circle by node's names
- nvd3 angular-nvd3 d3 Displaying chart legend vertically
- Change the size of SVG according to device size in D3.js?
- How to combine several jQuery mouseover functions into one reusable mouseover function
- Iterating over multidimensional array with variable length d3
- d3.js force layout on non-svg elements
- d3.js rotate text in svg
- Legend in deck.gl
- looking for examples of SVG graphics in Leaflet popups
- Multiple force-directed graphs in 1 svg (problems with text display)
- d3 - Graph Network Node Link Spacing
- D3: update data in group selection with additional ('g')