2b:null 2c:["$","title",null,{"children":"Idiom4: Top 5 States per Year in terms of H1B Sponsoring Rates | Zhenyu Chen | Observable"}] 31:T11ff,// Copyright 2021 Observable, Inc. // Released under the ISC license. // Extensively modified from 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 = 3 // 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])); // console.log({X, Y, T, 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 / 80, xFormat); const xAxis = d3.axisBottom(xScale).ticks(d3.timeYear.every(1)); const yAxis = d3.axisLeft(yScale).ticks(height / 50, yFormat); // Tooltip const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const svg = container.append("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)); 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", i => collide(X, T, i)) .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); svg.append("g") .attr("fill", fill) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I) .join("circle") .attr("stroke", i => stroke(T[i])) .attr("cx", i => xScale(X[i])) .attr("cy", i => yScale(Y[i])) .attr("r", r) .call(tooltip, tooltipDiv); return container.node(); }32:T67e,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } }33:[{"id":"20f858b1dad8088b99d47095f6963f781a12e240286875dabb91e805eeb65d1f943ab78f2e1ef179d2374b33e5950689398529aae33587d32c45388a6a4408f6","href":"https://static.observableusercontent.com/files/20f858b1dad8088b99d47095f6963f781a12e240286875dabb91e805eeb65d1f943ab78f2e1ef179d2374b33e5950689398529aae33587d32c45388a6a4408f6","name":"red-blue-states@2.csv","type":"text/csv","lastModified":1682265520227.038,"size":738},{"id":"b6512c571f85cbafa0205ec644a6d0c91aac9d580e352fb467a07a43cf41e186786b64879b7f181376aee2aa04ccdd70e7f4a618f900332042074e7a33beeb19","href":"https://static.observableusercontent.com/files/b6512c571f85cbafa0205ec644a6d0c91aac9d580e352fb467a07a43cf41e186786b64879b7f181376aee2aa04ccdd70e7f4a618f900332042074e7a33beeb19","name":"idiom4-data.csv","type":"text/csv","lastModified":1682230479142.833,"size":6932}] 2f:{"id":"bb5f11112fda56f7","slug":null,"title":"Idiom4: Top 5 States per Year in terms of H1B Sponsoring Rates","thumbnail":"b65e6d602a491c1a1223e2f37feeebe5307888d2d564486a8887d85cc48c1fbb","access_level":"public","create_time":"$D2023-04-23T02:47:45.535Z","update_time":"$D2023-04-27T00:59:49.028Z","view_time":null,"first_public_time":"$D2023-04-23T02:47:45.535Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f9d2e396ea9c36e7","login":"zychen","name":"Zhenyu Chen","avatar_url":"https://avatars-next.observableusercontent.com/bd7f5338dd83e2af26a89fd5f8b3b8f2e371ac3333067f03ed98213201b91502","tier":"starter_2024"},"version":370,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"750bcf843c0f1afd","login":"zychen","name":"Zhenyu Chen","avatar_url":"https://avatars-next.observableusercontent.com/bd7f5338dd83e2af26a89fd5f8b3b8f2e371ac3333067f03ed98213201b91502","tier":null}],"members":[{"type":"individual","id":"750bcf843c0f1afd","login":"zychen","name":"Zhenyu Chen","avatar_url":"https://avatars-next.observableusercontent.com/bd7f5338dd83e2af26a89fd5f8b3b8f2e371ac3333067f03ed98213201b91502","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6ef963f51d22ba58","slug":"cs7295-final","title":"CS7295 Final","owner":{"id":"f9d2e396ea9c36e7","login":"zychen","name":"Zhenyu Chen"}},"type":"notebook","body":{"title":"Idiom4: Top 5 States per Year in terms of H1B Sponsoring Rates","cells":[{"id":0,"value":"# Idiom4: Top 5 States per Year in terms of H1B Sponsoring Rates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"viewof n = Inputs.range([1, 15], {label: html`Top n States`, step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = Scatterplot(topN, {\n x: d => new Date(d.year, 0, 1),\n y: d => d.rate,\n r: 4,\n title: d => d.state,\n xLabel: \"Year →\",\n yLabel: \"↑ H1B Sponsoring Rate %\",\n xType: d3.scaleTime,\n yType: d3.scaleLog,\n xDomain: [new Date(2016, 10, 1), new Date(2022, 7, 1)],\n stroke: getRedBlue,\n width,\n height: height\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"## Data Pre-Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"### H1B Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"topN = {\n return [...getTopN(2017), ...getTopN(2018), ...getTopN(2019), ...getTopN(2020), ...getTopN(2021), ...getTopN(2022)]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function getTopN(year) {\n return data.filter(d => parseInt(d.year) === parseInt(year)).sort((x, y) => (y.rate - x.rate)).slice(0,n)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"// Guam is not a state actually, so it's removed \ndata = rawData.filter(d => d.state !== \"Guam\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"rawData = FileAttachment(\"idiom4-data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"### Political Data\nSource: https://www.nytimes.com/interactive/2020/11/03/us/elections/results-president.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"redOrBlue = {\n const result = {}\n rawRedOrBlue.forEach(d => {result[d.state] = d.redOrBlue})\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"rawRedOrBlue = FileAttachment(\"red-blue-states@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"### Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"function getRedBlue(state) {\n if(redOrBlue[state] === \"blue\") {\n return \"steelblue\"\n } else if(redOrBlue[state] === \"red\") {\n return \"orangered\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"// manually avoid collide\nfunction collide(X, T, i) {\n if (X[i].toString().includes(\"2018\") && T[i] === \"Michigan\") {\n return \"1em\"\n } else if (X[i].toString().includes(\"2019\") && T[i] === \"Massachusetts\") {\n return \"-0.3em\"\n } else if (X[i].toString().includes(\"2021\") && T[i] === \"Massachusetts\") {\n return \"-0.3em\"\n } else if (X[i].toString().includes(\"2017\") && T[i] === \"Maryland\") {\n return \"1em\"\n } else { return \"0.35em\" }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"#### Tooltip\nAdapted from https://observablehq.com/@clhenrick/tooltip-d3-convention","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function setContents(i, tooltipDiv) {\n const Y = d3.map(topN, d => d.rate);\n const T = d3.map(topN, d => d.state);\n // console.log(T[i])\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data([i])\n .join(\"p\")\n .html(`${T[i]}: ${Y[i]}`)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"none\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"grey\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"tooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"