random colors for circles in d3.js graph
27,964
Solution 1
you can also use d3.scale.category20(); to get some predefined random colors
Just define color scale as
var color = d3.scale.category20();
Add add fill attribute to the circles as
.attr("fill",function(d,i){return color(i);});
Solution 2
replace .style("fill","red")
with
.style("fill",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
Solution 3
For a quick-and-dirty approach to random colors:
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style('height',(data) => { return data+'px' })
.style('background-color',() => {
let color = '#'+Math.floor(Math.random() * Math.pow(2,32) ^ 0xffffff).toString(16).substr(-6);
console.log(color);
return color;
})
.bar {
width: 25px;
height: 100px;
display: inline-block;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
Comments
-
iJade almost 2 years
Here is a link to the jsfiddle
http://jsfiddle.net/jaimem/RPGPL/2/
Now the graph shows red color for all the circles.Is dere a way to show random colors on the circles.
Here is the d3.js code
var data = [{ "count": "202", "year": "1590"}, { "count": "215", "year": "1592"}, { "count": "179", "year": "1593"}, { "count": "199", "year": "1594"}, { "count": "134", "year": "1595"}, { "count": "176", "year": "1596"}, { "count": "172", "year": "1597"}, { "count": "161", "year": "1598"}, { "count": "199", "year": "1599"}, { "count": "181", "year": "1600"}, { "count": "157", "year": "1602"}, { "count": "179", "year": "1603"}, { "count": "150", "year": "1606"}, { "count": "187", "year": "1607"}, { "count": "133", "year": "1608"}, { "count": "190", "year": "1609"}, { "count": "175", "year": "1610"}, { "count": "91", "year": "1611"}, { "count": "150", "year": "1612"} ]; function ShowGraph(data) { d3.selectAll('.axis').remove(); var vis = d3.select("#visualisation").append('svg'), WIDTH = 500, HEIGHT = 500, MARGINS = { top: 20, right: 20, bottom: 20, left: 30 }, xRange = d3.scale .linear() .domain([ d3.min(data, function(d){ return parseInt(d.year, 10);}), d3.max(data, function(d){ return parseInt(d.year, 10);}) ]) .range([MARGINS.left, WIDTH - MARGINS.right]), yRange = d3.scale .linear() .domain([ d3.min(data, function(d){ return parseInt(d.count, 10);}), d3.max(data, function(d){ return parseInt(d.count, 10);}) ]) .range([HEIGHT - MARGINS.top, MARGINS.bottom]), xAxis = d3.svg.axis() // generate an axis .scale(xRange) // set the range of the axis .tickSize(5) // height of the ticks .tickSubdivide(true), // display ticks between text labels yAxis = d3.svg.axis() // generate an axis .scale(yRange) // set the range of the axis .tickSize(5) // width of the ticks .orient("left") // have the text labels on the left hand side .tickSubdivide(true); // display ticks between text labels var transition = vis.transition().duration(1000).ease("exp-in-out"); transition.select(".x.axis").call(xAxis); transition.select(".y.axis").call(yAxis); vis.append("svg:g") // add a container for the axis .attr("class", "x axis") // add some classes so we can style it .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position .call(xAxis); // finally, add the axis to the visualisation vis.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(" + (MARGINS.left) + ",0)") .call(yAxis); var circles = vis.selectAll("circle").data(data) circles.enter() .append("svg:circle") .attr("cx", function (d) { return xRange(d.year); }) .attr("cy", function (d) { return yRange(d.count); }) .style("fill", "red") circles.transition().duration(1000) .attr("cx", function (d) { return xRange(d.year); }) .attr("cy", function (d) { return yRange(d.count); }) .attr("r", 10) circles.exit() .transition().duration(1000) .attr("r", 10) .remove(); }
-
Aravind Cheekkallur over 7 yearsd3.scale.category20(); contain only 20 colors.
-
Wolf7176 almost 6 yearsthis doesn't work with
var color = d3.scaleOrdinal(d3.schemeCategory20);
attr("fill",function(d,i){return color(i);});
-
Mike Shiyan almost 2 yearsWhy function? Isn't this simpler:
.style("fill", "hsl(" + Math.random() * 360 + ",100%,50%)")
?