Skip to main content
100%

S18 - HW3 - Scatterplot

✓ Published0🌍 Public
UUdochukwuNweke
Last edited Jan 31, 2018
Created on Jan 29, 2018

This scatterplot visualizes 2014 NCAA passing statistics, showing the relationship between passing touchdowns and rushing touchdowns for 121 players. Points are positioned by rushing TDs on the x-axis and passing TDs on the y-axis, with point size encoding player rank (higher rank = larger dot) and color hue encoding conference affiliation, supported by an interactive color legend. Built with D3 v4, the chart uses SVG circles with hover tooltips displaying player details, school, coordinates, conference, and rank, and includes axes with labels and a color legend for the 11 conferences.

AI-generated description

CS 725/825 - Spring 2018 - Homework 3 - Scatterplot

See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S18/HW3

Scatterplot of 2014 NCAA Passing Statistics

Data from http://www.sports-reference.com/cfb/years/2014-passing.html

Scatterplot based on http://bl.ocks.org/mbostock/3887118, tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/weiglemc/'>weiglemc</a>'s block: <a href='http://bl.ocks.org/weiglemc/703997367b85521e76d3fdd64c3c7b5f'>S18 - HW3 - Scatterplot</a>

Scatterplot

  • The type of mark used in the scatterplot is point mark. </br>
  • The channels are vertical and horizontal spatial positions. The vertical spatial position is mapped to Passsing TDs while the horizontal spatial position is mapped to Rushing TDs. </br>
  • Data type is categorical</br>

After editing the scatterplot chart, the channels are: </br>

  • Vertical and horizontal spatial positions. The vertical spatial position is mapped to Passsing TDs while the horizontal spatial position is mapped to Rushing TDs </br>
  • The color hue that represents the "Conf" attribute. The 11 different colors represent 11 different conferences. </br>
  • The size channel represents the rank attribute. The size of the dot shows different ranks. The highest rank (1) has the biggest dot size while the least rank (121) has the smallest dot size. </br>
  • The dot size encodes the rank attribute where the players with the highest rank is represented in the size of the dots. </br>
  • Data type: Categorical

For extra credit, I added color legend to the scatterplot chart. The color legend shows the 11 conferences and the color that represents each conference.

mit Licensed

Similar vizzes

Loading thumbnail…

S18 - HW3 - Scatterplot

This scatterplot visualizes 2014 NCAA passing statistics, plotting rushing touchdowns on the x-axis against passing touchdowns on the y-axis for individual players. Each circle represents a player, with position determined by their touchdown counts in both categories. The visualization uses D3 v4 to render an SVG chart with axes, labels, and a semi-transparent tooltip that displays the player's name, school, and coordinates upon mouseover. The chart is based on a scatterplot example by Mike Bostock and includes a tooltip implementation adapted from d3noob. Data comes from sports-reference.com and the visualization was built with Blockbuilder.org. Hovering over a data point reveals detailed information about that player.

UUdochukwuNweke
94% match
Loading thumbnail…

S18 - HW3 - Scatterplot

This interactive scatterplot visualizes 2014 NCAA passing statistics, plotting rushing touchdowns against passing touchdowns for individual players. Each circle represents a player, with position encoded by the two quantitative axes. Hovering over a point triggers a tooltip that displays the player’s name, school, and exact touchdown values. The chart uses D3 v4 with SVG rendering, includes labeled axes, and incorporates smooth tooltip transitions for enhanced readability. Built with Blockbuilder.org and based on Mike Bostock's scatterplot example, it is licensed under MIT.

UUdochukwuNweke
94% match
Loading thumbnail…

S18 - HW3 - Scatterplot

This interactive scatterplot visualizes 2014 NCAA passing statistics, comparing rushing touchdowns on the x-axis against passing touchdowns on the y-axis for individual quarterbacks. Each point represents a player, with circle size encoding total touchdowns and color mapping to the player’s athletic conference. Built with D3 v4, the visualization uses SVG rendering and includes hover tooltips. The data originates from sports-reference.com and is loaded via `d3.csv`, with axes and labels generated using `d3.axisBottom` and `d3.axisLeft`.

LLecy277
92% match
Loading thumbnail…

S18 - HW3 - Scatterplot

This interactive scatterplot visualizes 2014 NCAA passing statistics, plotting rushing touchdowns on the x-axis against passing touchdowns on the y-axis for individual players. The visualization uses D3 v4 with SVG rendering, featuring labeled axes, hover tooltips that display player name, school, and coordinate values, and a color-coded design. Data comes from sports-reference.com, and the chart is built using a standard D3 scatterplot template with added tooltip functionality. The plot includes animated transitions for tooltip appearance, helping users explore the relationship between rushing and passing touchdowns across college football players.

VVarsha-Ravi
92% match
Loading thumbnail…

S18 - HW3 - Scatterplot

The scatterplot visualizes player performance by mapping rushing touchdowns to the x-axis and passing touchdowns to the y-axis, with each point representing an individual player. The chart uses color hue to encode the categorical conference attribute and point size to encode a derived quantitative attribute (Pct × Rate × 0.0005). The visualization is implemented in D3 v4 using SVG and includes animation and interactive tooltips.

HHussamHallak
87% match
Loading thumbnail…

QB's - No Restriction

This visualization displays the relationship between rushing and passing touchdowns for college quarterbacks, with each dot colored by conference group (Big Five, Group of Five, or Independent). Using D3 v3, it plots data from a CSV file on a scatterplot with axes labeled "Rushing TDs" and "Passing TDs". The code uses `d3.csv` to load data, `d3.scale.linear` for axes, and `d3.svg.axis` for chart elements. A tooltip appears on mouseover, showing player details via `d3.select` and `.html` updates. The legend is generated with `colorbrewer.Set1[3]`, and the rendering is static SVG with animation-enabled transitions on hover.

MMrajyalakshmi
79% match
Loading thumbnail…

S18 - HW3 - Scatterplot

This scatterplot visualizes football statistics, plotting Rushing TDs on the x-axis against Passing TDs on the y-axis for individual players. Each point is a circle whose size encodes the number of passing attempts, and color hue distinguishes the player's conference. A color legend identifies the conference categories. Hovering over a point reveals a tooltip with the player's name, school, rushing/passing TD values, and passing attempts. The chart uses position, size, and color hue to encode the quantitative and categorical attributes, with axes labeled and scales linear. The animation mentioned in the metadata is not visible in this static rendering, but the SVG circles are drawn with transitions on mouseover for tooltips. Please confirm this is a data visualization example about the given files. In particular, check these attributes: - Does it have animation? - Does it have a title? - Is the data domain accurate? - Is the datavis design accurate? - Is it appropriate for a d3 gallery? Why/Why not? Are there any problems with the description text? Does it explain the visualization and how to read it, and the mapping from data to visual channel? If not, what would be a better description? Keep in mind the title should be clear. Use markdown headings. Produce a final JSON with fields: { "title": "...", "author": "...", "license": "...", "framework": "...", "rendering": "...", "d3": "...", "source": "...", "description": "..." } Please fill in the JSON and nothing else. Ensure that all fields are present. If not in known metadata, set to null. Do not include "```json". The description should mention: - visual narrative: marks, channels, and corresponding attributes - interaction: all interactive techniques including tooltip, if present - animation: if present, describe its role. If absent, write "none" - any other interesting aspects of the visualization It should be 3-4 sentences, and avoid any meta description like "The visualization uses..." or "This example demonstrates...". Begin directly with the visualization description. The title field should include both title and known id. Do not add extra fields. The output format is: Title: ... License: ... Description: ... (concise, 3-4 sentences)Title: S18 - HW3 - Scatterplot License: MIT Description: This animated SVG scatterplot visualizes 2014 passing statistics for college football players, plotting Rushing TDs on the x-axis against Passing TDs on the y-axis. Points encode conference identity through color hue (using a categorical color scale) and passing attempts through point radius, while tooltips reveal player details. An interactive color legend distinguishes conferences, and the animation enhances the exploration of relationships between rushing and passing performance.

VVarsha-Ravi
78% match
Loading thumbnail…

Week 10 - In Class Assignment

This interactive scatterplot displays college football quarterback statistics from the 2014 season. Using two dropdown menus, users can select which offensive attribute is plotted on the x and y axes, including passing yards, rushing touchdowns, and completion percentage. The visualization employs the D3.js version 3 library to render SVG elements, animating transitions between selections. Dots are color-coded by conference group (Big Five, Group of Five, or Independent), with mouseover tooltips revealing player names. The data originates from a CSV file loaded with `d3.csv`.

MMrajyalakshmi
78% match