30:Tbf8,chart = { const svg = d3.select(DOM.svg(width, height)); const LEGEND_X = 800; const LEGEND_SIZE = 10; aggData.sort((a, b) => b.Median - a.Median); xBar.domain(aggData.map(d => d.Major_category)); // Different bar graphs (explicitly set womenBar for the ShareWomen stacked bar chart) const bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(aggData, d => d.Major_category) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", -xBar.bandwidth()) .attr("y", 0) .attr("transform", d => rotate(xBar(d.Major_category), yBar(0), 180)) .attr("width", xBar.bandwidth()) // .attr("height", d => yBar(0) - yBar(d[order])); const womenBar = svg.append("g") .attr("fill", "red") .selectAll("rect") .data(aggData, d => d.Major_category) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", -xBar.bandwidth()) .attr("y", 0) .attr("transform", d => rotate(xBar(d.Major_category), yBar(0), 180)) .attr("width", xBar.bandwidth()) .attr("height", d => yBar(0) - yBar(d['ShareWomen'] * d['Total'])) .style("opacity", 0); // Legend var barLegends = svg.selectAll(".groups") .data(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(xAxisBar) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-60)" ); const gy = svg.append("g") .call(yAxisBar); // Update logic (simulates scroll) svg.node().update = (o) => { const t = svg.transition() .duration(750); if(shareWomen){ womenBar.transition() .duration(1500) .style("opacity", 1); barLegends.transition() .duration(1500) .style("opacity", 1); bar.data(aggData, d => d.Major_category) // .transition() // .duration(1500) .attr("height", d => yBar(0) - yBar(d['Total'])) // .attr("y", d => yBar(0)); // bar.data(aggData, d => d.Major_category) // .transition() // .duration(1500) // .attr("height", d => yBar(0) - yBar(d['Total'] * (1 - d['ShareWomen']))) // .attr("y", d => yBar(0) - yBar(d['ShareWomen'] * d['Total'])); } else{ bar.data(aggData, d => d.Major_category) .transition() .duration(1500) .attr("height", d => yBar(0) - yBar(d[o])); womenBar.transition() .duration(1500) .style("opacity", 0); } }; return svg.node(); }31:T435,hover = { const svg = d3.select(med_unemp_rate_splot); const status = html`hover: none`; 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); keys.shift(); 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); }); 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"); }); circles.on("mouseout.hover", function(d) { d3.selectAll("div#details").remove(); d3.select(status).text("hover: none"); }); return status; };32: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) } } );33:T423,aggData = 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) } } );34:[] 2e:{"title":"College-Education","cells":[{"id":573,"value":"md `# College-Education\nHussein Fardous, Shawn Pachgade, Zifang Huang, and Harry Smith\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"{\n order;\n chart.update(order);\n return order;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"viewof order = {\n const select = html``;\n Promises.delay(2000).then(() => {\n select.selectedIndex = 1;\n select.dispatchEvent(new CustomEvent(\"input\"));\n });\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"viewof shareWomen = checkbox({label: ' Share Women', value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"legend = [{gender: 'Male', color: 'steelblue', y: marginBar.top}, {gender: 'Female', color: 'red', y: marginBar.top + 20}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"height","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"xBar = d3.scaleBand()\n .domain(aggData.map(d => d.Major_category))\n .range([marginBar.left, width - marginBar.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"yBar = d3.scaleLinear()\n .domain([0, d3.max(aggData, d => d[order])]).nice()\n .range([height - marginBar.bottom, marginBar.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"rotate = {\n return (x,y, r) => `translate(${x},${y}) rotate(${r})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"xAxisBar = g => g\n .attr(\"transform\", `translate(0,${height - marginBar.bottom})`)\n // .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(d3.axisBottom(xBar).tickSizeOuter(0))\n // .selectAll(\"text\")\n // .attr(\"transform\", rotate(xBar(0), height - 20, 30))","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"yAxisBar = g => g\n .attr(\"transform\", `translate(${marginBar.left},0)`)\n .call(d3.axisLeft(yBar))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"marginBar = ({\n bottom: 100,\n left: 100,\n right: 100,\n top: 100\n});\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"checkbox = ({label = '', value = false} = {}) => {\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n \n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"width = 1000","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":18,"value":"med_unemp_rate_splot = {\n \n const svg = d3.select(DOM.svg(width, height)); \n svg.style(\"border\", \"1px solid #bbbbbb\"); \n \n const g = svg.append(\"g\").attr(\"id\", \"circles\");\n \n g.selectAll(\"rect\")\n .data(rects)\n .enter()\n .append(\"rect\")\n .attr(\"x\", d => d.x)\n .attr(\"width\", d => d.width)\n .attr(\"y\", d => d.y)\n .attr(\"height\", d => d.height)\n .attr(\"fill\", \"#808080\")\n .attr(\"opacity\", \"0.75\")\n \n g.selectAll(\"circle\")\n .data(med_unemp_rate_data)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => x(d.Median))\n .attr(\"cy\", d => y(d.Unemployment_rate))\n .attr(\"r\", r)\n .style(\"fill\", d => color(d.Major_category));\n\n svg.append(\"g\").attr(\"id\", \"annotation\");\n\n return svg.node();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"highlight = {\n \n const svg = d3.select(med_unemp_rate_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 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 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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"brush1 = {\n \n const svg = d3.select(med_unemp_rate_splot);\n const status = html`brush: none`;\n \n circles.on(\"mouseover.brush1\", function(d) {\n 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 circles.on(\"mouseout.brush1\", function(d) {\n circles.transition().style(\"fill\", d => 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(med_unemp_rate_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 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 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":"circles = {\n return d3.select(med_unemp_rate_splot).select(\"g#circles\").selectAll(\"circle\");\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"annotations = d3.select(med_unemp_rate_splot).select(\"g#annotation\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"rects = [\n {x: 0, width: x(d3.quantile(medians, 0.75)), y: y(d3.quantile(unemp_rates, 0.75)), height: y(d3.quantile(unemp_rates, 0.25)) - y(d3.quantile(unemp_rates, 0.75))},\n {x: x(d3.quantile(medians, 0.75)), width: x(d3.quantile(medians, 0.25)) - x(d3.quantile(medians, 0.75)), y: y(d3.quantile(unemp_rates, 0.75)), height: y(d3.quantile(unemp_rates, 0.25)) - y(d3.quantile(unemp_rates, 0.75))},\n {x: x(d3.quantile(medians, 0.25)), width: width, y: y(d3.quantile(unemp_rates, 0.75)), height: y(d3.quantile(unemp_rates, 0.25)) - y(d3.quantile(unemp_rates, 0.75))},\n {x: x(d3.quantile(medians, 0.75)), width: x(d3.quantile(medians, 0.25)) - x(d3.quantile(medians, 0.75)), y: 0, height: y(d3.quantile(unemp_rates, 0.75))},\n {x: x(d3.quantile(medians, 0.75)), width: x(d3.quantile(medians, 0.25)) - x(d3.quantile(medians, 0.75)), y: y(d3.quantile(unemp_rates, 0.25)), height: height}\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"x = {\n return d3.scaleLinear()\n .domain(d3.extent(med_unemp_rate_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":"y = {\n return d3.scaleLinear()\n .domain(d3.extent(med_unemp_rate_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":141,"value":"color = {\n return d3.scaleOrdinal(d3.schemeSet2).domain(major_categories.values());\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"major_categories = d3.set(med_unemp_rate_data, d => d.Major_category);","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"medians = med_unemp_rate_data.map((value, index) => value.Median);","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"unemp_rates = med_unemp_rate_data.map((value, index) => value.Unemployment_rate);","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":"med_unemp_rate_data = 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);","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\");","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"}],"files":"$W34","stdlib":"1","titling":"auto"}