chart = {
// Specify the chart’s dimensions.
const width = 928;
const height = keys.length * 130;
const marginTop = 20;
const marginRight = 10;
const marginBottom = 20;
const marginLeft = 10;
let selected_specie = "Nom";
// Create an horizontal (*x*) scale for each key.
const x = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [marginLeft, width - marginRight])]));
// Create the vertical (*y*) scale.
const y = d3.scalePoint(keys, [marginTop, height - marginBottom]);
// Create the color scale.
const color = d3.scaleOrdinal()
.domain(["Céramique", "Design graphique","Mosaïque","Design Textile","Architecture","Publication","Verre" ])
.range([ "orange", "brown","blue","green","tomato","pink","aqua"]);
// Highlight the specie that is hovered
const highlight = function(event, d){
selected_specie = d.Nom
// first every group turns grey
d3.selectAll(".line")
.transition().duration(100)
.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(100).delay(200)
.style("stroke", function(d){ return( color(d.Nom))} )
.style("opacity", "1")
.fill("none")
}
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
// Append the lines.
const line = d3.line()
.defined(([, value]) => value != null)
.x(([key, value]) => x.get(key)(value))
.y(([key]) => y(key));
svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-opacity", 0.4)
.selectAll("path")
.data(data.slice().sort((a, b) => d3.ascending(a[keyz], b[keyz])))
.join("path")
.attr("class", function (d) { return "line " + d.Nom } )
.attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]])))
.style("stroke", function(d){ return( color(d.Nom))} )
.style("opacity", 0.5)
.on("mouseover", highlight)
.on("mouseleave", doNotHighlight )
// Ajoute un texte au survol
.append("title")
.text(d => d.Creation + " " + d.Nom)
;
// Append the axis for each key.
svg.append("g")
.selectAll("g")
.data(keys)
.join("g")
.attr("transform", d => `translate(0,${y(d)})`)
.each(function(d) {
d3.select(this)
.call(d3.axisBottom(x.get(d)));
})
.call(g => g.append("text")
.attr("x", marginLeft)
.attr("y", -6)
.attr("text-anchor", "start")
.attr("fill", "#000")
.text(d => d))
.call(g => g.selectAll("text")
.clone(true).lower()
.attr("fill", "none")
.attr("stroke-width", 5)
.attr("stroke-linejoin", "round")
.attr("stroke", "white"));
return Object.assign(svg.node(), {scales: {color}});
}
data = FileAttachment("davavis24-db-sandbox - Sheet15(1).csv").csv({typed: true})
keys = data.columns.slice(1)
import {legend as Legend} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
