2c:null 2d:["$","title",null,{"children":"Parallel coordinates with mouseover effect | Everardo Reyes | Observable"}] 32:Tcb8,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}}); }33:[{"id":"12aa1a65fd7a85ebdc67224a8ea19eadb5cd022c8577b44556e88cb8fbafb561202b336eb8044d8a18f5b999b6bbaf79285a876a7841fa3e2eaec29ce93acbce","href":"https://static.observableusercontent.com/files/12aa1a65fd7a85ebdc67224a8ea19eadb5cd022c8577b44556e88cb8fbafb561202b336eb8044d8a18f5b999b6bbaf79285a876a7841fa3e2eaec29ce93acbce","name":"data.csv","type":"text/csv","lastModified":1705874355729.527,"size":3776},{"id":"c4b2bdbe24a9d3a8e63f68aa52155b6d802f428fb8227301aa829fbb4f6badd1ddc460af0f9bd85f0ef29e51bdde0160e9127d62044d2d26177ee2d4dd991504","href":"https://static.observableusercontent.com/files/c4b2bdbe24a9d3a8e63f68aa52155b6d802f428fb8227301aa829fbb4f6badd1ddc460af0f9bd85f0ef29e51bdde0160e9127d62044d2d26177ee2d4dd991504","name":"davavis24-db-sandbox - Sheet15(1).csv","type":"text/csv","lastModified":1706134250708.945,"size":5667}] 30:{"id":"65ea2f4565bee2ac","slug":null,"title":"Parallel coordinates with mouseover effect","thumbnail":"46adfb3da5adca70f712237978c89e22c33faa6eb4f347cefccf1e8c93408881","access_level":"public","create_time":"$D2024-01-21T21:59:15.729Z","update_time":"$D2024-01-24T23:05:19.963Z","view_time":null,"first_public_time":"$D2024-01-21T21:59:15.729Z","has_unpublished_edits":null,"fork":{"id":"8f0d46b85ebe6c80","slug":null,"title":"Parallel coordinates","owner":{"id":"be3126c158ebfed0","login":"a5680b51eadf1114","name":"Everardo Reyes"}},"stars":0,"starred":false,"owner":{"type":"team","id":"be3126c158ebfed0","login":"a5680b51eadf1114","name":"Everardo Reyes","avatar_url":"https://avatars-next.observableusercontent.com/68d0e729599f53f7f266418da415f086b57bceb5065c451ee246a23503353c44","tier":"starter_2024"},"version":315,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a5680b51eadf1114","login":"a5680b51eadf1114","name":"Everardo Reyes","avatar_url":"https://avatars-next.observableusercontent.com/68d0e729599f53f7f266418da415f086b57bceb5065c451ee246a23503353c44","tier":null}],"members":[{"type":"individual","id":"a5680b51eadf1114","login":"a5680b51eadf1114","name":"Everardo Reyes","avatar_url":"https://avatars-next.observableusercontent.com/68d0e729599f53f7f266418da415f086b57bceb5065c451ee246a23503353c44","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Parallel coordinates with mouseover effect","cells":[{"id":0,"value":"

Parallel coordinates with mouseover effect

D3 › Gallery

\n\n# Parallel coordinates hover\n\n- Les lignes changent de couleur au survol de la souris.\n- La couleur est associée à une catégorie, la colonne Nom dans le CSV.\n- Exemple https://d3-graph-gallery.com/graph/parallel_custom.html \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"viewof keyz = {\n const form = html`

${Object.assign(html``, {value: \"Creation\"})} color encoding`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"legend = Legend({color: chart.scales.color, title: keyz, width:900})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = FileAttachment(\"davavis24-db-sandbox - Sheet15(1).csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"keys = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"import {legend as Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"For an alternative using [Observable Plot](/plot/)’s concise API, see [Plot: Parallel coordinates](https://observablehq.com/@observablehq/plot-parcoords).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"