3e:null 3f:["$","title",null,{"children":"Visualizing Iris Species: A Comparative Analysis of Multiple Measures | Liwia Wagner | Observable"}] 45:Tfbe,scatterplotMatrix = { const width = 928; const height = width; const padding = 28; const columns = ["SepalLengthCm", "SepalWidthCm", "PetalLengthCm", "PetalWidthCm"] const size = (width - (columns.length + 1) * padding) / columns.length + padding; const x = columns.map(c => d3.scaleLinear() .domain(d3.extent(data, d => d[c])) .rangeRound([padding / 2, size - padding / 2])) const y = x.map(x => x.copy().range([size - padding / 2, padding / 2])); const color = d3.scaleOrdinal() .domain(data.map(d => d.Species)) .range(["#318A58", "#99CC35", "#6A5BCC"]); const axisx = d3.axisBottom() .ticks(6) .tickSize(size * columns.length); const xAxis = g => g.selectAll("g").data(x).join("g") .attr("transform", (d, i) => `translate(${i * size},0)`) .each(function(d) { return d3.select(this).call(axisx.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const axisy = d3.axisLeft() .ticks(6) .tickSize(-size * columns.length); const yAxis = g => g.selectAll("g").data(y).join("g") .attr("transform", (d, i) => `translate(0,${i * size})`) .each(function(d) { return d3.select(this).call(axisy.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const legend = d3.select("#scatterLegend") .attr("width", 700) .attr("height", 20) legend.append("circle").attr("cx",30).attr("cy",10).attr("r", 6).style("fill", "#318A58") legend.append("text").attr("x", 40).attr("y",11).text("Setosa").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") legend.append("circle").attr("cx",110).attr("cy",10).attr("r", 6).style("fill", "#99CC35") legend.append("text").attr("x", 120).attr("y", 11).text("Versicolor").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") legend.append("circle").attr("cx",205).attr("cy",10).attr("r", 6).style("fill", "#6A5BCC") legend.append("text").attr("x", 215).attr("y", 11).text("Virginica").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") const svg = d3.select("#scatterPlotMatrix") .attr("width", width) .attr("height", height) .attr("viewBox", [-padding, 0, width, height]); svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 1px; }`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(data.filter(d => !isNaN(d[columns[i]]) && !isNaN(d[columns[j]]))) .join("circle") .attr("cx", d => x[i](d[columns[i]])) .attr("cy", d => y[j](d[columns[j]])); }); const circle = cell.selectAll("circle") .attr("r", 3.5) .attr("fill-opacity", 0.7) .attr("fill", d => color(d.Species)); cell.call(brush, circle, svg, {padding, size, x, y, columns}); svg.append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(d => d); svg.property("value", []) return Object.assign(svg.node(), {scales: {color}}); }46:T49b,function brush(cell, circle, svg, {padding, size, x, y, columns}) { const brush = d3.brush() .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]]) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cell.call(brush); let brushCell; function brushstarted() { if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } function brushed({selection}, [i, j]) { let selected = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; circle.classed("hidden", d => x0 > x[i](d[columns[i]]) || x1 < x[i](d[columns[i]]) || y0 > y[j](d[columns[j]]) || y1 < y[j](d[columns[j]])); selected = data.filter( d => x0 < x[i](d[columns[i]]) && x1 > x[i](d[columns[i]]) && y0 < y[j](d[columns[j]]) && y1 > y[j](d[columns[j]])); } svg.property("value", selected).dispatch("input"); } function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); circle.classed("hidden", false); } }47:Te5d,parallelCoordinates = { const legend = d3.select("#parallelLegend") .attr("width", 700) .attr("height", 20) legend.append("circle").attr("cx",30).attr("cy",10).attr("r", 6).style("fill", "#318A58") legend.append("text").attr("x", 40).attr("y",11).text("Setosa").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") legend.append("circle").attr("cx",110).attr("cy",10).attr("r", 6).style("fill", "#99CC35") legend.append("text").attr("x", 120).attr("y", 11).text("Versicolor").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") legend.append("circle").attr("cx",205).attr("cy",10).attr("r", 6).style("fill", "#6A5BCC") legend.append("text").attr("x", 215).attr("y", 11).text("Virginica").style("font-family", "sans-serif") .style("font-size", "12px").attr("alignment-baseline","middle").attr("fill", "#666") const height = 800 const svg = d3.select("#parallelCoordinates") .attr("height", height) .attr("width", width) .attr("font-family", "sans-serif") .attr("font-size", 12) const keys = data.columns.slice(1,5) const brushHeight = 50 const deselectedColor = "#ddd" const margin = ({top: 30, right: 10, bottom: 30, left: 10}) const brush = d3.brushX() .extent([[margin.left, -(brushHeight / 2)], [width - margin.right, brushHeight / 2]]) .on("start brush end", brushed) const x = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [margin.left, width - margin.right])])) const y = d3.scalePoint(keys, [margin.top, height - margin.bottom]) const c = d3.scaleOrdinal(data.map(d => d.Species), ["#318A58", "#99CC35", "#6A5BCC"], "black") const line = d3.line() .defined(([, value]) => value != null) .x(([key, value]) => x.get(key)(value)) .y(([key]) => y(key)) const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-opacity", 0.4) .selectAll("path") .data(data.slice().sort((a,b) => d3.ascending(a["Species"], b["Species"]))) .join('path') .attr("stroke", d => c(d["Species"])) .attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))) path.append("title") .text(d => d.name) 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", "black") .style("font", "bold 10px sans-serif") .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 ? c(d["Species"]) : deselectedColor) if (active) { d3.select(this).raise() selected.push(d) } }) svg.property("value", selected).dispatch("input") } return svg.property("value", data).node() }48:[{"id":"9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","href":"https://static.observableusercontent.com/files/9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","name":"Iris.csv","type":"text/csv","lastModified":1728716794495.792,"size":5107}] 43:{"id":"40e11c389ce691ef","slug":null,"title":"Visualizing Iris Species: A Comparative Analysis of Multiple Measures","thumbnail":"5b964a4f0493288d9941a2d3242031d357769a55b3827d34b53d5419dbd8c2e7","access_level":"public","create_time":"$D2024-10-12T07:06:34.495Z","update_time":"$D2024-11-20T09:49:46.821Z","view_time":null,"first_public_time":"$D2024-10-12T07:06:34.495Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d8db32a99c8ff2ba","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":"starter_2024","bio":"I create interactive data visualization products that provide insights and help people make data driven decisions.","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e90c678020da2934","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":null,"bio":"I create interactive data visualization products that provide insights and help people make data driven decisions.","following":false}],"members":[{"type":"individual","id":"e90c678020da2934","login":"liwiawagner","name":"Liwia Wagner","avatar_url":"https://avatars-next.observableusercontent.com/4ff244e8d73619701fe61770528c4bb796d28d983a5b039f68da5c86f9aadb9d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing Iris Species: A Comparative Analysis of Multiple Measures","cells":[{"id":0,"value":"# Visualizing Iris Species: A Comparative Analysis of Multiple Measures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"\nTo provide a quick, clear overview of all the measures in the dataset, I’ll use two visualizations: a scatterplot matrix and a parallel coordinates chart. Both charts are related in a way, that each dot on a scatterplot matrix refers to the line in the parallel coordinates chart. Order of the measures defined in the scatterplot matrix remains unchanged in the parallel coordinates chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"##### Iris Species dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"iris = await FileAttachment(\"Iris.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"iris","database":"$undefined"},{"id":70,"value":"data = FileAttachment(\"Iris.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":100,"value":"## Brushable Scatterplot Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"**How to read the chart?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"The scatterplot matrix shows pairwise correlations for multi-dimensional data. Each cell is a scatterplot where x encodes the column’s dimension and y encodes the row’s dimension. E.g. SepalLengthCm will define values for all four x axises within it's column and values for all four y axises within it's row. If we take a single scatterplot from the first row and second columns it's x axis would be SepalWidthCm and y axis would be SepalLengthCm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"**How to use the brush?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"Highlight a square area with your mouse within a single scatterplot chart. Move the highlighted square around to brush the entire matrix. To deactivate the brush click anywhere within the chart on not highlighted area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"_For best experience please view the Scatterplot Matrix chart on desktop._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"### Measures breakdown by Iris Species","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"## Brushable Parallel Coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"Parallel coordinates is a visualization technique used to plot individual data elements across many measures. Each of the measures corresponds to a horizontal axis and each data element is displayed as a series of connected points along the measure/axes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"To activate the brush highlight area at the axis. Move the highlight along the axis to brush entire chart. To deactivate the brush click on the not highlighted area of the axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"### Measures breakdown by Iris Species","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"

\n \n \n