score:1
Accepted answer
You could do something like this.
1) Work out the average of your data
var average = d3.mean(data.map(function(i){return i[1]})));
2) Use the average when setting the color
if (d.value > average)
return "#49B5A6"
else
return "#F86A52"
score:1
You can do it this way first calculate the average:
var average = d3.mean(data.map(function(i) {
return i[1]
}));
Then use this to color the nodes(http://c3js.org/reference.html#data-color):
data: {
xs: {
Mike: 'ibm_x',
Susan: 'microsoft_x',
Glen: 'tcs',
Harris: 'sun',
Tom: 'infosys',
Lear: 'oracle',
Leon: 'ibm_y',
Neo: 'ibm_z',
Suraj: 'ibm_a',
Nayan: 'ibm_b',
Jhagan: 'ibm_c'
},
//color the nodes
color: function(color, d) {
if (d.value > average) {
return "#F86A52"
} else {
return "#49B5A6"
};
},
You don't need the code below:
d3.selectAll(".c3-circle").style("fill", function(d, i) {
abc = (d.x+d.value);
function numberSum(N) {var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;}return i % 2 ? "#F86A52" : "#49B5A6";});
Working code here.
Hope this helps!
Source: stackoverflow.com
Related Query
- How to set color of node based on data value in D3JS
- How to set an initially determined zoom level based on data d3js
- How to select the color of node on data value and the Data value of tool as name?
- In D3, how can I create multiple elements for each data element based on value in data?
- How to change table cell color based on numeric value from .csv report AND when tables are dynamically created?
- How to color SVG image based on value from color range using d3?
- How would I create my own color scale based on the id of my data in d3?
- How to get the minimum and maximum value between a given range in data set in d3.js
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- How to set node link colour based on node name?
- How to update the existing nodes attributes of a d3js tree, based on an input value from a search box?
- How to adjust node size based on value in diagonalNetwork of networkD3
- D3 change the background color of an element based on it's data value
- How to add color to voronoi diagram based on certain value in d3.js
- How do I remove all children elements from a node and then apply them again with different color and size?
- How to set multiple attributes with one value function?
- How to set text color for my d3 chart title?
- How to get data of parent node in d3.js
- d3js - how to set albers projection properly?
- How to change line color in d3js according to axis value?
- D3 Selecting based on text value of node
- How can I set the each line color or width in SVG path
- How to get biggest array element based on his second sub array value
- d3.js - Select node element based on attributes value using .selectAll()
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to apply specific colors to D3.js map based on data values?
- How to change color of the dots in D3.js to reflect data on y scale?
- Color each arc of sunburst based on size value
- dc.js - how to get the average of a column in data set
- c3 graph in a dark background; how to change axis and tick value color
More Query from same tag
- Using D3 Charts in Apache Zeppelin
- Creating a line graph taking data from database
- How to display data map in D3 svg rectangle?
- d3.js time scale unexpected behaviour
- d3.js linkStrength influence on linkDistance in a force graph
- Adding transition to d3.drag() behaviour
- Sorting the bars in a bar chart with dc.js
- d3: Adding the min/max/mean lines to an existing linechart
- D3 Donut Chart - Remove 0% label
- generate clipPaths for multiple elements in d3.js
- D3 Chart - Using tickValues for Time Gives "translate(NaN,0)"
- flip action in d3 js
- mouseover not working as an arrow function?
- Cannot read property 'drag' of undefined D3
- Opening 500+ nodes at once in d3.js
- d3 equivalent for Ruby on Rails?
- How to log rotate attribute in transform using d3.js?
- adding tick marks in d3
- d3 add line to existing plot
- calling svg.selectAll(X).data().enter() multiple times
- ReactJS and D3JS: setState
- Enforce relative links to defs in SVG
- Get data from mysql with json and plot with D3
- d3.js sorting by rollup field
- D3.js hexbin hexagonal color picker
- HTML Range Slider with Play/Pause Loop
- d3.js thickening only one arc
- How can I add dependencies to my Spine app?
- Drawing Wealth of Nations D3 graph using React
- Data transformation for d3 stack