25:null 26:["$","title",null,{"children":"D3 Scatterplot | anndawn | Observable"}] 2b:T55b,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") const class_name="."+d.Institution_name.replaceAll(/\W/g,"").toLowerCase() d3.selectAll(class_name).transition().attr('stroke-width', "3px").attr("stroke","red") }) .on("mousemove", function(d){ return tooltip .html(`\ Institution: ${d.Institution_name}
\ Order Date: ${d3.timeFormat('%Y-%m-%d')(d.Date_order)}
\ Price per Mask: ${d.cal_unit_price}
\ Total Number of masks: ${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(d){ d3.select(this).transition().attr('stroke-width', "0px") const class_name="."+d.Institution_name.replaceAll(/\W/g,"").toLowerCase() d3.selectAll(class_name).transition().attr('stroke-width', "0px") return tooltip.html(``).style("visibility", "hidden"); }) }2c:[{"id":"f5f586ac3c87f55d7f265cd0ec69ffd0f92ee65fda71d31c5d22c60d30aa8222d4b6106395a7a31122fb294b9421024c7704392e69e410a716f813d02cb80d6e","href":"https://static.observableusercontent.com/files/f5f586ac3c87f55d7f265cd0ec69ffd0f92ee65fda71d31c5d22c60d30aa8222d4b6106395a7a31122fb294b9421024c7704392e69e410a716f813d02cb80d6e","name":"50_100_10_masks@2.csv","type":"text/csv","lastModified":1630638086678.475,"size":121715},{"id":"3b4c6ed6b5cd2f399f6dd5e1fe53468f17d39b352107c0929165f42ee683b88a465e38fd0cfca5d20b7632173bff16e8f26b72869623c10854d74790e4e5683a","href":"https://static.observableusercontent.com/files/3b4c6ed6b5cd2f399f6dd5e1fe53468f17d39b352107c0929165f42ee683b88a465e38fd0cfca5d20b7632173bff16e8f26b72869623c10854d74790e4e5683a","name":"mask_001 - 50_100_10_masks-2 (1).csv","type":"text/csv","lastModified":1630653043160.156,"size":114500},{"id":"5cd8a8edcb0acbf36abf24af20b66071e3331daad1f65b498edfa939634bb15f716cdafec402fa532f11e9588ce2222cb930649b6335fde10b0b00236d8c18e0","href":"https://static.observableusercontent.com/files/5cd8a8edcb0acbf36abf24af20b66071e3331daad1f65b498edfa939634bb15f716cdafec402fa532f11e9588ce2222cb930649b6335fde10b0b00236d8c18e0","name":"50_100_10_masks.csv","type":"text/csv","lastModified":1630652263720.182,"size":113665},{"id":"626e5da0f0f12cd8270e4bae12ccbec26c0b26d47dfa4b1e1d8369aaab692ea4248dfe4d408108da033450fec77b875c6bc78814ed7f533a20b4280b2bb93205","href":"https://static.observableusercontent.com/files/626e5da0f0f12cd8270e4bae12ccbec26c0b26d47dfa4b1e1d8369aaab692ea4248dfe4d408108da033450fec77b875c6bc78814ed7f533a20b4280b2bb93205","name":"mask_001 - 50_100_10_masks-2 (1)@1.csv","type":"text/csv","lastModified":1630653647057.363,"size":114498},{"id":"2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","href":"https://static.observableusercontent.com/files/2b410e0e791b43764376a92146017ae178fdf59cc6e2225b443874f8b73e83ca0ffc5ac3f5cb5395e9137adfe4e1f74e7f853e75b1c4b36cd8a8379ed2ae070f","name":"mask_scatter.csv","type":"text/csv","lastModified":1631424627899.834,"size":137633},{"id":"1f05e7c1ff3c02528cd2f37afea47587b81580b2e8484b2f3cb63b59bb2e3e2cbd0d134d963abead333df7aaeac92722f956a408d459d8ca60517d53c58547c1","href":"https://static.observableusercontent.com/files/1f05e7c1ff3c02528cd2f37afea47587b81580b2e8484b2f3cb63b59bb2e3e2cbd0d134d963abead333df7aaeac92722f956a408d459d8ca60517d53c58547c1","name":"mask_scatter@3.csv","type":"text/csv","lastModified":1631587045009.89,"size":136333}] 29:{"id":"3a2c4c76fcf07a64","slug":"d3-scatterplot/2","title":"D3 Scatterplot","thumbnail":"71742f39fc5600b6a726dd7d840b355bd8b8ae220d4dc2ba9ca2dacf1058e263","access_level":"public","create_time":"$D2021-09-03T03:01:26.678Z","update_time":"$D2021-09-14T02:39:17.376Z","view_time":null,"first_public_time":"$D2021-09-03T03:30:43.343Z","has_unpublished_edits":null,"fork":{"id":"37a1d1ae69e32bd4","slug":"d3-scatterplot","title":"D3 Scatterplot","owner":{"id":"08b25cc9d2cc09a6","login":"anndawn","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":560,"publish_version":560,"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":3,"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":77,"value":"viewof max_y = Inputs.range([0, 550000000], {step: 20, value:550000000, label: \"Max number of masks displayed\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof min_y = Inputs.range([1, max_y], {step: 20, value:100, label: \"Min number of masks displayed\" })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 750","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-12-31 00:00:00\")])\n .range([margin.left, width*0.9 - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"y = d3.scaleLog().base(2).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.cal_unit_price))])\n .range([1, 50]);","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":504,"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_use)\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: 80})","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":false,"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":544,"value":"color_institution_use=color_institution.map(d=>d.replaceAll(/\\W/g,\"\").toLowerCase())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"style0=html`\n\n`","pinned":false,"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@3.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('cal_unit_price')])\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"color_legend=swatches({\n color: 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\"]),\n columns: \"300px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"legend1={\n const values = [10,50, 125, 250]; // 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":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":2,"value":"chart = {\n const svg = d3.select(DOM.svg(width*0.9,height))\n .attr('id', 'grap') \n\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(mask_arrange)\n .join(\"circle\")\n .filter(d => (d.amount>min_y)&(d.amountcolor_institution_use.includes(d.Institution_name.replaceAll(/\\W/g,\"\").toLowerCase())?color_scale(d.Institution_name.replaceAll(/\\W/g,\"\").toLowerCase()):\"#ccc\")\n .attr(\"cx\", d => x(d.Date_order))\n .attr(\"cy\", d => y(d.amount))\n .attr(\"r\", d=>size_scale(d.cal_unit_price))\n .attr(\"class\",d=>d.Institution_name.replaceAll(/\\W/g,\"\").toLowerCase())\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"g\").append(\"text\").attr(\"x\",width*0.9-margin.right-100).attr(\"y\",height-margin.top-40).text(\"Date of Order\")\n svg.append(\"g\").append(\"text\").attr(\"x\",margin.left).attr(\"y\",margin.top-10).text(\"Number of masks purchased in the order\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"$2b","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":379,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"