2c:null 2d:["$","title",null,{"children":"Parallel coordinates | D3 | Observable"}] 32: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}}); }33:[{"id":"4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","href":"https://static.observableusercontent.com/files/4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","name":"cars.csv","type":"application/octet-stream","lastModified":1572388347532.504,"size":17438}] 30:{"id":"27257746414b83a1","slug":"parallel-coordinates","title":"Parallel coordinates","thumbnail":"a67d5c69a9f2d2c9967183b369bd6fbc02105eb11d11af8beccee3a5ca7d4bc9","access_level":"public","create_time":"$D2019-02-13T15:40:43.524Z","update_time":"$D2023-08-01T14:29:09.779Z","view_time":null,"first_public_time":"$D2019-02-13T17:18:00.941Z","fork":false,"stars":78,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":342,"collection":{"id":"1b0fbc3b1939d7fa","slug":"gallery","title":"Gallery","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"legend = Legend({color: chart.scales.color, title: keyz})","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(\"cars.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"