31:Td24,map = { const tooltip = html`

`; const path = d3.geoPath(null); const projection = d3 .geoAlbersUsa() .scale(1300) .translate([mapSize.width / 2, mapSize.height / 2]); const svg = d3 .create("svg") .attr("class", "map") .attr("viewBox", [0, 0, mapSize.width, mapSize.height]) .attr("width", mapSize.width) .attr("height", mapSize.height) .style("width", "100%") .style("height", "auto") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const map = svg.append("g").attr("class", "map"); map .append("g") .attr("class", "boundaries") .selectAll("path") .data(topojson.feature(us, "lower48").features) .join("path") .attr("stroke", "gray") .attr("fill", (d) => "white") .attr("d", path) .append("title") .text((d) => `${d.properties.name}`); const points = map .append("g") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "0.6rem") .attr("class", "point") .selectAll("g") .data(data) .join("g") .attr("transform", (d) => `translate(${projection([d.lng, d.lat])})`); const p = 15; points .append("rect") .attr("width", p) .attr("height", p) .attr("x", -p / 2) .attr("y", -p / 2) .attr("fill", (d) => d3.color(colorsSoftware.get(d.Software[0])).copy({ opacity: 0.8 }) ); points.append("text").attr("y", "-10"); points.append("title").text((d) => d.ask); const delaunay = d3.Delaunay.from( data.map((d) => projection([d.lng, d.lat])) ); svg.on("mousemove", (e, d) => { const mapBox = svg.node().getBoundingClientRect(); const scale = mapSize.width / mapBox.width; const pointind = delaunay.find(e.layerX * scale, e.layerY * scale); const point = data[pointind]; const pos = projection([point.lng, point.lat]); tooltip.replaceChildren(html`

${point.University}

${point.Quotes}

${point["link to change"]}

${t}

`); const bbox = tooltip.getBoundingClientRect(); const xdelta = pos[0] > bbox.width ? bbox.width : 0; const ydelta = pos[1] > mapBox.height - bbox.height ? bbox.height : 0; d3.select(tooltip) .style("visibility", "visible") .style("top", `${pos[1] - ydelta}px`) .style("left", `${pos[0] - xdelta}px`); }); const container = html`

${svg.node()}

${tooltip}

${makeChart(totalsbySoftware, colorsSoftware, 250, 150)}

`; yield container; }32:T57c,viewof stateSelection = { const el = html`

${[...dataByState.keys()] .sort((a, b) => (a > b ? 1 : -1)) .map( (state) => html`

{ el.value = state; el.dispatchEvent(new Event("input")); }}>${getState(state, 65, -10, 5)}

` )}

`; el.value = "California"; return el; }33:T886,function makeChart( data, colors, _width = 300, _height = 130, margin = { top: 0, right: 20, bottom: 0, left: 150 } ) { // const width = width; const svg = d3 .create("svg") .attr("viewBox", [0, 0, _width, _height]) .attr("width", _width) .attr("height", _height) // .style("width", "100%") // .style("height", "auto") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", "0.8rem"); const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[1])]) .range([margin.left, _width - margin.right]); const y = d3 .scaleBand() .domain(d3.range(data.size)) .rangeRound([margin.top, _height - margin.bottom]) .padding(0.1); const xAxis = (g) => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(_width / 80)) .call((g) => g.select(".domain").remove()); function capitalize(s) { return s .split(" ") .map((e) => ("" + e[0]).toUpperCase() + e.slice(1)) .join(" "); } const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickFormat((i) => capitalize([...data.keys()][i])) .tickSizeOuter(0) ) .attr("font-size", "0.8rem"); const format = x.tickFormat(20, data.format); const barHeight = 25; svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", (d) => x(d[1]) - x(0)) .attr("height", y.bandwidth()) .attr("fill", (d) => colors.get(d[0])); svg .append("g") .attr("fill", "white") .selectAll("text") .data(data) .join("text") .attr("x", (d) => x(d[1])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text((d) => format(d[1])) // .call(text => // text // .filter(d => x(d[1]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start"); // ); // svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }34:T545,function getState(name, width, padding, margin) { const feature = topojson .feature(us, us.objects.states) .features.find((e) => e.properties.name === name); const projection = d3.geoIdentity().fitExtent( [ [-padding, -padding], [width + padding, width + padding] ], feature ); const path = d3.geoPath().projection(projection); const [[x0, y0], [x1, y1]] = path.bounds(feature); const [xc, yc] = path.centroid(feature); const svg = d3 .create("svg") .attr("viewBox", [-margin, -margin, width + 2 * margin, width + 2 * margin]) .attr("width", width + margin * 2) .attr("class", "state"); const g = svg.append("g").attr("class", "boundaries"); g.append("rect") .attr("width", width) .attr("height", width) .attr("rx", "10") .attr("fill", "none"); g.selectAll("title") .data([feature]) .join("title") .text((d) => `${d.properties.name}`); g.selectAll("path") .data([feature]) .join("path") .attr("fill", (d) => "white") .attr("d", path) .attr("class", "state-path"); g.selectAll("text") .data([feature]) .join("text") .attr("x", margin * 2) .attr("y", width - margin) .attr("stroke", "none") .attr("class", "state-text") .text((d) => `${statesCodes[d.properties.name]}`); return svg.node(); }35:T4b2,statesCodes = ({ Alabama: "AL", Alaska: "AK", "American Samoa": "AS", Arizona: "AZ", Arkansas: "AR", California: "CA", Colorado: "CO", Connecticut: "CT", Delaware: "DE", "District of Columbia": "DC", "Federated States Of Micronesia": "FM", Florida: "FL", Georgia: "GA", Guam: "GU", Hawaii: "HI", Idaho: "ID", Illinois: "IL", Indiana: "IN", Iowa: "IA", Kansas: "KS", Kentucky: "KY", Louisiana: "LA", Maine: "ME", "Marshall Islands": "MH", Maryland: "MD", Massachusetts: "MA", Michigan: "MI", Minnesota: "MN", Mississippi: "MS", Missouri: "MO", Montana: "MT", Nebraska: "NE", Nevada: "NV", "New Hampshire": "NH", "New Jersey": "NJ", "New Mexico": "NM", "New York": "NY", "North Carolina": "NC", "North Dakota": "ND", "Northern Mariana Islands": "MP", Ohio: "OH", Oklahoma: "OK", Oregon: "OR", Palau: "PW", Pennsylvania: "PA", "Puerto Rico": "PR", "Rhode Island": "RI", "South Carolina": "SC", "South Dakota": "SD", Tennessee: "TN", Texas: "TX", Utah: "UT", Vermont: "VT", "Virgin Islands": "VI", Virginia: "VA", Washington: "WA", "West Virginia": "WV", Wisconsin: "WI", Wyoming: "WY" })36:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1619485614895.852,"size":82031},{"id":"51ed8816527385f11cac57df2a014f78257751269fb481b05f05d765e295a5b24f7b1daf45c254c581b1e893b909cb1b3e79a27f2d8cc84dfa19cb6dacc5d49d","href":"https://static.observableusercontent.com/files/51ed8816527385f11cac57df2a014f78257751269fb481b05f05d765e295a5b24f7b1daf45c254c581b1e893b909cb1b3e79a27f2d8cc84dfa19cb6dacc5d49d","name":"ProctorU Map data UCs States Lat Long - change@1.org datas (1).csv","type":"text/csv","lastModified":1622670237966.683,"size":245218}] 2f:{"title":"Change.org Virtual Proctoring Petitions","cells":[{"id":0,"value":"md`# Change.org Virtual Proctoring Petitions\n\nThis notebook contains data visualization explorations of dozens of petitions from change.org, used on the reporting piece about virtual proctoring during the pandemic.\n\n[Surveillance U: Has Virtual Proctoring Gone Too Far?](https://interactive.yr.media/has-virtual-proctoring-gone-too-far/)
\nAfter a year like no other, some colleges have turned to AI-powered virtual proctoring apps to administer exams. YR Media investigated the rise of these apps and looked into students’ serious concerns about privacy, bias, and mental health effects. “You feel like they're expecting you to cheat,” one first-year student said.
\n

\n\nSource: https://www.change.org/search?q=proctoring\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`### Virtual Proctoring Softwares`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"makeChart(totalsbySoftware, colorsSoftware)","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"md`### Petitions Topics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"makeChart(totalsbyTags, colorsTags)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2057,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2672,"value":"stateSelection\n ? html`\n

\n${[...dataByState.get(stateSelection)].map(\n (d) =>\n html`

${quoteCard(d)}`\n)}`\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2353,"value":"function quoteCard(d) {\n return html`\n

${d.University}

${d.city_name},${d.state_code}

USES

${d.Software.join(\n \",\"\n )}

\n
\n “${d.Quotes}”\n
\n

\n\n

MAIN CONCERNS

\n ${d.tags.map(\n (t, i) =>\n html`

${t} ${\n i < d.tags.length - 1 ? \"|\" : \"\"\n }

`\n )}\n

\n${d.link}\n\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"mapSize = ({ width: 975, height: 610 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"totalsbySoftware = {\n const totals = new Map();\n\n for (const { Software } of data) {\n for (const s of Software) {\n if (!totals.has(s)) {\n totals.set(s, 0);\n }\n totals.set(s, totals.get(s) + 1);\n }\n }\n\n return new Map([...totals.entries()].sort((a, b) => b[1] - a[1]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"totalsbyTags = {\n const totals = new Map();\n\n for (const { tags } of data) {\n for (const s of tags) {\n if (!totals.has(s)) {\n totals.set(s, 0);\n }\n totals.set(s, totals.get(s) + 1);\n }\n }\n\n return new Map([...totals.entries()].sort((a, b) => b[1] - a[1]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"colorsSoftware = new Map(\n [...totalsbySoftware.keys()].map((tag, i) => [tag, d3.schemeDark2[i]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"colorsTags = new Map(\n [...totalsbyTags.keys()].map((tag, i) => [tag, d3.schemeAccent[i]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"function splitTrim(str) {\n if (!str) return [];\n return str.split(\",\").map((e) => e.trim());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1880,"value":"dataByState = d3.group(data, (d) => d.state_name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2176,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"data = FileAttachment(\n \"ProctorU Map data UCs States Lat Long - change@1.org datas (1).csv\"\n)\n .csv({ typed: true })\n .then((data) =>\n data.map((row) => {\n delete row.ask;\n delete row.letter;\n delete row.description;\n return Object.assign({}, row, {\n tags: splitTrim(row.tags),\n Software: splitTrim(row.Software)\n });\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"us = {\n const us = await FileAttachment(\"states-albers-10m.json\").json();\n\n us.objects.lower48 = {\n type: \"GeometryCollection\",\n geometries: us.objects.states.geometries.filter(\n d => d.id !== \"02\" && d.id !== \"15\"\n )\n };\n return us;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}