25:["$","title",null,{"children":"Week 4 Assignment - Michael Charlton - Section5 | Berkeley MIDS W209 Information Visualization Course | Observable"}] 49:T86f,{ const target = html``; const processedData = process(data); const margin = { left: 70, right: 20, top: 70, bottom: 100 }; const iwidth = width - margin.left - margin.right; const iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleBand() .domain(processedData.map((d) => d.nationality)) .range([0, iwidth]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(processedData, (d) => d.avgAge)]) .range([iheight, 0]) .nice(); const rScale = d3 .scaleLinear() .domain([0, d3.max(processedData, (d) => d.avgWage)]) .range([3, 15]); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(-90)") .attr("text-anchor", "end"); gDrawing.append("g").attr("class", "y--axis").call(d3.axisLeft(y)); gDrawing .append("text") .attr("x", iwidth / 2) .attr("y", -30) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Nationality vs. Average Age w/ Average Wage (size)"); gDrawing .append("text") .attr("x", iwidth / 2) .attr("y", iheight + 95) .attr("text-anchor", "middle") .text("Nationality"); gDrawing .append("text") .attr("transform", "rotate(-90)") .attr("x", -iheight / 2) .attr("y", -60) .attr("dy", "1em") .attr("text-anchor", "middle") .text("Average Age"); gDrawing .selectAll("circle") .data(processedData) .join("circle") .attr("cx", (d) => x(d.nationality) + x.bandwidth() / 2) .attr("cy", (d) => y(d.avgAge)) .attr("r", (d) => rScale(d.avgWage)) .attr("fill-opacity", 0.7) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("fill", "steelblue"); return target; }4a:T7ba,{ const target = html`

`; // Return the div first so the following code can find it yield target; var divElement = document.getElementById("viz1695090707645"); var vizElement = divElement.getElementsByTagName("object")[0]; if (divElement.offsetWidth > 800) { vizElement.style.width = "100%"; vizElement.style.height = divElement.offsetWidth * 0.75 + "px"; } else if (divElement.offsetWidth > 500) { vizElement.style.width = "100%"; vizElement.style.height = divElement.offsetWidth * 0.75 + "px"; } else { vizElement.style.width = "100%"; vizElement.style.height = "727px"; } var scriptElement = document.createElement("script"); scriptElement.src = "https://public.tableau.com/javascripts/api/viz_v1.js"; vizElement.parentNode.insertBefore(scriptElement, vizElement); yield target; }4b:[{"id":"07be5128e2ac4552a43bcd1c56fb1d87fe1180cf3dfe4b6de037752fc4e46853737ffcb7d1d7dd1657767e0db555def247fa49c1f3e8b7b780814cf0b9486fe0","href":"https://static.observableusercontent.com/files/07be5128e2ac4552a43bcd1c56fb1d87fe1180cf3dfe4b6de037752fc4e46853737ffcb7d1d7dd1657767e0db555def247fa49c1f3e8b7b780814cf0b9486fe0","name":"players_20.csv","type":"text/csv","lastModified":1694993478315.778,"size":8945067}] 29:{"id":"df73dbbdce5493ce","slug":null,"title":"Week 4 Assignment - Michael Charlton - Section5","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-17T21:14:26.246Z","update_time":"$D2023-09-19T02:33:58.895Z","view_time":null,"first_public_time":"$D2023-12-07T20:40:57.748Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b13093b6da17d7ad","login":"mike2026","name":"Mike","avatar_url":"https://avatars-next.observableusercontent.com/2ca64027e3311796945848284060b3d94f6707d77e3f5ac75c399fada065f788","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","role":"editor"},{"type":"individual","id":"b13093b6da17d7ad","login":"mike2026","name":"Mike","avatar_url":"https://avatars-next.observableusercontent.com/2ca64027e3311796945848284060b3d94f6707d77e3f5ac75c399fada065f788","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 4 Assignment - Michael Charlton - Section5","cells":[{"id":0,"value":"md`# Week 4 Assignment - Michael Charlton - Section5\n\nPlease submit links for **all three tracks**. This is the _last_ week you will need to do all three: starting next week you can pick only one.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## D3\n\nThis weeks assignment is to fork your completed Week 2 assignment with the players_20.csv data file, make a scatterplot using d3 selection + data bind, and encode one additional channel (it can be categorical or quantitative, e.g., color, shape, size of circles).\n\nWeek 2 assignment: This weeks assignment is to take the attached dataset here (click on the pin on the right nav in Observable to see the data), group by nationality, count the number of players and the average age.\n\n${observable_instructions}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"data = FileAttachment(\"players_20.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"await FileAttachment(\"players_20.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"function getColumnHeaders(data) {\n if (!data || data.length === 0) {\n return [];\n }\n return Object.keys(data[0]);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"columnHeaders = getColumnHeaders(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"groupedData = data.reduce((acc, player) => {\n const { nationality, age } = player;\n\n const numAge = Number(age);\n\n let group = acc.find((g) => g.nationality === nationality);\n\n if (!group) {\n group = {\n nationality,\n averageAge: numAge,\n playerCount: 1\n };\n acc.push(group);\n } else {\n group.playerCount++;\n group.averageAge =\n (group.averageAge * (group.playerCount - 1) + numAge) / group.playerCount;\n }\n\n return acc;\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"groupedData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"function process(data) {\n const grouped = d3.group(data, (d) => d.nationality);\n\n const output = [];\n\n grouped.forEach((players, nationality) => {\n const totalAge = players.reduce((acc, player) => acc + +player.age, 0);\n const totalWage = players.reduce(\n (acc, player) => acc + +player.wage_eur,\n 0\n );\n const avgAge = totalAge / players.length;\n const avgWage = totalWage / players.length;\n\n output.push({\n nationality,\n playerCount: players.length,\n avgAge,\n avgWage\n });\n });\n\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"height = width * 0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Altair\n\nThis week's assignment is to make a copy of your completed Week 2 assignment with the players_20.csv data file, make a scatterplot, and encode one additional channel (it can be categorical or quantitative, e.g., color, shape, size of circles).\n\nSolution Link: https://colab.research.google.com/drive/1zE7rj1SFsDoFfo53SCLEfmlXiInKcbZB?usp=sharing\n\n${altair_instructions}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Tableau\n\nThis weeks assignment is to copy your completed Week 2 assignment with the players_20.csv data file, make a scatterplot, and encode one additional channel (it can be categorical or quantitative, e.g., color, shape, size of circles).\n\nSolution Link: https://public.tableau.com/views/W209-Fall2023-Sec5-Charlton-HW4/Sheet1?:language=en-US&publish=yes&:display_count=n&:origin=viz_share_link\n\n${tableau_instructions}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`# Peer Review Prompts\n\n- Which additional encoding was used for scatter plot?\n- Did the choice of variables on x and y make sense to include 0 in the domain? Why or why not?\n- Did you learn anything suprising or insightful by viewing the charts? If not, what could be done to close the loop from visualization to insight?\n\n${peer_review_instructions}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import {\n observable_instructions,\n altair_instructions,\n tableau_instructions,\n peer_review_instructions\n} from \"@berkeleyvis/how-to-submit-assignments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null