This post describes how to build a
connected scatter plot
with multiple data series in d3.js. It includes a legend that allows
to show or hide groups. It follows the previous
basic connected scatter plot. This example works with d3.js v4 and v6
on("click",..) element that will show or hide
the group.
opacity attribute of the group elements. If it
is 0, it switches to 1. And reciprocally.
currentOpacity == 1 ? 0:1. It is just a shorter
way to write
if(currentOpacity == 1){return 0}else{return 1}
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<!-- Color Scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 100, bottom: 30, left: 30},
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 + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv", function(data) {
// List of groups (here I have one group per column)
var allGroup = ["valueA", "valueB", "valueC"]
// Reformat the data: we need an array of arrays of {x, y} tuples
var dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
return {
name: grpName,
values: data.map(function(d) {
return {time: d.time, value: +d[grpName]};
})
};
});
// I strongly advise to have a look to dataReady with
// console.log(dataReady)
// A color scale: one color for each group
var myColor = d3.scaleOrdinal()
.domain(allGroup)
.range(d3.schemeSet2);
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain([0,10])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain( [0,20])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// Add the lines
var line = d3.line()
.x(function(d) { return x(+d.time) })
.y(function(d) { return y(+d.value) })
svg.selectAll("myLines")
.data(dataReady)
.enter()
.append("path")
.attr("class", function(d){ return d.name })
.attr("d", function(d){ return line(d.values) } )
.attr("stroke", function(d){ return myColor(d.name) })
.style("stroke-width", 4)
.style("fill", "none")
// Add the points
svg
// First we need to enter in a group
.selectAll("myDots")
.data(dataReady)
.enter()
.append('g')
.style("fill", function(d){ return myColor(d.name) })
.attr("class", function(d){ return d.name })
// Second we need to enter in the 'values' part of this group
.selectAll("myPoints")
.data(function(d){ return d.values })
.enter()
.append("circle")
.attr("cx", function(d) { return x(d.time) } )
.attr("cy", function(d) { return y(d.value) } )
.attr("r", 5)
.attr("stroke", "white")
// Add a label at the end of each line
svg
.selectAll("myLabels")
.data(dataReady)
.enter()
.append('g')
.append("text")
.attr("class", function(d){ return d.name })
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
.attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; }) // Put the text at the position of the last point
.attr("x", 12) // shift the text a bit more right
.text(function(d) { return d.name; })
.style("fill", function(d){ return myColor(d.name) })
.style("font-size", 15)
// Add a legend (interactive)
svg
.selectAll("myLegend")
.data(dataReady)
.enter()
.append('g')
.append("text")
.attr('x', function(d,i){ return 30 + i*60})
.attr('y', 30)
.text(function(d) { return d.name; })
.style("fill", function(d){ return myColor(d.name) })
.style("font-size", 15)
.on("click", function(d){
// is the element currently visible ?
currentOpacity = d3.selectAll("." + d.name).style("opacity")
// Change the opacity: from 0 to 1 or from 1 to 0
d3.selectAll("." + d.name).transition().style("opacity", currentOpacity == 1 ? 0:1)
})
})
</script> <script>
// set the dimensions and margins of the graph
const margin = {top: 10, right: 100, bottom: 30, left: 30},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
const 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})`);
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv").then(function(data) {
// List of groups (here I have one group per column)
const allGroup = ["valueA", "valueB", "valueC"]
// Reformat the data: we need an array of arrays of {x, y} tuples
const dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
return {
name: grpName,
values: data.map(function(d) {
return {time: d.time, value: +d[grpName]};
})
};
});
// I strongly advise to have a look to dataReady with
// console.log(dataReady)
// A color scale: one color for each group
const myColor = d3.scaleOrdinal()
.domain(allGroup)
.range(d3.schemeSet2);
// Add X axis --> it is a date format
const x = d3.scaleLinear()
.domain([0,10])
.range([ 0, width ]);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear()
.domain( [0,20])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// Add the lines
const line = d3.line()
.x(d => x(+d.time))
.y(d => y(+d.value))
svg.selectAll("myLines")
.data(dataReady)
.join("path")
.attr("class", d => d.name)
.attr("d", d => line(d.values))
.attr("stroke", d => myColor(d.name))
.style("stroke-width", 4)
.style("fill", "none")
// Add the points
svg
// First we need to enter in a group
.selectAll("myDots")
.data(dataReady)
.join('g')
.style("fill", d => myColor(d.name))
.attr("class", d => d.name)
// Second we need to enter in the 'values' part of this group
.selectAll("myPoints")
.data(d => d.values)
.join("circle")
.attr("cx", d => x(d.time))
.attr("cy", d => y(d.value))
.attr("r", 5)
.attr("stroke", "white")
// Add a label at the end of each line
svg
.selectAll("myLabels")
.data(dataReady)
.join('g')
.append("text")
.attr("class", d => d.name)
.datum(d => { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
.attr("transform", d => `translate(${x(d.value.time)},${y(d.value.value)})`) // Put the text at the position of the last point
.attr("x", 12) // shift the text a bit more right
.text(d => d.name)
.style("fill", d => myColor(d.name))
.style("font-size", 15)
// Add a legend (interactive)
svg
.selectAll("myLegend")
.data(dataReady)
.join('g')
.append("text")
.attr('x', (d,i) => 30 + i*60)
.attr('y', 30)
.text(d => d.name)
.style("fill", d => myColor(d.name))
.style("font-size", 15)
.on("click", function(event,d){
// is the element currently visible ?
currentOpacity = d3.selectAll("." + d.name).style("opacity")
// Change the opacity: from 0 to 1 or from 1 to 0
d3.selectAll("." + d.name).transition().style("opacity", currentOpacity == 1 ? 0:1)
})
})
</script>