2b:null 2c:["$","title",null,{"children":"June and July are the least favorite months of soccer players and soccer fans! | parthivi-varshney | Observable"}] 31:T460,### Hypothesis (Made up insights) : 1) Most games are played early during the day, preferably before 12:00 am. - **Considerations** - I would need enough data which includes the time at which the games were played. I would also need to count the total number of games played at each hour. - **Tasks** - **T1** : Summarize games grouped by hours in a day **[Summarize, Feature]**. - **T2** : Compare the number of games at each hour across available years **[Compare, Feature]**. 2) Since days get shorter during the winter and July to August are extremely hot, most games are played early in the year, i.e before July, when the weather is pleasant and the days are longer. - **Considerations** - I would need enough data which includes the whole time stamp of the date of the game. I would also need to count the total number of games played at in each month across different years to verify the hypothesis. - **Tasks** - **T1** : Summarize the games played across the years and months **[Summarize, Feature]**. - **T2** : Discover what months are more desirable for the games **[Discover, Distribution]**.32:T5bc,### Data Abstraction (What?) : * **Dataset type:** Tabular * **Availability:** Static * **Source:** [Kaggle - Games Data](https://www.kaggle.com/datasets/willfitzhugh/european-soccer-data) #### 1) Date Truncation Graph: * **Attributes used:** * game_date * Attribute Type - Quantitative * Ordering Direction - Sequential : Since year is being used as the first part of date truncation and it is ever increasing, in the date truncation graph, the ordering direction of game datte is sequential. * **Derived Attributes:** * "Number of Games" which is an aggregation of number of games played on a particular date, the number of games are calculated based on the level of date truncation used. * Attribute Type - Quantitative * Orientation - Sequential #### 2) Date Parts Graph: * **Attributes used:** * game_date * Attribute Type - Ordinal * Ordering Direction - Sequential/Cyclic : In this particular graph, since the parts of date are being individually, the ordering direction depends upon the part in use. For example, year in itself is ordered sequentially while the other parts line month, week, hour etc. repeat in a cyclic manner. * **Derived Attributes:** * "Number of Games" which is an aggregation of number of games played on a particular date, the number of games are calculated based on the part of date being used. * Attribute Type - Quantitative * Orientation - Sequential 33:T926,### Marks & Channels (How?) : 1) **Date Truncate Graph** : * **Marks:** Points, Lines * The **x-axis** represents the truncated game date which is **express** and the **y-axis** represents the total number of games played which is **express** again. * **Channels:** - **Length** : To compare and identify the number of games played on a particular date. * Attribute : Number of games * Hypothesis : 2 * Task : T2 * The number of games per date is a quantitative attribute that can be **effectively** represented using the length channel in a visualization. By using length, it becomes easy to **express** and compare the number of games played at different dates and times. The length channel enhances the interpretability of the visualization, making it easier for viewers to understand and evaluate the information being presented. 2) **Date Parts Graph** : * **Marks:** Lines * The **x-axis** represents the parts game date which are **separate, order and align** and the **y-axis** represents the total number of games played which is **express**. * **Channels:** - **Length** : To compare and identify the number of games played on a particular month/week/date and so on. * Attribute : Number of games * Hypothesis : 1 & 2 * Task : T2 * The number of games per date is a quantitative attribute that can be **effectively** represented using the length channel in a visualization. By using length, it becomes easy to **express** and compare the number of games played at different dates and times. The length channel enhances the interpretability of the visualization, making it easier for viewers to understand and evaluate the information being presented. - **Color Saturation** : To identify the year in a particular date part. * Attribute : game date - year * Hypothesis : 2 * Task : T2 * Years can be **effectively** represented using the color channel in a visualization, as an ordinal attribute. By leveraging color saturation, it becomes effortless to **express** and differentiate between the years that different dates and times encompass. The color channel boosts the interpretability of the visualization, making it easier for viewers to comprehend and assess the information being presented. 34:T417,### Audience - Soccer fans: Soccer fans may be interested in a visualization that shows the number of soccer games played between 2016 to 2018. They could use this information to track the performance of their favorite teams or players. - Sports journalists: Sports journalists may use the visualization to support their reporting and analysis of soccer games played between 2016 to 2018. They could use the data to identify trends or patterns in the number of games played or to highlight interesting statistics. - Soccer league organizers: Soccer league organizers could use the visualization to track the number of games played by their teams over a specific period. This information could help them make decisions about scheduling, playoff formats, or other league-related matters. - General audience: A general audience may also find the visualization interesting or informative. For example, they could use the data to learn more about the popularity of soccer or to gain a better understanding of the sport's scheduling and organization.35:T620,timeLines = { const hover = vl.selectSingle("hover").fields(["date_time"]).nearest(true).on("mouseover").empty("none").clear("mouseout"); const dateField = vl.x().fieldO("date_time").timeUnit(timeTruncateSelected2).title(timeTruncateSelected); const totalCount = [ vl.y().count().title("Number of Games"), vl.color().fieldO("date_time").timeUnit("year").scale({range:"category"}) ]; const pointsSelect = ["lines","points"].includes("rule") ? null : hover; const pointsTransform = ["lines","points"].includes("rule") ? vl.filter(hover) : vl.filter("true"); const lines = vl.markLine() .encode([dateField].concat(totalCount)) .width(width-250); const points = vl.markPoint({tooltip: true}) .encode([dateField].concat(totalCount)) .select(pointsSelect) .transform(pointsTransform); const rule = vl.markRule() .encode( dateField, vl.opacity().if(hover, vl.value(0.3)).value(0), ) .select(hover) .transform(vl.pivot("date_time").value("totalCount")); const linesPointsLayers = ["lines","points"].filter(m => ["lines","points"].includes(m)).map(m => eval(m)); const ruleLayer = ["lines","points"].filter(m => ["rule"].includes(m)).map(m => eval(m)); return vl.layer([vl.layer(linesPointsLayers)].concat(ruleLayer)) .data(data) .render(); } 36:[{"id":"80f752edaa3ae8fb0f3436bf24d7d648349fd2d51471018cf6fd93c2dad2eec70230a3d04ed5f1ff73b5770bc1a907ce219aca114e6e67affe23aa0fb4005e66","href":"https://static.observableusercontent.com/files/80f752edaa3ae8fb0f3436bf24d7d648349fd2d51471018cf6fd93c2dad2eec70230a3d04ed5f1ff73b5770bc1a907ce219aca114e6e67affe23aa0fb4005e66","name":"Full_Dataset@2.csv","type":"text/csv","lastModified":1678861160149.878,"size":10360356}] 2f:{"id":"7d02daa5f91e2011","slug":null,"title":"June and July are the least favorite months of soccer players and soccer fans!","thumbnail":"7746615cacf48111bffb0b123a9f61d4c1ff04b68314c50d3509830c398471c8","access_level":"public","create_time":"$D2023-03-03T02:52:59.198Z","update_time":"$D2023-03-15T22:39:07.913Z","view_time":null,"first_public_time":"$D2023-03-03T02:52:59.198Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"29c4858a5f0f02f2","login":"parthivi-varshney","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a01697cc8144442f2a54ed31fc7c9c20b22e30c1a6fe52d5b38bd526bf019a9d","tier":"starter_2024"},"version":653,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"36cdff01b518af24","login":"parthivi-varshney","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a01697cc8144442f2a54ed31fc7c9c20b22e30c1a6fe52d5b38bd526bf019a9d","tier":null}],"members":[{"type":"individual","id":"36cdff01b518af24","login":"parthivi-varshney","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a01697cc8144442f2a54ed31fc7c9c20b22e30c1a6fe52d5b38bd526bf019a9d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"June and July are the least favorite months of soccer players and soccer fans!","cells":[{"id":0,"value":"# June and July are the least favorite months of soccer players and soccer fans!\nAuthor : [Parthivi Varshney](https://observablehq.com/@pv1995)
\nCourse : [Data Visualization / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\nInstructor : [John Alexis Guerra Gomez](https://observablehq.com/@john-guerra)
\nVideo : [Click Here](https://youtu.be/7nKhNmmAamo)
\nTweet : [Click Here](https://twitter.com/parthivivarshn1/status/1636078051867111424?s=46&t=a25pcP63QWjslbg9koGDBQ)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"## Date Truncate Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"SelectDateFormat = md`\n#### Drag to truncate date and time\nTruncate by: ${viewof timeRange}*${timeTruncateSelected}*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"lineChart = {\n const x = vl.x().fieldO(\"date_time\").timeUnit(timeTruncateSelected).title(timeTruncateSelected);\n const y = vl.y().count().scale({zero:false}).title(\"Number of Games\");\n const line = vl\n .markTrail()\n .data(data)\n .width(width-50)\n .height(400)\n .encode(x, \n y, \n vl.size().count(),\n vl.tooltip([x,y])\n );\n\n return line.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"## Date Part Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"datePart = md`\n#### Select date part\n${viewof xAxis} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"timePartChart = {\n const x = vl.x().fieldO(\"date_time\");\n // y = vl.y().fieldO(\"game_date\");\n\n const square = vl\n .markBar({ tooltip: true })\n .data(data)\n .width(800)\n .encode(x.timeUnit(xAxis).title(xAxis), \n vl.y().count().title(\"Number of Games\"), \n vl.color().scale({scheme:\"darkgreen\"}).fieldO(\"date_time\").timeUnit(\"year\")\n );\n\n return square.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"### Introduction\nSoccer, also known as football in some countries, is a popular sport played between two teams of eleven players each. The objective is to score goals by kicking a ball into the opposing team's goal. Soccer games are typically played on a rectangular field with a goal at each end, and the team with the most goals at the end of the game wins. This sport is played at both amateur and professional levels around the world and is known for its fast-paced action, strategic gameplay, and passionate fan base.
\nThe goal of this visualization project is to display the number of soccer games played between 2002 to 2023 in a clear and concise manner using the [Kaggle Games Data](https://www.kaggle.com/datasets/willfitzhugh/european-soccer-data). By using the charts below, the viewer will be able to see the changes in the number of games played over time.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":566,"value":"### Real Insights\n1) As hypothesised, data spanning several years consistently shows that soccer games are least preferred to be held during the months of June and July.
\n2) October of 2022 saw a significant rise in the number of soccer games being played.
\n3) Contrary to our hypothesis, it turns out that the majority of games were scheduled during the evening hours, with 4:00 pm and 9:00 pm being the most popular.
\n4) There are less soccer games scheduled towards the end of the month as compared to the rest of the month.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"### Visual Exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":643,"value":"#### Graph 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"SelectDate = md`\nTruncate by: ${viewof timeRange2}*${timeTruncateSelected2}*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"In creating this graph, my objective was to evaluate the effectiveness of using line colors as a channel to differentiate between years. However, I discovered that there is a higher degree of occlusion than I had anticipated. For instance, when truncating the date to include hours, the time period between June and July becomes exceedingly difficult to discern. It is possible that the year 2017 is obscured by 2016 and 2018.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"viewof timeRange2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"timeParts2 = [\"month\", \"date\", \"hours\", \"minutes\", \"seconds\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"timeTruncateSelected2 = timeParts2.slice(0, timeRange2).join(\" - \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"#### Graph 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"heapMap = {\n const x = vl.x().fieldO(\"date_time\").timeUnit(\"month\").title(\"Month\");\n const y = vl.y().fieldO(\"date_time\").timeUnit(\"date\").title(\"Date\");\n\n const square = vl\n .markRect({ tooltip: true })\n .data(data)\n .width(400)\n .height(400)\n .encode(x, \n y, \n vl.color().scale({scheme:\"darkgreen\"}).count()\n );\n\n return square.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"Discerning trends requires the inclusion of the year as a crucial component. If the year is removed from the axis, the heat map will lose its ability to effectively convey the information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":647,"value":"#### Graph 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"viewof barGraph = vl.markBar({tooltip: true })\n .data(data)\n .encode(\n vl.x().fieldO(\"date_time\").timeUnit(\"date\").title(\"Date\"),\n vl.y().count().title(\"Number of Games\"),\n vl.color().fieldO(\"date_time\").timeUnit(\"month\")\n )\n .height(500)\n .width(600)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"Without the ability to manipulate the axis of a graph, it becomes challenging to identify trends across years and draw conclusions about our hypothesis. By providing users with additional options to manipulate the graph according to their requirements, we can more effectively analyze the data and arrive at meaningful insights.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"#### Graph 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"vl\n .markCircle({tooltip: true})\n .encode(\n vl.x().fieldO(\"date_time\").timeUnit(\"month\").title(\"Month\"),\n vl.y().fieldO(\"date_time\").timeUnit(xAxis).title(\"Day\"),\n vl.size().field(\"date_time\").count(),\n vl.row().fieldN(\"date_time\").timeUnit(\"quarter\")\n )\n .data(data)\n .height(300)\n .width(width-350)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"In this graph, I have incorporated an additional layer of information by dividing it into quarters, making it simple to understand and interpret. However, this approach may not be suitable in two scenarios:\n- If we wish to switch from quarters to days or hours, it may not be as effective.\n- As the number of data points on the graph increases, it can become increasingly difficult to read as a result of occlusion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":651,"value":"#### Graph 5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"vl.markPoint({ tooltip: true, thickness: 3 })\n .data(data)\n .width(600)\n .height(450)\n .encode(\n vl.y().count().title(\"Number of Games\"),\n vl.x().fieldO('date_time').timeUnit(\"month\").title(\"Month\"),\n vl.color().scale({scheme:\"inferno\"}).fieldO(\"date_time\").timeUnit(\"year\"),\n )\n .config({ view: { stroke: null }})\n .render({renderer: 'svg'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"It is clear from the graph above that as we increase the granularity of time discerning facts would become tougher.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"### Data Manipulation\nI have used JavaScript to manipulate the raw data into desired form. The original data contained two separate columns for time and date, with the date in reverse order, that is, the year at the end. To reverse the date, I split the date string at each \"/\" character, reversed the order of the resulting parts, and joined them back together. Then, I concatenated the time with the newly formatted date, and passed the resulting string to the new Date() function to obtain the ISO format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"viewof xAxis = select({\n options: timeUnits,\n value: [\"hours\"],\n title: \"x-axis\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"timeParts = [\"year\",\"month\", \"date\", \"hours\", \"minutes\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"timeUnits = [\n \"quarter\",\n \"month\",\n \"date\",\n \"week\",\n \"day\",\n \"dayofyear\",\n \"hours\",\n \"minutes\",\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof timeRange = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"timeTruncateSelected = timeParts.slice(0, timeRange).join(\" - \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"data = copyData.map(d=> {\n return {...d, date_time:new Date(d.Date.split('/').reverse().join('/') + ' ' + d.Time) }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"copyData = [...raw_data]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"raw_data = FileAttachment(\"Full_Dataset@2.csv\")\n.text()\n.then(d3.csvParse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import { select, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-dsv\", \"d3-time-format\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"