This post is an extension of the previous
basic parallel coordinate chart. The
idea is to add a color scale to highlight the different groups and
hover effects to highlight a specific group or a particular
axis. This example works with d3.js v4 and
v6
css - axis have a
specific class called axis. It is possible
to specify a style when hovering with
axis:hover
javascript - a function
is triggered when a group is hovered, another when group
is not hovered anymore.
<!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>
<!-- A bit of style -->
<style>
.axis {
opacity: 0.4;
}
.axis:hover {
opacity: 1;
}
</style>
<!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: 30, right: 50, bottom: 10, left: 50},
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 + ")");
// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {
// Color scale: give me a specie name, I return a color
var color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica" ])
.range([ "#440154ff", "#21908dff", "#fde725ff"])
// Here I set the list of dimension manually to control the order of axis:
dimensions = ["Petal_Length", "Petal_Width", "Sepal_Length", "Sepal_Width"]
// For each dimension, I build a linear scale. I store all in a y object
var y = {}
for (i in dimensions) {
name = dimensions[i]
y[name] = d3.scaleLinear()
.domain( [0,8] ) // --> Same axis range for each group
// --> different axis range for each group --> .domain( [d3.extent(data, function(d) { return +d[name]; })] )
.range([height, 0])
}
// Build the X scale -> it find the best position for each Y axis
x = d3.scalePoint()
.range([0, width])
.domain(dimensions);
// Highlight the specie that is hovered
var highlight = function(d){
selected_specie = d.Species
// first every group turns grey
d3.selectAll(".line")
.transition().duration(200)
.style("stroke", "lightgrey")
.style("opacity", "0.2")
// Second the hovered specie takes its color
d3.selectAll("." + selected_specie)
.transition().duration(200)
.style("stroke", color(selected_specie))
.style("opacity", "1")
}
// Unhighlight
var doNotHighlight = function(d){
d3.selectAll(".line")
.transition().duration(200).delay(1000)
.style("stroke", function(d){ return( color(d.Species))} )
.style("opacity", "1")
}
// The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
function path(d) {
return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Draw the lines
svg
.selectAll("myPath")
.data(data)
.enter()
.append("path")
.attr("class", function (d) { return "line " + d.Species } ) // 2 class for each line: 'line' and the group name
.attr("d", path)
.style("fill", "none" )
.style("stroke", function(d){ return( color(d.Species))} )
.style("opacity", 0.5)
.on("mouseover", highlight)
.on("mouseleave", doNotHighlight )
// Draw the axis:
svg.selectAll("myAxis")
// For each dimension of the dataset I add a 'g' element:
.data(dimensions).enter()
.append("g")
.attr("class", "axis")
// I translate this element to its right position on the x axis
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
// And I build the axis with the call function
.each(function(d) { d3.select(this).call(d3.axisLeft().ticks(5).scale(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; })
.style("fill", "black")
})
</script> <script>
// set the dimensions and margins of the graph
const margin = {top: 30, right: 50, bottom: 10, left: 50},
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})`);
// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {
// Color scale: give me a specie name, I return a color
const color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica" ])
.range([ "#440154ff", "#21908dff", "#fde725ff"])
// Here I set the list of dimension manually to control the order of axis:
dimensions = ["Petal_Length", "Petal_Width", "Sepal_Length", "Sepal_Width"]
// For each dimension, I build a linear scale. I store all in a y object
const y = {}
for (i in dimensions) {
name = dimensions[i]
y[name] = d3.scaleLinear()
.domain( [0,8] ) // --> Same axis range for each group
// --> different axis range for each group --> .domain( [d3.extent(data, function(d) { return +d[name]; })] )
.range([height, 0])
}
// Build the X scale -> it find the best position for each Y axis
x = d3.scalePoint()
.range([0, width])
.domain(dimensions);
// Highlight the specie that is hovered
const highlight = function(event, d){
selected_specie = d.Species
// first every group turns grey
d3.selectAll(".line")
.transition().duration(200)
.style("stroke", "lightgrey")
.style("opacity", "0.2")
// Second the hovered specie takes its color
d3.selectAll("." + selected_specie)
.transition().duration(200)
.style("stroke", color(selected_specie))
.style("opacity", "1")
}
// Unhighlight
const doNotHighlight = function(event, d){
d3.selectAll(".line")
.transition().duration(200).delay(1000)
.style("stroke", function(d){ return( color(d.Species))} )
.style("opacity", "1")
}
// The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
function path(d) {
return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Draw the lines
svg
.selectAll("myPath")
.data(data)
.join("path")
.attr("class", function (d) { return "line " + d.Species } ) // 2 class for each line: 'line' and the group name
.attr("d", path)
.style("fill", "none" )
.style("stroke", function(d){ return( color(d.Species))} )
.style("opacity", 0.5)
.on("mouseover", highlight)
.on("mouseleave", doNotHighlight )
// Draw the axis:
svg.selectAll("myAxis")
// For each dimension of the dataset I add a 'g' element:
.data(dimensions).enter()
.append("g")
.attr("class", "axis")
// I translate this element to its right position on the x axis
.attr("transform", function(d) { return `translate(${x(d)})`})
// And I build the axis with the call function
.each(function(d) { d3.select(this).call(d3.axisLeft().ticks(5).scale(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; })
.style("fill", "black")
})
</script>