3f:null 40:["$","title",null,{"children":"Scatterplot with shapes | JONATHAN LEE | Observable"}] 46:T43f,viewof charts20191concat= { const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); // const brushable = vl.selectInterval().encodings('x').resolve('intersect'); const ValenceDance = vl .data(salmon_trim) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.color().fieldN("CU_name").scale(['Blue', 'Orange']), vl.shape().fieldN("CU_name"), vl.size(200), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint().data(salmon_trim) .params(panzoom) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint().data(salmon_trim) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) ) return vl.hconcat(ValenceDance).render() }47:T12fe,viewof chartsshuconcat= { const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); // const brushable = vl.selectInterval().encodings('x').resolve('intersect'); //this is graph 1 const salmonshu = vl .data(salmon_isolate_shu) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.color().fieldN("CU_name"), vl.shape().fieldN("CU_name"), vl.size(200), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint({shape:'triangle-up',fill:'black'}).data(salmon_isolate_shu) .params(panzoom,brush) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint({shape:'triangle-up',fill:'black'}).data(salmon_isolate_shu) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) .width(200) .height(200) ) //this is graph 2 const salmon_bowron = vl .data(salmon_isolate_bow) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.color().fieldN("CU_name").scale(['Blue', 'Orange']), vl.size(200), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint({shape:'triangle-up',fill:'purple'}).data(salmon_isolate_bow) .params(panzoom,brush) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint({shape:'triangle-up',fill:'purple'}).data(salmon_isolate_bow) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) .width(200) .height(200) ) //this is graph 3 const salmon_tak = vl .data(salmon_isolate_tak) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.color().fieldN("CU_name").scale(['Blue', 'Orange']), vl.shape().fieldN("CU_name"), vl.size(200), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint().data(salmon_isolate_tak) .params(panzoom,brush) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint().data(salmon_isolate_tak) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) .width(200) .height(200) ) //this is graph 4 const salmon_quen = vl .data(salmon_isolate_quen) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.color().fieldN("CU_name").scale(['Blue', 'Orange']), vl.shape().fieldN("CU_name"), vl.size(200), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint().data(salmon_isolate_quen) .params(panzoom,brush) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint().data(salmon_isolate_quen) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) .width(200) .height(200) ) //this is graph 5 const salmon1 = vl .data(salmon_trim) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) ) .layer( vl.markPoint({shape:'triangle-up'}).data(salmon_trim) .params(panzoom,brush) .encode( vl.y().fieldQ("Pressure Intensity"), vl.x().fieldQ("Area in Hectares"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])), vl.markPoint({shape:'triangle-up', color:'grey'}).data(salmon_trim) .encode( vl.y().fieldQ("forest_pv"), vl.x().fieldQ("Area_ha"), vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')]) // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) .width(900) .height(400) ) return vl.vconcat(vl.hconcat(salmonshu,salmon_bowron,salmon_tak,salmon_quen),salmon1) .render() }48:T4ce,chart = { // Specify the chart’s dimensions. const width = 640; const height = 400; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; // Define the horizontal scale. const x = d3.scaleSqrt() .domain(d3.extent(salmon, d => d.Area_ha)) .range([marginLeft, width - marginRight]); // Define the vertical scale. const y = d3.scaleLinear() .domain(d3.extent(salmon, d => d.forest_pv)).nice() .range([height - marginBottom, marginTop]); // Create the container SVG. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)); // Append a circle for each data point. svg.append("g") .selectAll("circle") .data(salmon) .join("circle") .attr("cx", d => x(d.Area_ha)) .attr("cy", d => y(d.forest_pv)) .attr("r", 3); return svg.node(); }49:T1092,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/scatterplot function Scatterplot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value r = 3, // (fixed) radius of dots, in pixels title, // given d in data, returns the title marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = r * 2, // inset the default range, in pixels insetTop = inset, // inset the default y-range insetRight = inset, // inset the default x-range insetBottom = inset, // inset the default y-range insetLeft = inset, // inset the default x-range width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // [bottom, top] xLabel, // a label for the x-axis yLabel, // a label for the y-axis xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis fill = "none", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots halo = "#fff", // color of label halo haloWidth = 6 // padding around the labels } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const T = title == null ? null : d3.map(data, title); const I = d3.range(X.length).filter(i => !isNaN(X[i]) && !isNaN(Y[i])); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = d3.extent(Y); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 20, xFormat); const yAxis = d3.axisLeft(yScale).ticks(height / 50, yFormat); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", marginTop + marginBottom - height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); svg.append("g") .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I) .join("circle") .attr("cx", i => xScale(X[i])) .attr("cy", i => yScale(Y[i])) .attr("r", r); if (T) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(I) .join("text") .attr("dx", 7) .attr("dy", "0.35em") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .text(i => T[i]) .call(text => text.clone(true)) .attr("fill", "none") .attr("stroke", halo) .attr("stroke-width", haloWidth); return svg.node(); }4a:[{"id":"67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","href":"https://static.observableusercontent.com/files/67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","name":"iris.csv","type":"text/csv","lastModified":1720729093609.113,"size":3712},{"id":"d6019727b02928a54605347b10c6fa40ea08d0ccc5d7590cdd060af120ceea7caf10b7e2796e80aa435a680331cee45cd898782f6716f7f6c2c4e638e28244b7","href":"https://static.observableusercontent.com/files/d6019727b02928a54605347b10c6fa40ea08d0ccc5d7590cdd060af120ceea7caf10b7e2796e80aa435a680331cee45cd898782f6716f7f6c2c4e638e28244b7","name":"salmon_sockeye - Sheet1.csv","type":"text/csv","lastModified":1720730046442.845,"size":35239},{"id":"fcb39f6eaee54d559bbd8396306b5d0de23ba80480aab92da1a1e1533a1a17e1e7826f6fb31181d1e7058f25dd6cf6727bd75bd58d7a908d72773e0c45245f9d","href":"https://static.observableusercontent.com/files/fcb39f6eaee54d559bbd8396306b5d0de23ba80480aab92da1a1e1533a1a17e1e7826f6fb31181d1e7058f25dd6cf6727bd75bd58d7a908d72773e0c45245f9d","name":"CKspanwers(1).xls - se_spwng_zoi_CK_split.csv","type":"text/csv","lastModified":1721250237760.94,"size":2692},{"id":"b52f9c67effbca1d9819ec2426032e3c3546bfa5e2fd7e591fe391600e6177ddfbdd16445807d3de811d8192e416b71633c6f4d55f969ddbdd6087645e3f57e1","href":"https://static.observableusercontent.com/files/b52f9c67effbca1d9819ec2426032e3c3546bfa5e2fd7e591fe391600e6177ddfbdd16445807d3de811d8192e416b71633c6f4d55f969ddbdd6087645e3f57e1","name":"fraser_ckcus_fwas_WORKINGCOPY.xlsx - FWAWatersheds_ckcus.csv","type":"text/csv","lastModified":1721942787485.625,"size":1197152}] 44:{"id":"eb9b69bb5ee63cbe","slug":"salmony_salmon","title":"Scatterplot with shapes","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-07-11T20:18:13.609Z","update_time":"$D2024-07-26T17:50:50.357Z","view_time":null,"first_public_time":"$D2024-07-11T20:18:13.609Z","has_unpublished_edits":null,"fork":{"id":"bb8fa3789c777a5a","slug":"scatterplot-with-shapes","title":"Scatterplot with shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5279745599ecab8c","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":"starter_2024","bio":"","following":false},"version":904,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"33167a7598de2d43","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"33167a7598de2d43","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":null,"role":"editor"},{"type":"team","id":"5279745599ecab8c","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scatterplot with shapes","cells":[{"id":1,"value":"

Scatterplot with shapes

D3 › Gallery

\n\n# Salmon Friends Now with Zoom!\n\nThis chart shows the relationship between sepal width (*y*-axis) and sepal length (*x*-axis) for three species of Iris.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"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":433,"value":"salmon = FileAttachment(\"salmon_sockeye - Sheet1.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":860,"value":"salmon_CU_CHNK = FileAttachment(\"fraser_ckcus_fwas_WORKINGCOPY.xlsx - FWAWatersheds_ckcus.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":665,"value":"chinookspawn = FileAttachment(\"CKspanwers(1).xls - se_spwng_zoi_CK_split.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":608,"value":"salmon_trim =\n salmon.filter(function isolateCU(d){\n return (d.Area_ha <= 22000)\n return\n })\n \n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"viewof chartsshuconc1at= \n\n vl.data(salmon)\n .encode(\n vl.y().fieldQ(\"forest_pv\"),\n vl.x().fieldQ(\"Area_ha\"),\n vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])\n )\n .layer(\n vl.markPoint({shape:'triangle-up', color:'purple',fill:'green'\n })\n )\n .width(600)\n .height(300)\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"viewof chartsalmontotal= \n\n vl.data(salmon)\n .encode(\n vl.y().fieldQ(\"forest_pv\"),\n vl.x().fieldQ(\"Area_ha\"),\n vl.tooltip([vl.fieldN('CU_name'),vl.fieldQ('Area_ha')])\n )\n .layer(\n vl.markPoint({shape:'triangle-up', color:'purple',fill:'purple'})\n )\n .width(600)\n .height(200)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"salmon_isolate_shu = salmon.filter(function isolateCU(d){\n return d.CU_name ===\"Shuswap_Complex_Early_Summer_Timing\" &&(d.Area_ha <= 22000)\n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"salmon_isolate_bow = salmon.filter(function isolateCU(d){\n return (d.CU_name ===\"Bowron_Early_Summer_Timing\") &&(d.Area_ha <= 22000) \n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"salmon_isolate_chnk = salmon_CU_CHNK.filter(function isolateCU(d){\n return (d.chinook_cu === \"Middle Fraser River (Summer 5-2)\")&&(d.forest_dist_pv >\"14.00\") && (d.forest_dist_pv <\"30.00\") &&(d.spawning ==\"1\")\n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"salmon_isolate_chnk1 = salmon_CU_CHNK.filter(function isolatespawners(d) {\n return (d.forest_dist_pv >\"30.00\")\n \n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"salmon_isolate_quen = salmon.filter(function isolateCU(d){\n return d.CU_name ===\"Quesnel_Summer_Timing\" \n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"salmon_isolate_tak = salmon.filter(function isolateCU(d){\n return d.CU_name ===\"Takla_Trembleur_Stuart_Summer_Timing\" &&(d.Area_ha <= 22000)\n return\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"vega.scheme('basic', ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"function grey(f){\n var g = Math.max(0,Math.min(255, Math.round(255 * f))) + '';\n return 'rgb(' + g + ', ' + g + ', ' + g + ')';\n}\nvega.scheme(\"mygrey\",grey);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"import {Range, Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"