3e:null 3f:["$","title",null,{"children":"Brushable Scatterplot | IXD Sheridan | Observable"}] 45:Ta07,viewof selection = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []) .property("value2", []) .property("value3", []) .property("value4", []); const brush = d3.brush() .on("start brush end", brushed); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const dot = svg.append("g") .attr("fill", "steelblue") .selectAll("circle") .data(sort1) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("r", 4); const dot2 = svg.append("g") .attr("fill", "#99d5ca") .selectAll("circle") .data(sort2) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("r", 4); const dot3 = svg.append("g") .attr("fill", "#f495db") .selectAll("circle") .data(sort3) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("r", 4); const dot4 = svg.append("g") .attr("fill", "#ffec95") .selectAll("circle") .data(sort4) .join("circle") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("r", 4); svg.call(brush); function brushed({selection}) { let value = []; let value2 = []; let value3 = []; let value4 = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("fill", "gray") .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("fill", "steelblue") .data(); value2 = dot2 .style("fill", "gray") .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("fill", "#99d5ca") .data(); value3 = dot3 .style("fill", "gray") .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("fill", "#f495db") .data(); value4 = dot4 .style("fill", "gray") .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .style("fill", "#ffec95") .data(); } else { dot.style("fill", "steelblue"); dot2.style("fill", "#99d5ca"); dot3.style("fill", "#f495db"); dot4.style("fill", "#ffec95"); } svg.property("value", value).dispatch("input") // svg.property("value2", value).dispatch("input") // svg.property("value3", value).dispatch("input") // svg.property("value4", value).dispatch("input") } return svg.node(); } 46:[{"id":"8d3a6dcd23a244f9277203a5011d5764fd9fc0ff0ef83b1a751011cf8278ca6949bcc242282b342ed6bc71fb086c6731d86e0b41308559ab12bae5d14b9a6a27","href":"https://static.observableusercontent.com/files/8d3a6dcd23a244f9277203a5011d5764fd9fc0ff0ef83b1a751011cf8278ca6949bcc242282b342ed6bc71fb086c6731d86e0b41308559ab12bae5d14b9a6a27","name":"2018-personality-data@1.csv","type":"text/csv","lastModified":1676761531212.96,"size":271896}] 43:{"id":"f18305333bd40fa6","slug":null,"title":"Brushable Scatterplot","thumbnail":"7bd07425adc2d4498b6db430149f5269a16923053340bc6a371547275a53e3d5","access_level":"public","create_time":"$D2023-02-18T07:11:20.275Z","update_time":"$D2023-02-24T19:06:52.906Z","view_time":null,"first_public_time":"$D2023-03-16T04:19:20.775Z","has_unpublished_edits":null,"fork":{"id":"589f9a25112ad1c2","slug":"brushable-scatterplot","title":"Brushable scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","bio":"Interaction Design at Sheridan College","following":false},"version":367,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0a8b950203491c0f","login":"ixd-sheridan","name":"IXD Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5d0881196900a7350c64d546dd5099a2532e7060f4150f97c1375dae8cb92d45","tier":"education_2026","role":"editor"},{"type":"individual","id":"cc12a38db89b0dcc","login":"liruito","name":"Ruitong Li","avatar_url":"https://avatars-next.observableusercontent.com/f4bd60aa6c61ac1135f76b1703403bcc67fb67cea319dae9a696d4b4c39402da","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 Scatterplot","cells":[{"id":1,"value":"# Brushable Scatterplot\n\nThis plot is about the relationship between openness and the scoring and evaluation of the same film. The data invited the interviewees to evaluate their openness and score the same film, so we can explore the relationship between people with different degrees of openness for the evaluation of the same film\n\nWhen I rearranged my notes, I could not find the original template, so I found another chart template with similar function and form\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"// addCircles = ƒ(svg, data, circleColor, circleSize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"note: selection displays the swept data and organizes it into a new array. It can be used as a filter to interact with other charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// z = d3.scaleLinear()\n// .domain(d3.extent(data, d => d.x)).nice()\n// .range([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":51,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([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":55,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// d3.selectAll(d.)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"2018-personality-data@1.csv\").text(), ({assigned_metric: name, predicted_rating_1: x, openness: y,}) => ({name, x: +x, y: +y})), {x: \"predicted_rating_1\", y: \"openness\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"### Change the color of the dot for each group of data\nI want the points on this plot to be colored by assigned metric. So I divided the data into four different categories according to different assigned metric. Then represent them as different colors in the plot style. I refer to for the classification method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"+ First use the d3.group function to divide the data into four groups by assigned metric names","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"MetricByName = d3.group(data, d => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"+ Then use the data.get function to extract and rename the four groups of data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"sort1 = MetricByName.get(\" serendipity\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"sort2 = MetricByName.get(\" all\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"sort3 = MetricByName.get(\" popularity\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"sort4 = MetricByName.get(\" diversity\")","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"