score:2
Accepted answer
c3 has nothing to offer this feature. so need to use d3 to get it through.
//on chart load
chart.load({done: function() {
//merge the first two columns which decide the x axis.
var g = data[0].concat(data[1])
//get the max min in the concatenated array
var minmax = d3.extent(g.filter(function(d){ return !isnan(d);}));
//make ascale for color range
//min is '#49b5a6'
//max is '#f86a52'
var color = d3.scale.linear()
.domain(minmax)
.range(['#49b5a6', '#f86a52']);
//iterate each circle
d3.selectall("circle")[0].foreach(function(c){
var d1 = d3.select(c).data()[0];//get data for circle
change color on timeout
window.settimeout(function(){d3.select(c).style("fill", color(d1.x))}, 500);
});
},});
working example here.
score:1
c3 has a color
configuration that allows you to specify a function to calculate the color of each point.
i've borrowed heavily from cyril's answer and used this configuration option:
var data = [
["ibm_x", 3.5, 3.0, 3.2, ...],
["microsoft_x", 3.2, 3.2, ...],
["safe", 0.2, 0.2, 0.2, 0.2, ...],
["losing", 1.4, 1.5, 1.5, ...],
];
// get all the x values
var g = data[0].concat(data[1])
//get the max min in the concatenated array
var minmax = d3.extent(g.filter(function(d){ return !isnan(d);}));
//make a scale for color range
//min is '#49b5a6'
//max is '#f86a52'
var heat = d3.scale.linear()
.domain(minmax)
.range(['#49b5a6', '#f86a52']);
c3.generate({
data: {
columns: data,
...
color: function (color, d) {
return heat(d.x);
},
},
...
});
fiddle here: https://jsfiddle.net/qx35z8n5/4/ (again modified from cyril's answer)
Source: stackoverflow.com
Related Query
- How do I add density or heat map to this scatter plot?
- How to add labels to c3.js scatter plot graph?
- d3.js: How to add labels to scatter points on graph
- D3.js - How can I add a new line to the text in this Collapsible Tree?
- how do you draw linear line in scatter plot with d3.js
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- How can I achieve the R kernel density estimate plot using D3.js?
- How to add external svg file (by D3.js) to Leaflet map
- How to plot lat/long pairs over map in D3.js
- Add a transition to a d3j scatter plot
- How to detect overlapping dots in a scatter plot using D3?
- How can I identify scatter plot data points that are included in a D3 brush?
- How to add a background image to a plot created using D3
- How to use d3 to plot/add node on scatter plot one by one?
- Add tooltip to d3 scatter plot
- How do I make this Angular D3.JS Chart Style and add Links to each pie?
- How to add arc d3 v4 map
- How to Add or Create a Map Scale Bar to a Map created with D3.js
- How do I make a scatter plot of lines in D3?
- How to add an SVG/d3 map to React Native?
- Updating D3 (v6) scatter plot doesn't add new circles
- How to get the same text of each elements in heat map as the y axis label?
- add Text inside the Boxgroup in heat map dc.js
- How to add a tooltip that shows a bar chart onto a d3.js map
- How to set a varying opacity of dots in a D3 scatter plot
- D3.js, Global Chloropleth / Heat Map . Make Legend Horizontal and Add Black Borders Around Countries
- How to handle the scales with d3.drag in a scatter plot
- How to draw a scatter plot with multiple y values for each x value?
- how can I set a height and width for this map in d3.js
- How to properly add padding to the plot area in a D3 line chart?
More Query from same tag
- d3 line smoothing (stronger than monotone)
- d3 - y-axis with log scale - ticks getting overlapped
- d3: Why does this function not remove elements?
- SVG/TopoJSON for world map with US states
- nvd3, lineWithFocusChart y-axis ticks are missing
- how to get target values from inner json arrays
- Proportional Area Chart (Square) with d3.js
- D3.js: Force-directed graph from adjacency matrix
- How to add legend and make lines random color as a new line is added to D3.JS
- trouble accessing max of nested object data for use in a domain in D3
- Add consistent margin to paths aligned to circles in D3.js
- d3 select anything with a specific class
- Onclick not working with outside .JS file
- Delete and add nodes with click on a node in d3.js
- Button doesn't work when updating cards category
- Display running time
- Filtering and Ordering in dimplejs visualization
- Python/Bottle: sending JSON object via post
- how to use <h1> in c3.js div?
- How to add a separator in D3 bar chart D3V3
- D3.js: Moving circles along with line in a 2D graph when zoomed
- Getting data at run time, from a text box for example
- Nested JSON object data with dimple.js chart
- How to get maximum value from an array of objects to use in d3.scale.linear().domain()
- How can I wrap the long label text in the bubble chart in d3?
- How should I replace this .selectAll necessary before .data in D3?
- SVG support with recent versions of angularjs and d3js
- D3 transitions - pause and resume
- How can I get "call" to execute for each data element in D3?
- convert hash to json for D3 dendrogram for cisco cdp topology