2d:null 2e:["$","title",null,{"children":"D3 Scatterplot | anndawn | Observable"}] 33:T4c7,// tooltip = { // chart // const tooltip = // d3.select('body').append('div') // .attr('class', 'tooltip') // .style('position', 'absolute') // .style('visibility', 'hidden').text('ege') // d3.select("#grap").selectAll("circle") // .on("mouseover", function(d){ // d3.select(this).transition().attr('stroke-width', "3px").attr("stroke","red") // // .attr('r', d=>size_scale(d.amount)*1.2) // }) // .on("mousemove", function(d){ // return tooltip // .html(`\ // Institution: ${d.Institution_name}
\ // Date: ${d3.timeFormat('%Y-%m-%d')(d.Date_order)}
\ // Price per Mask: ${d.cal_unit_price}
\ // Total Quantity: ${d.amount}
\ // Order Amount in Rand: ${d.order_num}
\ // `) // .style("top", (d3.event.pageY-10)+"px") // .style("left",(d3.event.pageX+20)+"px") // .style("visibility", "visible"); // }) // .on("mouseout", function(){ // d3.select(this).transition().attr('stroke-width', "0px") // // .attr('r', d=>size_scale(d.amount)) // return tooltip.html(``).style("visibility", "hidden"); // }) // }34:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1629697654540.498,"size":13506},{"id":"f5f1559e42ca76a66d17a3a73c2464af2475d3542d93656b0ff7349a7d3e87b4a9801b85e6d587a9821566ce77c97c68b6af87d631303960913f45e13a2d889c","href":"https://static.observableusercontent.com/files/f5f1559e42ca76a66d17a3a73c2464af2475d3542d93656b0ff7349a7d3e87b4a9801b85e6d587a9821566ce77c97c68b6af87d631303960913f45e13a2d889c","name":"mask2.csv","type":"text/csv","lastModified":1629697846422.876,"size":10596},{"id":"f5f586ac3c87f55d7f265cd0ec69ffd0f92ee65fda71d31c5d22c60d30aa8222d4b6106395a7a31122fb294b9421024c7704392e69e410a716f813d02cb80d6e","href":"https://static.observableusercontent.com/files/f5f586ac3c87f55d7f265cd0ec69ffd0f92ee65fda71d31c5d22c60d30aa8222d4b6106395a7a31122fb294b9421024c7704392e69e410a716f813d02cb80d6e","name":"50_100_10_masks@2.csv","type":"text/csv","lastModified":1630470651614.411,"size":121715},{"id":"2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","href":"https://static.observableusercontent.com/files/2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","name":"mask_scatter@1.csv","type":"text/csv","lastModified":1631586125562.575,"size":137633},{"id":"2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","href":"https://static.observableusercontent.com/files/2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","name":"mask_scatter.csv","type":"text/csv","lastModified":1631586108662.654,"size":137633}] 31:{"id":"37a1d1ae69e32bd4","slug":"d3-scatterplot","title":"D3 Scatterplot","thumbnail":"d044fa8a1cd6c24f2211f26b4384521f4e8712a9c84803297255fc3016e75869","access_level":"public","create_time":"$D2021-08-23T05:47:34.540Z","update_time":"$D2021-09-14T02:22:04.997Z","view_time":null,"first_public_time":"$D2021-08-26T09:01:34.227Z","has_unpublished_edits":null,"fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":456,"publish_version":456,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null}],"members":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"D3 Scatterplot","cells":[{"id":0,"value":"# D3 Scatterplot\n\nA good starting point for many two-dimensional charts with x and y axes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"d3.extent(all_mask.map(d=>d.cal_unit_price))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"viewof max_y = Inputs.range([0, 250], {step: 20, value:250, label: \"Max price per mask displayed\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof min_y = Inputs.range([0, max_y], {step: 20, value:0, label: \"Min price per mask displayed\" })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"mask=FileAttachment(\"mask_scatter@1.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x = d3.scaleTime()\n .domain([new Date(\"2020-01-01 00:00:00\"), new Date(\"2021-06-30 00:00:00\")])\n .range([margin.left, width*0.8 - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"y = d3.scaleLinear()\n .domain([min_y,max_y]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"size_scale = d3.scaleSqrt()\n .domain([0, d3.max(all_mask.map(d=>d.amount))])\n .range([3, 100]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"color_institution.push(\"Others\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"color_institution","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"color_scale=d3.scaleOrdinal()\n .domain(color_institution)\n .range([\"#025DF4\",\"#DB6BCF\",\"#2498D1\",\"#BBBDE6\",\"#4045B2\",\"#21A97A\",\"#FF745A\",\"#007E99\",\"#FFA8A8\",\"#2391FF\",\"#FFC328\",\"#A0DC2C\",\"#946DFF\",\"#626681\",\"#EB4185\",\"#CD8150\",\"#36BCCB\",\"#327039\",\"#803488\",\"#83BC99\",\"#ccc\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({top: 25, right: 20, bottom: 100, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"margin2 = ({top: 25, right: 120, bottom: 100, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {\n tidy,\n startsWith,\n groupBy,\n summarize,\n sum,\n mutate,\n select,\n n,\n mean,\n everything,\n arrange,\n desc,\n filter,\n rate,\n TMath,\n pivotWider,\n pivotLonger,\n leftJoin,\n count,\n map,\n complete,\n fill\n} from '@pbeshai/tidyjs' // observable import","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"institution_data=tidy(\n all_mask,\n groupBy('Institution_name', [\n summarize({ total: n('value') })\n ]),\n arrange([desc('total')])\n\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"color_institution=institution_data.map(d=>d.Institution_name).slice(0,20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"style0=html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"all_mask=FileAttachment(\"mask_scatter.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"mask_arrange=\n tidy(\n all_mask,\n arrange([desc('amount')])\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"mask_arrange2=\n tidy(\n all_mask,\n arrange([desc('order_num')])\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"d3.max(all_mask.map(d=>d.order_num))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"x2_amount= d3.scaleLog().base(2)\n .domain([min_amount,max_amount]).nice()\n .range([margin2.left, width - margin2.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"xAxis2 = g => g\n .attr(\"transform\", `translate(0,${height - margin2.bottom})`)\n .call(d3.axisBottom(x2_amount))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"yAxis2 = g => g\n .attr(\"transform\", `translate(${margin2.left},0)`)\n .call(d3.axisLeft(y2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"y2 = d3.scaleLinear()\n .domain([min_y,max_y]).nice()\n .range([height - margin2.bottom, margin2.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"d3.extent(all_mask.map(d=>d.amount))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof max_amount = Inputs.range([0, 550000000], {step:10000, value:550000000, label:\"max quantity of masks in the order displayed\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"viewof min_amount = Inputs.range([1, 500000000], {step:10000, value:1, label:\"min quantity of masks in the order displayed\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"d3.max(all_mask.map(d=>d.order_num))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"color_legend=swatches({\n color: color_scale,\n columns: \"300px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"size_scale2 = d3.scaleSqrt()\n .domain([0, d3.max(all_mask.map(d=>d.order_num))])\n .range([3, 100]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"legend2={\n const values = [5000000, 20000000, 50000000, 100000000]; // hint: add 0 in this array…\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"legend1={\n const values = [25000000,100000000, 250000000, 500000000]; // hint: add 0 in this array…\n\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":" d3.max(all_mask.map(d=>d.amount))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"download_svg= DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"download_svg2= DOM.download(() => serialize(chart2), undefined, \"Save as SVG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"chart = {\n const svg = d3.select(DOM.svg(width,height))\n .attr('id', 'grap')\n \n \n\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(mask_arrange)\n .join(\"circle\")\n .filter(d => (d.cal_unit_price>min_y)&(d.cal_unit_pricecolor_institution.includes(d.Institution_name)?color_scale(d.Institution_name):\"#ccc\")\n .attr(\"cx\", d => x(d.Date_order))\n .attr(\"cy\", d => y(d.cal_unit_price))\n .attr(\"r\", d=>size_scale(d.amount));\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n svg.append(\"g\").append(\"text\").attr(\"x\",width-margin.right-100).attr(\"y\",height-margin.top+20).text(\"Date of Order\")\n svg.append(\"g\").append(\"text\").attr(\"x\",margin.left).attr(\"y\",margin.top-10).text(\"Price per mask(R)\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"chart2 = {\n const svg = d3.select(DOM.svg(width,height))\n .attr('id', 'grap2')\n \n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(mask_arrange2)\n .join(\"circle\")\n .filter(d => (d.cal_unit_price>min_y)&(d.cal_unit_pricecolor_institution.includes(d.Institution_name)?color_scale(d.Institution_name):\"#ccc\")\n .attr(\"cx\", d => x2_amount(d.amount))\n .attr(\"cy\", d => y2(d.cal_unit_price))\n .attr(\"r\", d=>size_scale2(d.order_num));\n svg.append(\"g\")\n .call(xAxis2);\n\n svg.append(\"g\")\n .call(yAxis2);\n svg.append(\"g\").append(\"text\").attr(\"x\",width-margin2.right*2.5).attr(\"y\",height-margin2.top-margin2.bottom/5).text(\"Total quantity of masks in the order\")\n svg.append(\"g\").append(\"text\").attr(\"x\",margin2.left).attr(\"y\",margin2.top-10).text(\"Price per mask(R)\")\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"tooltip2 = {\n chart2\n const tooltip2 =\n d3.select('body').append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('visibility', 'hidden').text('ege')\n\n d3.selectAll(\"circle\")\n .on(\"mouseover\", function(d){\n d3.select(this).transition().attr('stroke-width', \"3px\").attr(\"stroke\",\"red\")\n })\n .on(\"mousemove\", function(d){\n return tooltip2\n.html(`\\\nInstitution: ${d.Institution_name}
\\\nDate: ${d3.timeFormat('%Y-%m-%d')(d.Date_order)}
\\\nPrice per Mask: ${d.cal_unit_price}
\\\nTotal Quantity: ${d.amount}
\\\nOrder Amount in Rand: ${d.order_num}
\\\n\n\n`)\n .style(\"top\", (d3.event.pageY-10)+\"px\")\n .style(\"left\",(d3.event.pageX+20)+\"px\")\n .style(\"visibility\", \"visible\");\n })\n .on(\"mouseout\", function(){\n d3.select(this).transition().attr('stroke-width',\"0px\") \n return tooltip2.html(``).style(\"visibility\", \"hidden\");\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"