3e:null 3f:["$","title",null,{"children":"Brushable Parallel Coordinates | user_55 | Observable"}] 45:T783,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const brush = d3.brushX() .extent([ [margin.left, -(brushHeight / 2)], [width - margin.right, brushHeight / 2] ]) .on("start brush end", brushed); const path = 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 => z(d[keyz])) .attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))); path.append("title") .text(label); 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", margin.left) .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")) .call(brush); const selections = new Map(); function brushed({selection}, key) { if (selection === null) selections.delete(key); else selections.set(key, selection.map(x.get(key).invert)); const selected = []; path.each(function(d) { const active = Array.from(selections).every(([key, [min, max]]) => d[key] >= min && d[key] <= max); d3.select(this).style("stroke", active ? z(d[keyz]) : deselectedColor); if (active) { d3.select(this).raise(); selected.push(d); } }); svg.property("value", selected).dispatch("input"); } return svg.property("value", data).node(); }46:[{"id":"4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","href":"https://static.observableusercontent.com/files/4cb40b94ee98c9296d28913c84e041a1bba5e6821131116b506dcbbfa383592985d94310ad25deb564b61d14ed20fd17c014ed38ab465d0a717dd81e4ea5759e","name":"cars.csv","type":"application/octet-stream","lastModified":1674056579255.194,"size":17438}] 43:{"id":"ab6304cadb201224","slug":null,"title":"Brushable Parallel Coordinates","thumbnail":"1dd9a6bf68479a9eb6d791f8a327b5be2d32ada80bd06e972c69e3ce50e7326e","access_level":"public","create_time":"$D2023-01-18T15:42:59.255Z","update_time":"$D2023-01-19T07:08:34.759Z","view_time":null,"first_public_time":"$D2023-01-18T15:42:59.255Z","has_unpublished_edits":null,"fork":{"id":"c8f3c13694a25451","slug":"brushable-parallel-coordinates","title":"Brushable parallel coordinates","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9b0817896a62112","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":"starter_2024","bio":"","following":false},"version":321,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4bf7eaa658b9750","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d4bf7eaa658b9750","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Brushable Parallel Coordinates","cells":[{"id":0,"value":"md`# Brushable Parallel Coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"selection // brush an axis below to see this update!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"keyz","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof keyz = {\n var x=1\n const form = html`

\n${Object.assign(html``, {value: \"weight (lb)\"})} \ncolor encoding`;\n \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":281,"value":" viewof kks={\n var x=1\n const form = html`${Object.assign(html``, {value: \"weight (lb)\"})}\n\ncolor encoding`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"console.log(keyz)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"legend = Legend({color: z, title: keyz})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$45","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":27,"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":32,"value":"x = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [margin.left, width - margin.right])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"y = d3.scalePoint(keys, [margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"z = d3.scaleSequential(x.get(keyz).domain().reverse(), colors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"line = d3.line()\n .defined(([, value]) => value != null)\n .x(([key, value]) => x.get(key)(value))\n .y(([key]) => y(key))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"label = d => d.name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"colors = d3.interpolateBrBG","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"deselectedColor = \"#ddd\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"brushHeight = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({top: 30, right: 10, bottom: 30, left: 10})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = keys.length * 120","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"console.log(d3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"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"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"