31:Ta2d,bar = { const svg = d3.select(DOM.svg(width, height)); const LEGEND_X = 800; const LEGEND_SIZE = 10; bar_data.sort((a, b) => b.Median - a.Median); bar_x.domain(bar_data.map(d => d.Major_category)); // Different Bar Graphs (Explicitly Set womenBar for the Share of Women Stacked Bar Chart) const bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(bar_data, d => d.Major_category) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", -bar_x.bandwidth()) .attr("y", 0) .attr("transform", d => bar_rotate(bar_x(d.Major_category), bar_y(0), 180)) .attr("width", bar_x.bandwidth()); const womenBar = svg.append("g") .attr("fill", "red") .selectAll("rect") .data(bar_data, d => d.Major_category) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", -bar_x.bandwidth()) .attr("y", 0) .attr("transform", d => bar_rotate(bar_x(d.Major_category), bar_y(0), 180)) .attr("width", bar_x.bandwidth()) .attr("height", d => bar_y(0) - bar_y(d["ShareWomen"] * d["Total"])) .style("opacity", 0); // Legend var barLegends = svg.selectAll(".groups") .data(bar_legend) .enter() .append("g") .attr("class", "barLegend") .style("opacity", 0); barLegends .append("rect") .attr("x", LEGEND_X) .attr("y", d => d.y) .attr("width", LEGEND_SIZE) .attr("height", LEGEND_SIZE) .attr("fill", d => d.color); barLegends .append("text") .text(d => d.gender) .attr("x", LEGEND_X + 2 * LEGEND_SIZE) .attr("y", d => d.y + LEGEND_SIZE) .style("font-size", "13px"); // Axes const gx = svg.append("g") .call(bar_xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-60)"); const gy = svg.append("g") .call(bar_yAxis); // Update Logic (Simulates Scroll) svg.node().update = (bys) => { const t = svg.transition().duration(750); if(shareWomen) { womenBar.transition().duration(1500).style("opacity", 1); barLegends.transition().duration(1500).style("opacity", 1); bar.data(bar_data, d => d.Major_category).attr("height", d => bar_y(0) - bar_y(d["Total"])); } else { bar.data(bar_data, d => d.Major_category).transition().duration(1500).attr("height", d => bar_y(0) - bar_y(d[bys])); womenBar.transition().duration(1500).style("opacity", 0); } }; return svg.node(); };32:T7b3,splot = { const svg = d3.select(DOM.svg(width, height)); svg.style("border", "1px solid #bbbbbb"); const g = svg.append("g").attr("id", "circles"); g.selectAll("rect") .data(splot_unemp_rects) .enter() .append("rect") .attr("x", d => d.x) .attr("width", d => d.width) .attr("y", d => d.y) .attr("height", d => d.height) .attr("fill", "#808080") .attr("opacity", "0.75"); g.selectAll("circle") .data(splot_data) .enter() .append("circle") .attr("cx", d => splot_x(d.Median)) .attr("cy", d => splot_unemp_y(d.Unemployment_rate)) .attr("r", r) .style("fill", d => splot_color(d.Major_category)); svg.append("g").attr("id", "annotation"); svg.append("g").call(splot_xAxis); svg.append("g").call(splot_unemp_yAxis); var legend = svg.selectAll("legend") .data(splot_color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", splot_color); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); /*svg.node().update = () => { g.selectAll("rect") .data(splot_women_rects) .attr("x", d => d.x) .attr("width", d => d.width) .attr("y", d => d.y) .attr("height", d => d.height) .attr("fill", "#808080") .attr("opacity", "0.75"); g.selectAll("circle") .data(splot_data) .transition() .duration(800) .ease(d3.easeLinear) .attr("cx", d => splot_x(d.Median)) .attr("cy", d => splot_women_y(d.ShareWomen)) .attr("r", r) .style("fill", d => splot_color(d.Major_category)); };*/ return svg.node(); };33:T481,viewof major_categ = { const select = html``; Promises.delay(2000).then(() => { select.selectedIndex = 1; select.dispatchEvent(new CustomEvent("input")); }); return select; };34:T424,bar_data = d3.csv("https://gist.githubusercontent.com/shpach/6413032be4ce6e57c46d84458c21dd38/raw/184af816311e3938f9ebd2c80d8f51d3b9a79cfe/agg-recent-grads.csv", function(data) { return { Major_code: data.Major_code, Major: data.Major, Major_category: data.Major_category, Total: parseInt(data.Total), Sample_size: parseInt(data.Sample_size), Men: parseInt(data.Men), Women: parseInt(data.Women), ShareWomen: parseFloat(data.ShareWomen), Employed: parseInt(data.Employed), Full_time: parseInt(data.Full_time), Part_time: parseInt(data.Part_time), Full_time_year_round: parseInt(data.Full_time_year_round), Unemployed: parseInt(data.Unemployed), Unemployment_rate: parseFloat(data.Unemployment_rate), Median: parseInt(data.Median), College_jobs: parseInt(data.College_jobs), Non_college_jobs: parseInt(data.Non_college_jobs), Low_wage_jobs: parseInt(data.Low_wage_jobs), Percent_college_jobs: parseFloat(data.PercentCollegeJobs) } } );35:T428,hover = { const svg = d3.select(splot); const status = html` hover: none `; splot_circles.on("mouseover.hover", function(d) { let me = d3.select(this); let div = d3.select("body").append("div"); div.attr("id", "details"); div.attr("class", "tooltip"); let keys = Object.keys(d); let rows = div.append("table") .selectAll("tr") .data(keys) .enter() .append("tr"); rows.append("th").text(key => key); rows.append("td").text(key => d[key]); d3.select(status).text("hover: " + d.major); }); splot_circles.on("mousemove.hover", function(d) { let div = d3.select("div#details"); let bbox = div.node().getBoundingClientRect(); // Get Height of Tooltip div.style("left", d3.event.clientX + "px") div.style("top", (d3.event.clientY - bbox.height) + "px"); }); splot_circles.on("mouseout.hover", function(d) { d3.selectAll("div#details").remove(); d3.select(status).text("hover: none"); }); return status; };36:T44b,splot_unemp_rects = [ {x: 0, width: splot_x(d3.quantile(medians, 0.75)), y: splot_unemp_y(d3.quantile(unemp_rates, 0.75)), height: splot_unemp_y(d3.quantile(unemp_rates, 0.25)) - splot_unemp_y(d3.quantile(unemp_rates, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: splot_unemp_y(d3.quantile(unemp_rates, 0.75)), height: splot_unemp_y(d3.quantile(unemp_rates, 0.25)) - splot_unemp_y(d3.quantile(unemp_rates, 0.75))}, {x: splot_x(d3.quantile(medians, 0.25)), width: width, y: splot_unemp_y(d3.quantile(unemp_rates, 0.75)), height: splot_unemp_y(d3.quantile(unemp_rates, 0.25)) - splot_unemp_y(d3.quantile(unemp_rates, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: 0, height: splot_unemp_y(d3.quantile(unemp_rates, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: splot_unemp_y(d3.quantile(unemp_rates, 0.25)), height: height} ];37:T44b,splot_women_rects = [ {x: 0, width: splot_x(d3.quantile(medians, 0.75)), y: splot_women_y(d3.quantile(share_women, 0.75)), height: splot_women_y(d3.quantile(share_women, 0.25)) - splot_women_y(d3.quantile(share_women, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: splot_women_y(d3.quantile(share_women, 0.75)), height: splot_women_y(d3.quantile(share_women, 0.25)) - splot_women_y(d3.quantile(share_women, 0.75))}, {x: splot_x(d3.quantile(medians, 0.25)), width: width, y: splot_women_y(d3.quantile(share_women, 0.75)), height: splot_women_y(d3.quantile(share_women, 0.25)) - splot_women_y(d3.quantile(share_women, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: 0, height: splot_women_y(d3.quantile(share_women, 0.75))}, {x: splot_x(d3.quantile(medians, 0.75)), width: splot_x(d3.quantile(medians, 0.25)) - splot_x(d3.quantile(medians, 0.75)), y: splot_women_y(d3.quantile(share_women, 0.25)), height: height} ];38:T41a,dataset = d3.csv("https://raw.githubusercontent.com/fivethirtyeight/data/master/college-majors/recent-grads.csv", function(data) { return { Rank: parseInt(data.Rank), Major_code: data.Major_code, Major: data.Major, Major_category: data.Major_category, Total: parseInt(data.Total), Sample_size: parseInt(data.Sample_size), Men: parseInt(data.Men), Women: parseInt(data.Women), ShareWomen: parseFloat(data.ShareWomen), Employed: parseInt(data.Employed), Full_time: parseInt(data.Full_time), Part_time: parseInt(data.Part_time), Full_time_year_round: parseInt(data.Full_time_year_round), Unemployed: parseInt(data.Unemployed), Unemployment_rate: parseFloat(data.Unemployment_rate), Median: parseInt(data.Median), P25th: parseInt(data.P25th), P75th: parseInt(data.P75th), College_jobs: parseInt(data.College_jobs), Non_college_jobs: parseInt(data.Non_college_jobs), Low_wage_jobs: parseInt(data.Low_wage_jobs) } } );39:[] 2f:{"title":"College-Education","cells":[{"id":573,"value":"md `# College-Education\nHussein Fardous, Shawn Pachgade, Zifang Huang, and Harry Smith\n
\n
\nDataset by FiveThirtyEight\nhttps://raw.githubusercontent.com/fivethirtyeight/data/master/college-majors/recent-grads.csv\n
\nCredits to Sophie Engle for Scatterplot Template\nhttps://observablehq.com/@sjengle/interactivity\n
\nCredits to Mike Bostock for Scatterplot Axis Format\nhttps://observablehq.com/@d3/scatterplot\n
\nCredits to Michele Weigle for Scatterplot Legend Format\nhttp://bl.ocks.org/weiglemc/6185069\n
\nCredits to Mike Bostock for Vega-Embed Template\nhttps://observablehq.com/@mbostock/hello-vega-embed\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md `\n## Does College Provide All Students with the Same Economic Opportunities?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"viewof bar_y_selection = {\n \n const select = html``;\n \n Promises.delay(2000).then(() => {\n select.selectedIndex = 1;\n select.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n return select;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"viewof shareWomen = bar_checkbox({label: \" Share of Women\", value: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"viewof splot_transition = html``;","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"viewof bar_2_y_selection = {\n \n const select = html``;\n \n Promises.delay(2000).then(() => {\n select.selectedIndex = 1;\n select.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n return select;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"viewof bar_2 = vega({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v2.json\",\n \"description\": \"Major vs. (Median, Unemployment Rate, Share of Women)\",\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": dataset.filter(d => d.Major_category == major_categ)\n },\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"Major\", \"type\": \"ordinal\"},\n \"y\": {\"field\": bar_2_y_selection, \"type\": \"quantitative\"}\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"viewof small_multiples_1 = vega({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v2.json\",\n \"description\": \"Small Multiples: Major vs. (Median, Unemployment Rate, Share of Women)\",\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": dataset.filter(d => d.Major_category == major_categ)\n },\n \"repeat\": {\"column\": [\"Median\", \"Unemployment_rate\", \"ShareWomen\"]},\n \"spec\": {\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"Major\", \"type\": \"ordinal\"},\n \"y\": {\"field\": {\"repeat\": \"column\"}, \"type\": \"quantitative\"}\n }\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"viewof small_multiples_2 = vega({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v2.json\",\n \"description\": \"Small Multiples: Major vs. (Median, Unemployment Rate, Share of Women)\",\n \"width\": 900,\n \"height\": 500,\n \"data\": {\n \"values\": dataset.filter(d => d.Major_category == major_categ)\n },\n \"vconcat\": [\n {\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"Major\", \"type\": \"ordinal\"},\n \"y\": {\"field\": \"Median\", \"type\": \"quantitative\"}\n }\n },\n {\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"Major\", \"type\": \"ordinal\"},\n \"y\": {\"field\": \"Unemployment_rate\", \"type\": \"quantitative\"}\n }\n },\n {\n \"mark\": \"bar\",\n \"encoding\": {\n \"x\": {\"field\": \"Major\", \"type\": \"ordinal\"},\n \"y\": {\"field\": \"ShareWomen\", \"type\": \"quantitative\"}\n }\n }\n ]\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md `\n### First Graph Cells\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"{\n bar_y_selection;\n bar.update(bar_y_selection);\n return bar_y_selection;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"bar_checkbox = ({label = \"\", value = false} = {}) => {\n \n let wrapper = html``;\n let check = html``;\n \n wrapper.append(check);\n wrapper.append(label || \"\");\n \n check.checked = value;\n check.addEventListener(\"change\", (e) => {\n wrapper.value = check.checked;\n wrapper.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n // Starting Value\n wrapper.value = check.checked;\n \n return wrapper;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"bar_legend = [{gender: \"Male\", color: \"steelblue\", y: bar_margin.top}, {gender: \"Female\", color: \"red\", y: bar_margin.top + 20}];","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"bar_rotate = {\n return (x, y, r) => `translate(${x}, ${y}) rotate(${r})`;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"bar_xAxis = g => g.attr(\"transform\", `translate(0, ${height - bar_margin.bottom})`)\n .call(d3.axisBottom(bar_x).tickSizeOuter(0));","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"bar_yAxis = g => g.attr(\"transform\", `translate(${bar_margin.left},0)`)\n .call(d3.axisLeft(bar_y))\n .call(g => g.select(\".domain\").remove());","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"bar_margin = ({top: 100, bottom: 100, right: 100, left: 100});","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"bar_x = d3.scaleBand()\n .domain(bar_data.map(d => d.Major_Category))\n .range([bar_margin.left, width - bar_margin.right])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"bar_y = d3.scaleLinear()\n .domain([0, d3.max(bar_data, d => d[bar_y_selection])]).nice()\n .range([height - bar_margin.bottom, bar_margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"md `\n### Second Graph Cells\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"/*{\n splot_transition; // Wait for Button Click\n splot.update();\n return splot_transition;\n};*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"highlight = {\n \n const svg = d3.select(splot);\n const status = html` highlight: none `;\n \n // event.namespace allows us to add multiple functions for one event\n // only needed in examples like this where some events trigger multiple functions\n splot_circles.on(\"mouseover.highlight\", function(d) { \n d3.select(this)\n .raise() // bring to front\n .style(\"stroke\", \"red\")\n .style(\"stroke-width\", 2);\n d3.select(status).text(\"highlight: \" + d.major);\n });\n\n splot_circles.on(\"mouseout.highlight\", function(d) {\n d3.select(this).style(\"stroke\", null);\n d3.select(status).text(\"highlight: none\");\n });\n \n return status;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"brush1 = {\n \n const svg = d3.select(splot);\n const status = html` brush: none `;\n \n splot_circles.on(\"mouseover.brush1\", function(d) {\n splot_circles.filter(e => (d.Major_category !== e.Major_category)).transition().style(\"fill\", \"#bbbbbb\");\n d3.select(status).text(\"brush: \" + d.Major_category);\n });\n \n splot_circles.on(\"mouseout.brush1\", function(d) {\n splot_circles.transition().style(\"fill\", d => splot_color(d.Major_category));\n d3.select(status).text(\"brush: none\");\n });\n \n return status;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"brush2 = {\n \n const svg = d3.select(splot);\n const status = html` brush: none `;\n \n let brush = d3.brush()\n .on(\"start.brush2 brush.brush2 end.brush2\", brushed);\n \n function brushed() {\n \n if (d3.event.selection) {\n \n d3.select(status).text(\"brush: \" + d3.event.selection);\n const [[x0, y0], [x1, y1]] = d3.event.selection; \n \n splot_circles.classed(\"dim\", function(d) {\n let cx = +d3.select(this).attr(\"cx\");\n let cy = +d3.select(this).attr(\"cy\");\n return !(x0 <= cx && cx < x1 && y0 <= cy && cy < y1);\n });\n }\n \n else {\n d3.select(status).text(\"brush: none\");\n splot_circles.classed(\"dim\", false);\n }\n }\n \n // place brush BEHIND points so we still get pointer events\n svg.insert(\"g\", \":first-child\").attr(\"class\", \"brush\").call(brush);\n \n return status;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"splot_circles = {\n return d3.select(splot).select(\"g#circles\").selectAll(\"circle\");\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"splot_annotations = d3.select(splot).select(\"g#annotation\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"splot_xAxis = g => g.attr(\"transform\", `translate(0, ${height - splot_margin.bottom})`)\n .call(d3.axisBottom(splot_x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - splot_margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(splot_data.Median)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"splot_unemp_yAxis = g => g.attr(\"transform\", `translate(${splot_margin.left}, 0)`)\n .call(d3.axisLeft(splot_unemp_y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(splot_data.Unemployment_rate)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"splot_women_yAxis = g => g.attr(\"transform\", `translate(${splot_margin.left}, 0)`)\n .call(d3.axisLeft(splot_women_y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(splot_data.ShareWomen)\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"splot_margin = ({top: 20, bottom: 20, right: 30, left: 35});","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"splot_x = {\n return d3.scaleLinear()\n .domain(d3.extent(splot_data, d => d.Median))\n .range([r * 2, width - (r * 2)]) // Pad by Circle Radius\n .nice();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"splot_unemp_y = {\n return d3.scaleLinear()\n .domain(d3.extent(splot_data, d => d.Unemployment_rate))\n .range([height - (r * 2), r * 2]) // Pad by Circle Radius\n .nice();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"splot_women_y = {\n return d3.scaleLinear()\n .domain(d3.extent(splot_data, d => d.ShareWomen))\n .range([height - (r * 2), r * 2]) // Pad by Circle Radius\n .nice();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"splot_color = {\n return d3.scaleOrdinal(major_categs_colors).domain(major_categs.values());\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"major_categs_colors = [\"#800000\", \"#9A6324\", \"#808000\", \"#469990\", \"#000075\", \"#000000\", \"#e6194B\", \"#f58231\", \"#aaffc3\", \"#bfef45\", \"#3cb44b\", \"#42d4f4\", \"#4363d8\", \"#911eb4\", \"#f032e6\", \"#ffe119\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"major_categs = d3.set(splot_data, d => d.Major_category);","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"medians = splot_data.map((value, index) => value.Median);","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"unemp_rates = splot_data.map((value, index) => value.Unemployment_rate);","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"share_women = splot_data.map((value, index) => value.ShareWomen);","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof height = slider({\n min: 10,\n max: width,\n step: 1,\n value: 550,\n title: \"height\",\n description: \"Height of svg\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof r = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 15,\n title: \"r\",\n description: \"Radius of Circles\"\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"import {slider} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"splot_data = Object.assign(await\n d3.csv(\"https://raw.githubusercontent.com/fivethirtyeight/data/master/college-majors/recent-grads.csv\",\n function(data) {\n return {\n Major: data.Major,\n Major_category: data.Major_category,\n ShareWomen: parseFloat(data.ShareWomen),\n Unemployment_rate: parseFloat(data.Unemployment_rate),\n Median: parseInt(data.Median),\n College_jobs: parseInt(data.College_jobs),\n Non_college_jobs: parseInt(data.Non_college_jobs),\n Low_wage_jobs: parseInt(data.Low_wage_jobs)\n }\n }\n ),\n {Median: \"Median Income\", Unemployment_rate: \"Unemployment Rate\", ShareWomen: \"Share of Women\"}\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"html`\n \n

Below defines the CSS Styles for this Notebook.

\n \n \n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"md `\n### Third Graph Cell\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"vega = {\n const v = window.vega = await require(\"vega@3\");\n const vl = window.vl = await require(\"vega-lite@2\");\n const ve = await require(\"vega-embed@3\");\n async function vega(spec, options) {\n const div = document.createElement(\"div\");\n div.value = (await ve(div, spec, options)).view;\n return div;\n };\n vega.changeset = v.changeset;\n return vega;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"md `\n### Core D3 Module\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}