I am making a scatter plot (point plot) of more than one data set using d3.
For this purpose I need an x-axis at the top to show the names of the data sets. But these text labels must have the same colors as the points/circles of the particular data set in the plot to see what points belong to what data set.
I'm trying to use the "stroke" and "fill" attributes to do this, but I can't make it work. And the text colors are all the same instead of different as desired.
Here's my code until now:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Colored x axis</title>
</head>
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var strings = ["Data Set 1","Data Set 2","Data Set 3"];
var xtop = d3.scaleBand().domain(strings).range([0, width]);
var xAxisTop = d3.axisTop(xtop);
var colors = ["#AC5503","#DF3511","#AE9922"];
svg
.append('g')
.data(colors)
.attr('transform', 'translate(0,10)')
.attr("style",(d,i) => "font-size:22px; stroke:" + colors[i] + "; fill:" + colors[i] + ";")
.call(xAxisTop.tickSize(0))
.select(".domain").remove();
</script>
</body>
</html>Any help is much appreciated, thanks.
After adding the axis, you can select all of the tick labels and set their attributes accordingly. I've updated your code:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Colored x axis</title>
</head>
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 40},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var strings = ["Data Set 1","Data Set 2","Data Set 3"];
var xtop = d3.scaleBand().domain(strings).range([0, width]);
var xAxisTop = d3.axisTop(xtop).tickSize(0);
var color = d3.scaleOrdinal()
.domain(strings)
.range(["#AC5503","#DF3511","#AE9922"]);
svg.append('g')
.call(xAxisTop)
.call(g => g.selectAll('.tick > text')
.attr('font-size', 22)
.attr('fill', d => color(d)))
.call(g => g.select('.domain').remove());
</script>
</body>
</html>