25:["$","title",null,{"children":"Parallel coordinates | Ped Ram | Observable"}] 49:Tb71,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;"); // Function to update the sorting logic based on the slider value function updateSorting() { const sortedData = data.slice().sort((a, b) => { if (range < 50) { return d3.ascending(a[keyz], b[keyz]); // Ascending order } else { return d3.descending(a[keyz], b[keyz]); // Descending order } }); svg .selectAll("path") .data(sortedData) .transition() .duration(500) // Add a transition for smooth sorting animation .attr("d", (d) => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))); } // 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) .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") ); // Create a slider input element // Add an event listener to the slider input element //rangeInput.oninput = updateSorting; // Initial sorting when the page loads updateSorting(); return Object.assign(svg.node(), { scales: { color } }); }4a:[{"id":"4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","href":"https://static.observableusercontent.com/files/4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","name":"cars.csv","type":"application/octet-stream","lastModified":1704666117305.592,"size":17438}] 29:{"id":"68aa75fdb819dfef","slug":null,"title":"Parallel coordinates","thumbnail":"4cb01535647903f5edeeaa5b6ad9fbece8b9edc02689a5309718581429dbecc0","access_level":"public","create_time":"$D2024-01-07T22:21:57.305Z","update_time":"$D2024-01-07T22:37:04.522Z","view_time":null,"first_public_time":"$D2024-01-07T22:21:57.305Z","has_unpublished_edits":null,"fork":{"id":"27257746414b83a1","slug":"parallel-coordinates","title":"Parallel coordinates","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0bbcf444e46bf02","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"viewof selectedKeysf = HTMLSelectElement({\n title: \"Select Keys\",\n options: keys, // Assuming `keys` is an array of available keys\n value: keys.slice(0, 2) // Initialize with some default selected keys\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"keys = data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null