score:1
i think the best way to approach this is to use reductio's multi-value group and maximum reducer to calculate the maximum for each window on your power curve in a single bucket, then create a fake group to make it appear that each of these windows is its own group "bucket".
you start by defining your dimension, some helper maps (you need to get onto a linear scale, so you need to convert your windows to numbers of seconds), and a helper dimension that you can use for filtering in the event that you want to do this:
var rmmdim = facts.dimension(function(d) {
return true;
});
var timemap = {
"w15sec": 15,
"w30sec": 30,
"w1min": 60,
"w2min": 120,
"w5min": 300,
"w10min": 600,
"w20min": 1200,
"w40min": 2400,
"w1hr": 3600
}
var timearray = ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => timemap[d])
var rmmfilterdim = facts.dimension(function(d) {
return timearray;
}, true)
you then create your group using reductio, calculating the max for each window:
var rmmgroup = rmmdim.group();
var reducer = reductio()
reducer.value('w15sec')
.max((d) => { return d.w15sec; })
reducer.value('w30sec')
.max((d) => { return d.w30sec; })
reducer.value('w1min')
.max((d) => { return d.w1min; })
reducer.value('w2min')
.max((d) => { return d.w2min; })
reducer.value('w5min')
.max((d) => { return d.w5min; })
reducer.value('w10min')
.max((d) => { return d.w10min; })
reducer.value('w20min')
.max((d) => { return d.w20min; })
reducer.value('w40min')
.max((d) => { return d.w40min; })
reducer.value('w1hr')
.max((d) => { return d.w1hr; })
reducer(rmmgroup)
and finally you create your fake group. you need both top
and all
because the line chart requires them for some reason:
var fakegroup = {
all: function() {
return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => {
return {
key: timemap[d],
value: rmmgroup.top(infinity)[0].value[d]
}
})
},
top: function() {
return ["w15sec","w30sec","w1min","w2min","w5min","w10min","w20min","w40min","w1hr"].map((d) => {
return {
key: timemap[d],
value: rmmgroup.top(infinity)[0].value[d]
}
})
}
}
then you can use this fake group in your power distribution chart:
pwrdistchart
.width(960)
.height(150)
.margins({
top: 10,
right: 10,
bottom: 20,
left: 40
})
.dimension(rmmfilterdim)
.group(fakegroup)
.valueaccessor((d) => {
return d.value.max
})
.transitionduration(500)
.x(d3.scale.linear().domain([0,3600]))
.elasticy(true)
here is an updated version of the fiddle with all of this working: http://jsfiddle.net/fb3wsyck/5/
Source: stackoverflow.com
Related Query
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- how can i group JSON data into the weeks according to calender?
- How to reshaping Data in Javascript from array to object without losing some of the data
- How can I use crossfilter to filter graph data and visualize them on a force directed graph?
- How can i group elements that are bound to different data (to be used with forcesimulatoin) in D3 so that I can sort them
- How can I prepend data to a D3 stacked area graph without weird animation glitches?
- how can i group JSON data and generate a graph of each group in D3js
- In d3.js, how can I preserve index i (or coerce / force group index j use in it's place) in data bindings subject to nested selections?
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- Using d3.js, how can I display data faster on my chart?
- How can I get "call" to execute for each data element in D3?
- How can I animate infinite marker movement down an SVG path without very high CPU usage?
- How can I drag group (g) element in D3.js?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- In d3.js, how can I check if an element has been removed without doing a new selection?
- How to export dc.js filtered data
- D3: How can I change data in an existing bar chart
- How can I make convex hulls of multiple group network nodes in D3.js
- How can we create an onclick event for a d3 data map?
- Crossfilter group a filtered dimension
- How to map data such that I can use it to generate pie chart?
- In D3, how can I create multiple elements for each data element based on value in data?
- How can I clone and modify an existing group into a selection?
- How can I efficiently convert data from string to int within a d3 method chain?
- dimple.js How can I change the labels of a chart axis without changing the data?
- In D3 force-directed layout, how can I position fixed nodes programmatically, without dragging?
- How can I identify scatter plot data points that are included in a D3 brush?
- How can I make a SVG group follow a gradient in a circle
- How can I run a javascript as a node.js script without the DOM?
- How can I add an external group to an existing svg with d3.js?
More Query from same tag
- Fill an object with indexes from another object
- D3 multi series line graph
- Why do d3js tooltips disappear when using Leaflet version 1
- How to iterate nodes properly
- How to use translate in d3 when data is loaded from external json
- Use words as tick labels with unequal intervals in D3.js
- D3 not working when loading HTML into panel
- D3: What projection am I using? / How to simplify with a null projection?
- Using D3.js selection.data from Scala.js
- D3 - Finding an SVG Element with the same data
- D3 Horizontal Bar Chart exact copy
- Same data structure returned from javascript and python behaves differently in d3.js
- dc-js disable selecting slices on click for pie chart
- D3 custom text label axis
- Bar Height change following Y Axis inversion in D3 Charts
- ElasticSearch to NVD3 in Angularjs
- d3.v3 Horizontal Tree Structure with Collapsible Boxes
- D3 seemingly updating wrong SVG element
- How to add the data in the tooltip after the dataset switching
- Updating Force Layouts in D3v4
- d3js charts, Use json strings instead of json file
- Javascript module pattern in D3
- On change event on d3.js library duplicate charts
- How to get a single property of all children in a nested object using javascript?
- D3 DataMaps: OnClick Events on Bubbles
- how to change the color of a link in d3js?
- D3 - General Update Pattern in stacked bar chart
- Property 'tip' does not exist on type 'typeof @types/d3/index"'
- How to assign id to the bar chart
- Displaying D3.js Chart with Django Backend