3f:null 40:["$","title",null,{"children":"ScatterPlot | Jasper Croome | Observable"}] 46:T175d,{ const xDomain = [0, d3.extent(data.map((d) => d.x * 1.05))[1]]; const yDomain = [0, d3.extent(data.map((d) => d.y * 1.05))[1]]; const zDomain = d3.extent(data.map((d) => d.z)); const xScale = d3.scaleLinear(xDomain, [ dimensions.margin, dimensions.width - dimensions.margin ]); const yScale = d3.scaleLinear(yDomain, [ dimensions.height - dimensions.margin, dimensions.margin ]); const zScale = d3.scaleLinear(zDomain, [5, 5]); const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); // create & apply the styling to the thresholdIndicator if ( threshold.show && threshold.showIndicator && threshold.criteria !== "===" ) { switch (threshold.target) { case "x": { svg .append("rect") .attr( "width", Array.isArray(threshold.value) ? xScale(threshold.value[1]) - xScale(threshold.value[0]) : 1 ) .attr("height", dimensions.height - dimensions.margin * 2) .attr("y", dimensions.margin) .attr( "x", Array.isArray(threshold.value) ? xScale(threshold.value[0]) : xScale(threshold.value) ) .attr("class", "thresholdIndicator"); } break; case "y": { svg .append("g") .attr("class", "thresholdIndicator") .attr( "transform", `translate(${dimensions.margin}, ${yScale(threshold.value)})` ) .call((g) => g .append("use") .attr("href", `#line-horizontal-${threshold.drawingStyle}`) .attr("width", dimensions.width - dimensions.margin * 2) .attr("height", 30) .attr("stroke", "#000") ); } break; default: return; } const thresholdIndicator = svg.select(".thresholdIndicator"); const thresholdIndicatorStyle = Object.entries(threshold.indicatorStyle); thresholdIndicatorStyle.map((t) => { thresholdIndicator.style(t[0], t[1]); }); } if (axes.axisLeft.show) { svg .append("g") .attr("transform", `translate(${dimensions.margin}, 0)`) .attr("class", "axis") .call( d3 .axisLeft(yScale) .tickArguments([axes.axisLeft.tickCount, axes.axisLeft.tickFormat]) ); svg .append("text") .attr("class", "axisLabel left") .attr("text-anchor", "end") .attr("dy", ".75em") .attr("transform", "rotate(-90)") .attr("x", -dimensions.margin) .text(axes.axisLeft.label); } if (axes.axisBottom.show) { svg .append("g") .attr( "transform", `translate(0, ${dimensions.height - dimensions.margin})` ) .attr("class", "axis") .call( d3 .axisBottom(xScale) .tickArguments([ axes.axisBottom.tickCount, axes.axisBottom.tickFormat ]) ); svg .append("text") .attr("class", "axisLabel bottom") .attr("text-anchor", "beginning") .attr("x", dimensions.margin) .attr("y", dimensions.height - dimensions.margin / 3) .text(axes.axisBottom.label); } const axisPath = svg.selectAll(".axis .domain"); const axisTickLine = svg.selectAll(".axis .tick").selectAll("line"); const axisTickText = svg.selectAll(".axis .tick").selectAll("text"); const axisLabel = svg.selectAll(".axisLabel"); const axisLineStyleArray = Object.entries(axisStyle.lines); const axisFontStyleArray = Object.entries(axisStyle.font); const axisLabelStyleArray = Object.entries(axisLabelStyle); axisLineStyleArray.map((s) => { axisPath.style(s[0], s[1]); axisTickLine.style(s[0], s[1]); }); axisFontStyleArray.map((s) => { axisTickText.style(s[0], s[1]); }); axisLabelStyleArray.map((s) => { axisLabel.style(s[0], s[1]); }); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "title") .attr("y", dimensions.margin * (2 / 3)); const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.map((t) => { titleText.style(t[0], t[1]); }); svg .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", (d) => zScale(d.z)) .attr("class", (d) => thresholdChecker( d[threshold.target], threshold.show, threshold.value, threshold.criteria ) ); // add the custom symbols for callouts svg .append("g") .attr("strokeWidth", "2px") .selectAll("g") .data( data.filter( (d) => thresholdChecker( d[threshold.target], threshold.show, threshold.value, threshold.criteria ) === "threshold" ) ) .join("g") .attr( "transform", (d) => `translate(${xScale(d.x) - 12.5},${yScale(d.y) - 12.5})` ) .call((g) => g .append("use") .attr("href", `#circle-${threshold.drawingStyle}-open`) .attr("height", "25px") .attr("width", "25px") .attr("opacity", "1") .attr("stroke", "salmon") ); // apply the standard style to the circles const styleArray = Object.entries(elementStyle); styleArray.map((s) => { svg.selectAll("circle").style(s[0], s[1]); }); // apply the threshold style to the circles if (threshold.show) { const thresholdCircles = svg.selectAll(".threshold"); const thresholdStyle = Object.entries(threshold.style); thresholdStyle.map((t) => { thresholdCircles.style(t[0], t[1]); }); } return svg.node(); }47:T4d5,function thresholdChecker(dValue, showThreshold, thresholdValue, criteria,) { const multiValues = Array.isArray(thresholdValue) const value = dValue const threshold = thresholdValue let sortedThreshold = [] if (multiValues) { sortedThreshold[0] = Math.min( threshold[0],threshold[1] ) sortedThreshold[1] = Math.max( threshold[0],threshold[1] ) } if (showThreshold) { switch(criteria) { case ">": { if (value > threshold) return 'threshold' } break; case "<": { if (value < threshold) return 'threshold' } break; case "<=": { if (value <= threshold) return 'threshold' } break; case ">=": { if (value >= threshold) return 'threshold' } break; case "><": { if (value > sortedThreshold[0] && value < sortedThreshold[1]) return 'threshold' } break; case "<>": { if (value < sortedThreshold[0] || value > sortedThreshold[1]) return 'threshold' } break; case "===": { if (multiValues) { if ( value === threshold[0] ) { return 'threshold' } else if ( value === threshold[1] ) { return 'subtle' } } else if ( value === threshold ) return 'threshold' } break; } } else return; } 48:T78f0,// Custom SVG Shapes handDrawn = svg` `49:[] 44:{"id":"8f04ef7b039843a7","slug":"scatterplot","title":"ScatterPlot","thumbnail":"f5bf723f6a378d3017792f794663a0cd99b8fed02a2eb58bae7ca4b42f99f92a","access_level":"public","create_time":"$D2021-10-23T13:03:17.556Z","update_time":"$D2021-11-02T22:58:59.625Z","view_time":null,"first_public_time":"$D2021-10-24T14:05:26.386Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":877,"publish_version":877,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ScatterPlot","cells":[{"id":0,"value":"# ScatterPlot\n\nThis is a basic scatter-plot, generally used to visualize the relationship between two values, plotted on the `x` and `y` axis. \n\nThis chart also allows for one additional quantitative and qualitative value per data point (`z` and `category`, respectively).\n\nThere are various levers you can pull with this chart, and they're explained in the next three sections. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"## 1. Declare your Data\n\nThis is where you would declare data as whatever you want to graph. For this chart, it needs to have at least an `x`, `y` & `z` value for each dot, à la: \n\n```{ x:5, y:2, z:15 }```\n\nYou can also add in a `category` value to allow for differentiation across groups. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"// example dataset\ndata = range.map((r,i)=>({ // for this example, we're creating an 'array' of random x, y & z values.\n x:Math.max(Math.random(),.1), // x axis placement\n y:Math.max(Math.random(),.1)*100000, // y axis placement\n z:5, // sizing of dots. to standardize, try running this with a value like \"z:20\"\n category: (i % 5 === 1 ) ? 'snails' : (i % 5 === 0 ) ? 'oranges' : 'wallabies'\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"## 2. Define your Axes\nThis is where you define the axes - whether or not to show them, label them, and how to format the ticks.\nFor more on formatting numbers in d3, [take a look here](https://github.com/d3/d3-format).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// \n\naxes = Object({\n axisLeft:{\n show:true,\n label:'Sample Y Axis',\n tickFormat:'s',\n tickCount:5\n },\n axisBottom:{\n show:true,\n label:'Sample X Axis',\n tickFormat:'f',\n tickCount:5\n }, \n axisRight:{show:false}, // for now, this does nothing\n axisTop:{show:false} // samesies\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"## 3. Define your Threshold\n\nLikely the most important aspect of evolving data & information into insights, **thresholds** allow the presenter to highlight specific data points for any number of reasons. In this chart, you can highlight any field (x, y, z, or category) for being over, under, or equal to a specific value. You can also highlight items within or outside of a certain range. \n\nPlay around with the variables in the cell below to see how it changes the highlight in the scatterplot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"// This is where you declare what the threshold is (if there is one), and whether or not to display it. An example is provided below.\nthreshold = Object({\n show: true, // toggles whether or not to show\n showIndicator: true,\n target: \"y\", // can be x, y, z or category\n criteria: \">\", // can be any combination of '>','=','<', or '===' for string comparison\n value: \"75000\", // can either be one value or two (for comparing against a range, e.g. 'between 3.4 and 4.2' would be 'value: [3.4, 4.2]')\n drawingStyle: \"brush\", // choose brush, pencil, or computer\n style: { fill: \"salmon\" }, // the style passed through to any of the elements\n indicatorStyle: {\n stroke: \"#858585\"\n } // the style for the indicator line (if shown)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"dimensions = Object({height:400, width:600, margin:60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"axisStyle = Object({\n lines:{\n stroke:'#858585',\n 'stroke-width':'1px'\n },\n font:{\n 'font-size':'16px',\n 'font-weight':400,\n 'fill':'#858585',\n 'stroke-width':'1px',\n 'font-family':'helvetica',\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"axisLabelStyle = Object({\n 'font-weight':400,\n 'font-size':'20',\n 'font-family':'helvetica',\n 'fill':'#6F6F6F'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"titleStyle = Object({\n 'font-size':'31.25px',\n 'font-weight':400,\n 'font-family':'helvetica, sans-serif',\n 'fill':'#707070'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// the basic style for elements within the chart\nelementStyle = Object({fill:'#b5b5b5'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"range = d3.range(42)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = \"Sample Scatter Plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"