Fork of Transforming Data

Fork of Scatter Plot

A scatter plot shows NHL playoff performance across teams and years, plotting each team-season as a colored circle based on goals scored against year, with team membership encoded by color. The visualization includes axes, labels, and an interactive color legend that highlights points from a selected team when hovered. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to load and map the dataset, while custom modules manage axes and legend rendering. Data comes from a CSV of NHL playoff records.

78% match

Kkratikashetty1102@gmail.com

Fork of Transforming Data

This example demonstrates data transformation by fetching a CSV file of stock data, parsing it with `d3.csvParse`, and grouping the records by industry using `d3.flatGroup`. It then counts the number of stocks per industry and displays the resulting summary as a JSON string in a `<pre>` element. The visualization uses D3 v7's selection and join APIs to render the computed counts, showing a simple text-based aggregation of the underlying dataset.

76% match

Project

This visualization displays the cumulative number of Stanley Cup playoff wins for each of the original six NHL teams across a sliding timescale from 1918 to 2018. A donut chart updates dynamically as a slider adjusts the year cutoff, with each team’s slice colored distinctly via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.pie()` to generate arc data and `d3.arc()` to render paths, filtering and grouping the CSV data by team and year with `d3.groups`.

73% match

NHL Stanley Cup Playoffs (1918 - 2022)

This visualization displays NHL Stanley Cup playoff results from 1918 to 2022, showing team rankings, win-loss records, and goal statistics for each season. The code initially renders the raw data as JSON text using d3.select and text(), then fetches the CSV file with the Fetch API and parses it with d3.csvParse. Numeric fields are converted to numbers before the data is stored in the application state via setState, with the visualization framework relying on d3.v7 for DOM manipulation and data handling.

72% match

Ppraveennayak1702@gmail.com

Fork of Create a face with d3.js!

This visualization displays the win counts of multiple teams across years using layered area paths in an SVG, with each team distinguished by a color from the `d3.schemeCategory10` palette and a legend identifying them. The code loads CSV data via `d3.csv` with `d3.autoType`, then applies `d3.area()`, `d3.scaleLinear` for the axes, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The chart emphasizes trend comparison through semi-transparent fills, sourced from a gist-hosted dataset, while relying on D3 v7 for all rendering.

Fork of Marks and Channels

This fork of the marks and channels example displays Stanley Cup win totals for the original six NHL teams in a donut chart. The visualization uses color as a channel to distinguish teams, with a legend absent. The code employs d3-shape’s `pie` and `arc` generators to compute the arcs, drawing them as SVG paths with fills from a hardcoded color array. Data is embedded directly in `viz.js`, and the chart renders centered in an SVG that fills the viewport.

Transforming data of Historical NBA Performance

This example displays historical average winning percentages for NBA teams, computed from a CSV dataset and rendered as a JSON array. The visualization uses D3 v7’s `flatRollup` and `sum` functions to aggregate win percentages per team across all seasons. After fetching the data via a URL, `csvParse` converts the CSV string into objects. The computed results are output as formatted text inside a `<pre>` element, demonstrating a straightforward data-transformation pipeline without additional chart rendering.

QQingyang Wang Profolio

Ppraveennayak1702@gmail.com

Fork of Fork of Create a face with d3.js!

This example visualizes the win records of multiple sports teams over a series of years, with each team represented by a separate colored line. The chart uses D3.js v7 to load CSV data from a remote Gist and render an SVG line chart with axes, labels, and a legend. The code specifically uses `d3.csv` with `d3.autoType` for data parsing, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for the axes, with `d3.schemeCategory10` providing the line colors.