2f:T828,chart = { // Specify the chart’s dimensions. const width = 928; const height = keys.length * 120; const marginTop = 20; const marginRight = 10; const marginBottom = 20; const marginLeft = 10; // 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.scaleSequential(x.get(keyz).domain(), t => d3.interpolateBrBG(1 - t)); // 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("stroke", d => color(d[keyz])) .attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))) .append("title") .text(d => d.name); // 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", "currentColor") .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}}); }30:[{"id":"4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","href":"https://static.observableusercontent.com/files/4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","name":"cars.csv","type":"application/octet-stream","lastModified":1698333230321.884,"size":17438},{"id":"2fd5a72b1bed4a2e23c63e9af109b9b70e7aacf1ec68f6e10aad1be1222265bc752bbba12783b68985cc1adf43f8b6135b2a36b0624a99c15898c65eae5a427b","href":"https://static.observableusercontent.com/files/2fd5a72b1bed4a2e23c63e9af109b9b70e7aacf1ec68f6e10aad1be1222265bc752bbba12783b68985cc1adf43f8b6135b2a36b0624a99c15898c65eae5a427b","name":"dnd.csv","type":"text/csv","lastModified":1698333240291.818,"size":1895}] 2d:{"title":"Parallel coordinates","cells":[{"id":0,"value":"

Parallel coordinates

D3 › Gallery

\n\n# Parallel coordinates\n\nCompare with the [brushable version](/@d3/brushable-parallel-coordinates).","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"viewof keyz = {\n const form = html`

${Object.assign(html``, {value: \"weight (lb)\"})} 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"},{"id":157,"value":"legend = Legend({color: chart.scales.color, title: keyz})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = FileAttachment(\"dnd.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"keys = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"import {legend as Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}