[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_108":-5,"_60":16,"_109":-5,"_110":111,"_112":113},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":69,"_90":69,"_44":45,"_91":-7,"_92":51,"_93":49,"_94":-5,"_95":96,"_97":16,"_98":99,"_100":99,"_101":43,"_102":-7,"_66":103,"_68":103,"_104":-5,"_105":65,"_106":107},"vizContent",{"_42":69,"_70":71,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":48,"_53":48,"_54":55,"_56":57,"_58":59,"_60":16,"_61":-7,"_62":41,"_63":41,"_64":65,"_66":67,"_68":67},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/eschuman20/5b4250485c184e9cb13c8e34da687c64","author","eschuman20","id","a8852f0040ea442181e2beb970e5e7e4","title","Top 5 Bar Chart by League and Year","ownerHandle","ownerDisplayName","eschuman20@gmail.com","v3-user-eschuman20","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/93109735?v=4","oauthProvider","github","oauthId","93109735","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791069427843,"updatedAt","5b4250485c184e9cb13c8e34da687c64","files",{"_72":73,"_74":75,"_76":77,"_78":79},"14349493",{"_80":88,"_82":89},"67530907",{"_80":86,"_82":87},"270fdb6c",{"_80":84,"_82":85},"29fbc049",{"_80":81,"_82":83},"name","README.md","text","A bar chart showing the top 10 goal scorers in Italy in 2016\n\n\n\n# Challenge\n\n- Fork this viz and modify it to show your own data\n","index.js","import { select, descending } from 'd3';\nimport { viz } from './viz';\nimport { data } from '@eschuman20/footballscorers';\nimport { observeResize } from '@curran/responsive-axes';\n\nexport const main = (container, { state, setState }) => {\n const dimensions = observeResize({\n state,\n setState,\n container,\n });\n\n if (dimensions === null) return;\n const { width, height } = dimensions;\n\n if (!state.yValue)\n setState((prevState) => ({\n ...prevState,\n yValue: 'Shots',\n }));\n\n if (!state.league)\n setState((prevState) => ({\n ...prevState,\n league: 'Serie A',\n }));\n\n if (!state.yearValue)\n setState((prevState) => ({\n ...prevState,\n yearValue: 2016,\n }));\n\n const nameColumn = 'Player Names';\n const n = 5;\n const yearData = data.filter(\n (d) => d['Year'] === parseInt(state.yearValue),\n );\n const leagueData = yearData.filter(\n (d) => d['League'] === state.leagueValue,\n );\n const sortedData = leagueData.sort((a, b) =>\n descending(a[state.yValue], b[state.yValue]),\n );\n const topNData = sortedData.slice(0, n);\n\n const ySelect = document.createElement('select');\n ySelect.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n `;\n\n const leagueSelect = document.createElement('select');\n leagueSelect.innerHTML = `\n \n \n \n \n \n \n \n \n \n `;\n\n const yearSelect = document.createElement('select');\n yearSelect.innerHTML = `\n \n \n \n \n \n `;\n\n ySelect.addEventListener('change', () => {\n setState((prevState) => ({\n ...state,\n yValue: ySelect.value,\n leagueValue: leagueSelect.value,\n yearValue: yearSelect.value,\n }));\n });\n\n leagueSelect.addEventListener('change', () => {\n setState((prevState) => ({\n ...state,\n leagueValue: leagueSelect.value,\n yValue: ySelect.value,\n yearValue: yearSelect.value,\n }));\n });\n\n yearSelect.addEventListener('change', () => {\n setState((prevState) => ({\n ...state,\n leagueValue: leagueSelect.value,\n yValue: ySelect.value,\n yearValue: yearSelect.value,\n }));\n });\n\n container.appendChild(ySelect);\n container.appendChild(leagueSelect);\n container.appendChild(yearSelect);\n\n const svg = select(container)\n .selectAll('svg')\n .data([null])\n .join('svg')\n .attr('width', width)\n .attr('height', height);\n\n viz(svg, {\n data: topNData,\n xValue: (d) => d[nameColumn],\n xAxisLabelText: 'Player Name',\n xAxisLabelOffset: 35,\n yValue: (d) => d[state.yValue],\n yAxisLabelText: state.yValue,\n yAxisLabelOffset: 27,\n innerRectFill: '#E8E8E8',\n padding: 12 / 100,\n marginTop: 20,\n marginBottom: 57,\n marginLeft: 74,\n marginRight: 20,\n width,\n height,\n });\n};\n\n\n\n","viz.js","import { scaleLinear, scaleBand, axisLeft, max } from 'd3';\nimport {\n xAxis,\n yAxis,\n xAxisLabel,\n yAxisLabel,\n} from '@curran/axis-labels';\n//TODO: Add an attribute for xAxis font size\nexport const viz = (\n svg,\n {\n data,\n xValue,\n xAxisLabelText,\n xAxisLabelFontSize,\n xAxisLabelOffset,\n yValue,\n yAxisLabelText,\n yAxisLabelOffset,\n marginLeft,\n marginTop,\n marginRight,\n marginBottom,\n width,\n height,\n innerRectFill,\n padding,\n },\n) => {\n const xScale = scaleBand(data.map(xValue), [\n marginLeft,\n width - marginRight,\n ]).padding(padding);\n const yScale = scaleLinear(\n [0, max(data, yValue)],\n [height - marginBottom, marginTop],\n );\n\n const innerWidth = width - marginLeft - marginRight;\n const innerHeight = height - marginTop - marginBottom;\n\n svg\n .selectAll('rect.inner-rectangle')\n .data([null])\n .join('rect')\n .attr('class', 'inner-rectangle')\n .attr('x', marginLeft)\n .attr('y', marginTop)\n .attr('width', innerWidth)\n .attr('height', innerHeight)\n .attr('fill', innerRectFill);\n\n // Axes\n xAxis(svg, { height, marginBottom, xScale });\n yAxis(svg, { marginLeft, yScale });\n\n // Axis Labels\n xAxisLabel(svg, {\n xAxisLabelText,\n width,\n height,\n marginBottom,\n xAxisLabelOffset,\n });\n yAxisLabel(svg, {\n yAxisLabelText,\n yAxisLabelOffset,\n height,\n });\n\n // Bars\n svg\n .selectAll('rect.mark')\n .data(data)\n .join('rect')\n .attr('class', 'mark')\n .attr('x', (d) => xScale(xValue(d)))\n .attr('y', (d) => yScale(yValue(d)))\n .attr('width', xScale.bandwidth())\n .attr('height', (d) => yScale(0) - yScale(yValue(d)));\n};\n","package.json","{\n \"dependencies\": {\n \"d3\": \"7.8.5\"\n },\n \"vizhub\": {\n \"libraries\": {\n \"d3\": {\n \"global\": \"d3\",\n \"path\": \"/dist/d3.min.js\"\n }\n }\n }\n}\n","slug","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","3d14782af81f4739ae54960c49a0155c","startCommitId","forkedFrom","forkedFromVisibility",1713631731000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]