Samuel Karkache

@SamKarkache·17 public vizzes

NFL Passing Yards Visualization Final Revision

This interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, allowing users to compare any two numeric attributes, such as passing yards versus touchdowns. The D3.js visualization supports filtering by year and award type, with a player name search and color-coded points representing Pro Bowl, All-Pro, MVP, or no award. Clicking a point reveals a tooltip with player details, while dropdown menus and an input field enable dynamic data exploration.

Dec 4, 2024

Loading thumbnail…

NFL Passing Yards Visualization Final Revision

An interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, comparing two user-selected numeric attributes such as yards and touchdowns. The animation shows each player as a colored circle, with colors representing awards like MVP, All-Pro, or Pro Bowl. Users can filter by year, award, and player name. Built with D3.js, the visualization uses `scaleLinear`, `axisLeft`, and dynamic axes to update the scatter plot based on selections. Data from CSV files is preprocessed to assign awards and colors, and clicking a point displays a tooltip with player details.

Dec 4, 2024

Loading thumbnail…

NFL Passing Yards Visualization 11/29/2024 Revision

This interactive D3.js scatter plot visualizes NFL passing statistics from 2013 to 2023, with each dot representing a quarterback-season and colored by award status (MVP, All-Pro, Pro Bowl, or none). Users can select any two numeric attributes for the X and Y axes using dropdown menus, filter by year or award, and search for specific players. Hovering highlights award categories in the legend, while clicking a dot displays a tooltip with player details and their values for the current axes. The visualization uses d3 scales, axes, and transitions for smooth interactions.

Nov 30, 2024

Loading thumbnail…

NFL Passing Yards Visualization 11/22/2024 Revision

This interactive scatter plot animates NFL quarterback statistics from 2013–2023, visualizing relationships between numeric attributes like passing yards and touchdowns. Using D3.js, it displays each player as a colored circle representing award status, with dropdown menus for selecting axes, filters for year or award type, and a text input for player search. Clicking a data point reveals a tooltip with player details, while hovering over the legend highlights matching points. The visualization supports dynamic data exploration through state management and uses D3’s selection, scale, and axis APIs for rendering.

Nov 22, 2024

Loading thumbnail…

NFL Passing Yards Visualization 11/15/2024 Revision

This interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, allowing users to compare any two numeric attributes by selecting them from dropdown menus. The visualization also filters data by year and award status, with points colored to distinguish MVP, All-Pro, Pro Bowl, and no-award players. The D3.js implementation uses `scaleLinear` for axes, `axisLeft` for the y-axis, and data-driven circles that reveal tooltips on click, displaying player name, year, and axis values. Data preprocessing converts CSV values to numbers and categorizes awards before rendering.

Nov 15, 2024

Loading thumbnail…

NFL Passing Yards Visualization 11/08/2024 Revision

This interactive scatter plot explores NFL quarterback statistics across multiple seasons (2013–2023), sourced from CSV data files. Users can select any two numeric attributes for the x- and y-axes, filter by year, and categorize points by award type (Pro Bowl, All-Pro, MVP, or no award), which also determines circle color. The visualization uses D3.js (v7) to render axes, axis labels, a legend, and data points, with hover and click interactions to highlight award categories and display detailed player information.

Nov 9, 2024

Loading thumbnail…

NFL Passing Yards Visualization 10/31/2024 Revision

This interactive scatter plot visualizes NFL passing statistics across multiple seasons, with each point representing a quarterback and colored by award status (Pro Bowl, All-Pro, MVP, or no award). Users can select different numeric attributes for the x- and y-axes via dropdown menus, as well as filter by specific years, while d3.scaleLinear and d3.axisLeft handle data mapping and axis rendering. The chart updates dynamically by resetting the data array and re-calling the scatterPlot function, which uses D3 joins to manage SVG circles and rectangles.

Nov 9, 2024

Loading thumbnail…

Course Project: NFL Passing Yards Visualization

This interactive scatter plot visualizes NFL quarterback statistics from the 2023 season, using data from a CSV file that includes passing yards and various performance metrics. A D3 scatter plot maps selected attributes onto x and y axes, with dropdown menus allowing users to compare any two numeric attributes. Points are color-coded based on player awards, including Pro Bowl, All-Pro, and MVP honors. The visualization uses d3-scale functions for axes and includes a legend to clarify the award color coding.

Nov 1, 2024

Loading thumbnail…

Samuel Karkache - Make a Map

This visualization displays a world map using a Natural Earth projection, highlighting the top 10 countries by GDP in green while rendering all other countries in gray. The map is built with `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country outlines, and `d3.geoGraticule` for the graticule. Country names and GDP values appear as labels on hover, with data sourced from the visionscarto-world-atlas. The code uses `topojson-client` to convert the TopoJSON data into GeoJSON features.

Oct 23, 2024

Loading thumbnail…

Pseudo-Visualization NFL Passing

This pseudo-visualization maps 100 randomly generated data points across two statistical axes, colored by a categorical legend for Pro Bowl, No Award, and All Pro. Built with D3 v7, it uses `scaleLinear` for position scaling, `scaleOrdinal` for legend colors, and the `@curran/axis-labels` library for labeled axes. The `plot` function draws an inner rectangle, axes, and a legend, while a nested `mark` function renders scatterplot circles. The code demonstrates composable D3 modules and scales, though the data itself is synthetic random values rather than actual NFL passing statistics.

Oct 11, 2024

Loading thumbnail…

NFL Passing Yards Visualization

This example visualizes NFL passing statistics as a scatter plot, with each circle representing a player’s performance across two metrics. The chart uses D3’s `scaleLinear` and `axisLeft` to map data points, while the `xAxis` and `yAxis` functions from the `@curran/axis-labels` library add labeled axes. The visualization reads from a dataset, rendering circles with configurable radius and opacity. The code demonstrates a reusable `viz` function that accepts data accessors and margin settings, allowing the same plotting logic to be applied to any dataset, such as the Penguins Dataset referenced in the README.

Oct 11, 2024

Loading thumbnail…

NFL Touchdowns vs. Interceptions Scatter Plot

This scatter plot visualizes the relationship between NFL passing touchdowns and interceptions for quarterbacks in the 2023 season, with each circle representing a player. The chart positions interceptions on the x-axis and touchdowns on the y-axis, using linear scales to map the data. Built with D3.js, the visualization employs `scaleLinear` for both axes and renders circles with a fixed radius and opacity, overlaid on a light gray inner rectangle. Axis labels are added using the `@curran/axis-labels` package, while the underlying dataset comes from the `@SamKarkache/nfl-passing-yards-2023` package. The code calculates axis domains from the data's extent and includes margin-based positioning for the plot area.

Sep 19, 2024

Loading thumbnail…

NFL-Passing-Yards-2023

This visualization displays the first row of NFL 2023 passing statistics as a formatted JSON object, showing player performance metrics. The code loads data from a CSV file using `import data from './passingYards.csv'` and converts all numeric attributes to numbers via a loop. It uses plain HTML `<pre>` elements with adjustable font size to render the data, with no additional visualization libraries. The example comes from pro-football-reference.com and serves as a raw data preview for further exploratory visualization.

Sep 11, 2024

Loading thumbnail…

Visualize Numbers - NFL Career Rushing Touchdowns

This animation displays the career rushing touchdowns for the top five NFL running backs, using circle size to represent touchdown totals and color to distinguish each player. Sorted by rank, the visualization animates the circles growing from zero to their final size while player names and touchdown counts appear in labels below. The code imports specific D3 functions like `select` and `transition`, applying a five-second transition with staggered delays for the circles and faster fifty-millisecond transitions for updates. Data comes from Pro-Football-Reference, with the animation rendered against a green background.

Sep 11, 2024

Loading thumbnail…

Video Game Sales

The example displays the first record of the Video Game Sales dataset as a formatted JSON object, revealing its structure for tasks like discovering top-selling genres or comparing regional sales. It imports data from a local CSV file and converts seven specified numeric attributes from strings to numbers before serializing the first element. The visualization renders this data using a simple HTML `<pre>` tag with a configurable font size, demonstrating a minimal approach to data inspection without relying on a charting library. This setup provides a transparent view of the dataset’s fields, enabling users to understand the available variables for subsequent analysis.

Sep 10, 2024

Loading thumbnail…

Vaccine-Data

This visualization displays a JSON preview of COVID-19 vaccine data from the WHO, showing attributes such as total vaccinations, persons vaccinated, and dates for each country. The code loads a CSV file, converts numeric fields to numbers or null, and renders the first data entry as formatted JSON text within an HTML `<pre>` element. It uses vanilla JavaScript to parse the data and embeds it with the specified font size, providing a raw data inspection tool rather than a graphical representation.

Sep 10, 2024

Loading thumbnail…

Samuel Karkache - Creative Coding with Circles

This example displays a generative composition of 50 semi-transparent circles and rectangles arranged in sinusoidal patterns on a light green background. The circles follow a wider elliptical path while the rectangles trace a tighter curve, with both shapes cycling through a palette of five colors. Built using the D3.js library (version 7.8.5) and its `select`, `selectAll`, `data`, and `join` APIs, the code procedurally generates each shape’s coordinates and attributes within a loop, then renders them as SVG elements. The visualization demonstrates creative coding by combining mathematical functions with basic geometric primitives.

Aug 29, 2024