2b:null 2c:["$","title",null,{"children":"FINAL PROJECT Group 13 | NIU ReDAV | Observable"}] 31:T458,viewof dashboard = { const container = html`

NFL Draft Trends Dashboard

${viewof year}

${viewof position}

${viewof posGroup}

Players Drafted by College State

${mapChart}

Top 10 Colleges by Drafted Players

${collegeChart}

Draft Round vs Games Played

${scatterChart}

Additional Insight

${extraChart || ""}

`; return container; }32:Te2c,sunburstChart = { const width = 600; const radius = width / 2; const root = d3.hierarchy(sunburstData) .sum(d => d.value || 0) .sort((a, b) => b.value - a.value); const partition = d3.partition() .size([2 * Math.PI, root.height + 1]); partition(root); root.each(d => d.current = d); const color = d3.scaleOrdinal() .domain(positions) .range(colorRange); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -width / 2, width, width]) .style("font", "10px sans-serif"); const g = svg.append("g"); const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(0.002) // spacing between slices .padRadius(radius) .innerRadius(d => d.y0 * radius / (root.height + 1)) .outerRadius(d => d.y1 * radius / (root.height + 1) - 1); // 🔥 DRAW ARCS const path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { if (d.depth === 1) return "#bbb"; // rounds return color(d.data.name); // positions }) .attr("stroke", "#222") .attr("stroke-width", 0.8) .attr("vector-effect", "non-scaling-stroke") // FIX scaling issue .attr("stroke-opacity", d => arcVisible(d.current) ? 1 : 0) .attr("fill-opacity", d => arcVisible(d.current) ? 1 : 0) .attr("d", d => arc(d.current)); // CLICKABLE path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); // TOOLTIP path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join(" → ")} Players: ${d.value}` ); // 🔥 LABELS const label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .style("font-size", "10px") .text(d => d.data.name); // CENTER CLICK (zoom out) const parent = g.append("circle") .datum(root) .attr("r", radius / (root.height + 1)) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // 🔥 CLICK HANDLER (ZOOM) function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = g.transition().duration(750); path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .attr("fill-opacity", d => arcVisible(d.target) ? 1 : 0) .attr("stroke-opacity", d => arcVisible(d.target) ? 1 : 0) .attrTween("d", d => () => arc(d.current)); label.transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } // 🔧 VISIBILITY RULES function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.x1 - d.x0) > 0.04; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius / (root.height + 1); return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }33:[{"id":"9c73dfa6daf1bd0c426aa3d4ae730739416a4df3e046cbaff0f291daeba771c48b08d96c5f744855575bf3d43cad38f90633c0dcba022544e74d97f1276d2d00","href":"https://static.observableusercontent.com/files/9c73dfa6daf1bd0c426aa3d4ae730739416a4df3e046cbaff0f291daeba771c48b08d96c5f744855575bf3d43cad38f90633c0dcba022544e74d97f1276d2d00","name":"fixed_blank_states.csv","type":"text/csv","lastModified":1776996102405.488,"size":412688}] 2f:{"id":"9f288fcb9e201bcd","slug":null,"title":"FINAL PROJECT Group 13","thumbnail":"75ae3f3f398e49da082da3abb9328ac07d72913c3bae26ff2df8037ed4ea2857","access_level":"public","create_time":"$D2026-04-06T23:32:33.520Z","update_time":"$D2026-05-01T17:26:53.446Z","view_time":null,"first_public_time":"$D2026-04-24T21:53:55.676Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":603,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"473ca354baabd1cf","login":"gavino-mora","name":"Gavino Mora","avatar_url":"https://avatars-next.observableusercontent.com/21e8355490565b31e53fe14ebd4533cf8d12f1541fc25ded4a3d66414c5ff4b7","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"individual","id":"473ca354baabd1cf","login":"gavino-mora","name":"Gavino Mora","avatar_url":"https://avatars-next.observableusercontent.com/21e8355490565b31e53fe14ebd4533cf8d12f1541fc25ded4a3d66414c5ff4b7","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"FINAL PROJECT Group 13","cells":[{"id":577,"value":"# FINAL PROJECT Group 13\n- Gavino Mora(z2036538)\n- CSCI 490 Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof position = Inputs.select(\n [\"All\", ...Array.from(new Set(data.map(d => d.Pos))).sort()],\n { label: \"Select Position\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof year = Scrubber(\n d3.range(2011, d3.max(data, d => +d.DraftYear) + 1),\n {\n delay: 3500,\n loop: true,\n autoplay: false,\n initial: 2011,\n format: x => `Year: ${x}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"collegeChart = Plot.plot({\n marginBottom: 80,\n x: {\n label: \"College\",\n domain: topColleges\n },\n y: {\n label: \"Players Drafted\",\n grid: true\n },\n color: {\n domain: positions,\n range: colorRange,\n legend: true,\n label: \"Position\"\n },\n marks: [\n Plot.barY(topData, \n Plot.stackY(\n {y: \"count\"}, \n {\n x: \"College/Univ\",\n fill: \"Pos\",\n title: d => `${d[\"College/Univ\"]}\nPosition: ${d.Pos}\nPlayers: ${d.length || 1}\nYear: ${year}`\n }\n )\n )\n ]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"mapChart = Plot.plot({\n projection: \"albers-usa\",\n width: 800,\n height: 500,\n\n color: { \n legend: true,\n scheme: \"Oranges\",\n label: \"Players Drafted\"\n },\n\n marks: [\n Plot.geo(mapData.features, {\n stroke: \"#333\",\n strokeWidth: 0.5,\n\n fill: d => stateMap.get(d.properties.name) || 0,\n\n title: d => {\n const value = stateMap.get(d.properties.name) || 0;\n return `${d.properties.name}\nPlayers: ${value}\nYear: ${year}\nGroup: ${position}`;\n },\n\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"scatterChart = Plot.plot({\n width: 1200,\n height: 1000,\n marginLeft: 70,\n marginBottom: 60,\n\n x: { \n label: \"Draft Round\",\n tickFormat: d3.format(\"d\"),\n grid: true\n },\n y: { \n label: \"Games Played\",\n grid: true\n },\n\n color: { \n domain: positions,\n range: colorRange,\n legend: true,\n label: \"Position\"\n },\n\n marks: [\n Plot.dot(filtered1, {\n x: d => +d.Rnd,\n y: d => +d.G,\n fill: \"Pos\", \n jitter: 0.45,\n opacity: 0.4,\n r: 4,\n tip: true\n }),\n\n Plot.boxY(filtered1, {\n x: d => +d.Rnd,\n y: d => +d.G,\n stroke: \"black\",\n fill: \"orange\",\n opacity: 0.5,\n inset: 2\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"extraChart = Plot.plot({\n width: 600,\n height: 450,\n marginLeft: 80,\n\n color: {\n legend: true,\n label: \"Players Drafted\",\n scheme: \"blues\"\n },\n\n x: {\n label: \"Draft Round\",\n tickFormat: d3.format(\"d\")\n },\n\n y: {\n label: \"Position\",\n sort: { fill: \"descending\" }\n },\n\n marks: [\n // Heatmap cells\n Plot.cell(\n filtered1,\n Plot.group(\n { fill: \"count\" },\n {\n x: d => +d.Rnd,\n y: \"Pos\",\n stroke: \"white\"\n }\n )\n ),\n\n Plot.text(\n filtered1,\n Plot.group(\n { text: \"count\" },\n {\n x: d => +d.Rnd,\n y: \"Pos\",\n fill: \"black\",\n fontSize: 12,\n fontWeight: \"bold\"\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"sunburstData = {\n const filtered = data.filter(d =>\n +d.DraftYear === year &&\n (position === \"All\" || d.Pos === position)\n );\n\n const grouped = d3.rollup(\n filtered,\n v => v.length,\n d => `Round ${+d.Rnd}`,\n d => d.Pos\n );\n\n function toHierarchy(map, name = \"Draft\") {\n return {\n name,\n children: Array.from(map, ([key, value]) =>\n value instanceof Map\n ? toHierarchy(value, key)\n : { name: key, value }\n )\n };\n }\n\n return toHierarchy(grouped);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"Playerdata = FileAttachment(\"fixed_blank_states.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"uniqueStates = [...new Set(data.map(d => d.State))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mapData = d3.json(\"https://gist.githubusercontent.com/dakoop/771a0c3ca9c75c7c7fdc33b12b578724/raw/025cbd5dd1a263659bfb62594d0fe0463e008283/us-states.geosjson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"stateMap = d3.rollup(\n data.filter(d =>\n +d.DraftYear === year &&\n (posGroup === \"All\" || d.PosGroup === posGroup) &&\n (position === \"All\" || d.Pos === position)\n ),\n v => v.length,\n d => d.State\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"d3.sum([...stateMap.values()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"d3.rollups(data, v => v.length, d => d.DraftYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"data = Playerdata.map(d => ({\n ...d,\n PosGroup: groupPos(d.Pos)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"filtered = data.filter(d =>\n +d.DraftYear === year &&\n (posGroup === \"All\" || d.PosGroup === posGroup) &&\n (position === \"All\" || d.Pos === position)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"topColleges = d3.rollups(\n filtered1,\n v => v.length,\n d => d[\"College/Univ\"]\n)\n.sort((a, b) => d3.descending(a[1], b[1]))\n.slice(0, 10)\n.map(d => d[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"topData = data.filter(d =>\n topColleges.includes(d[\"College/Univ\"]) &&\n +d.DraftYear === year &&\n (posGroup === \"All\" || d.PosGroup === posGroup) &&\n (position === \"All\" || d.Pos === position)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"positions = Array.from(new Set(data.map(d => d.Pos))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"colorRange = [\n \"#4E79A7\",\"#F28E2B\",\"#E15759\",\"#76B7B2\",\"#59A14F\",\n \"#EDC948\",\"#B07AA1\",\"#FF9DA7\",\"#9C755F\",\"#BAB0AC\",\n \"#1F77B4\",\"#FF7F0E\",\"#2CA02C\",\"#D62728\",\"#9467BD\",\n \"#8C564B\",\"#E377C2\",\"#7F7F7F\",\"#BCBD22\",\"#17BECF\",\n \"#393B79\",\"#637939\",\"#8C6D31\",\"#843C39\",\"#7B4173\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"filtered1 = data.filter(d =>\n +d.DraftYear === year &&\n (posGroup === \"All\" || d.PosGroup === posGroup) &&\n (position === \"All\" || d.Pos === position)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"groupPos = pos => {\n if ([\"QB\",\"RB\",\"WR\",\"TE\",\"OL\",\"OT\",\"OG\",\"C\",\"FB\"].includes(pos)) return \"Offense\";\n if ([\"DL\",\"DE\",\"DT\",\"LB\",\"CB\",\"S\",\"DB\"].includes(pos)) return \"Defense\";\n if ([\"K\",\"P\",\"LS\"].includes(pos)) return \"Special Teams\";\n return \"Other\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"viewof posGroup = Inputs.select(\n [\"All\", \"Offense\", \"Defense\", \"Special Teams\"],\n { label: \"Group\", value: \"All\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"