Skip to main content
SimilarExport ZIP
100%

D3-Learning

✓ Published0🌍 Public
Jjimdb8687
Last edited Feb 19, 2021
Created on Feb 19, 2021
Forked from Cars Report

This example shows a line chart tracking monthly rankings and counts for various board games in BoardGameGeek’s data. The visualization uses D3.js v3 to render separate lines for each game’s count and rank over time. The code imports the full `d3` module in `index.js` and relies on standard D3 scales, axes, and line generators to plot the data from an external CSV file. The chart highlights trends in popularity and competitive positioning across the observed period.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Charts

Two line charts display board game ratings from 2016 to 2020, comparing the number of ratings for games like Catan, Dominion, and Codenames across monthly dates. The example loads D3 v5 via a script tag and uses `d3.csv` to parse the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate SVG paths. Each game gets a distinct color from `d3.schemeCategory10`, with labels placed at the end of each line.

Oolin8
77% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes the daily count of board game ratings from November 2016 to August 2020. The display begins with a single line for Catan, which uses an ordinal color scale from `d3.scaleOrdinal` and `d3.schemeCategory10`. As additional games like Dominion and Codenames are added through `d3.nest`, the visualization reveals multiple lines, each sorted by their final value. The chart is rendered as an SVG using `d3.line` with `d3.curveBasis` smoothing. The data originates from the boardgame_ratings.csv file, with axes and grid lines generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleTime`.

RRyan Rong
73% match
Loading thumbnail…

Games Rating: 2015 - 2019

A line chart displays the average ratings of board games from 2015 to 2019, with separate lines tracking the counts of top-rated titles like Dominion, Codenames, and Gloomhaven. The visualization uses D3 v5 to load CSV data via `d3.csv`, nest and aggregate ratings by year using `d3.nest`, and render the resulting counts with `d3.line` and SVG. Axes are generated with `d3.axisBottom` and `d3.scaleLinear`, while a second SVG contains a bar chart.

Oolin8
72% match
Loading thumbnail…

Line chart

This line chart visualizes North American sales figures for video game titles, sourced from a CSV file. It uses D3 v7 APIs including `scaleBand`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to map categorical game titles to a blue line plot with labeled axes. The chart includes rotated x-axis tick labels to accommodate many titles and applies margins, a custom axis label, and a title. The data is loaded via `csv()` and rendered as an SVG.

Ssatishnarne99@gmail.com
70% match
Loading thumbnail…

D3 Tutorial

This tutorial demonstrates a simple line chart of yearly values from a CSV file, showing the trend of data points from 1970 to 2019. The visualization uses D3.js v6 to load the `data.csv` file and render an SVG chart. The code sets up a fixed-position chart container and relies on D3's selection and data-joining methods to plot the series. While the JavaScript implementation is incomplete, the example highlights D3’s fundamental workflow for binding external data to visual elements.

KKaitlyn Trudeau
69% match
Loading thumbnail…

Fork of Plot of Games with D3.JS with Images

This scatter plot displays website analytics for seven games across different weeks, plotting unique pageviews against week numbers as small green circles. The visualization loads data from a local `games.csv` file using `d3.csv`, then builds the chart with `scaleLinear` for both axes and renders points via `enter().append("circle")`. Axis ticks are generated with `axisLeft` and `axisBottom`. The chart uses SVG rendering within an HTML page that imports D3 v7 from a CDN, with minimal visual styling applied through the config file.

Iindira-antgrvty
69% match
Loading thumbnail…

D3 Line Chart

This line chart displays annual video game sales in North America from 2001 to 2014, with sales values in millions plotted across a time-based x-axis and a linear y-axis capped at 6.5. The visualization uses D3.js v7 to load CSV data via `d3.csv`, parse years with `d3.timeParse`, and render axes with `d3.axisBottom` and `d3.axisLeft`. A single hot-pink path is drawn using `d3.line` within an SVG canvas, accompanied by a title and axis labels.

Mmariahdiaz
69% match
Loading thumbnail…

Iterating Line Graph: vgsales.csv

This interactive multi-line chart uses D3.js (v6) to display video game sales data from a GitHub-hosted CSV across five regions, with each graph showing sales for twelve genres over time. A color-coded legend maps genres to lines, where hovering highlights a genre by thickening its strokes and clicking toggles its visibility. The visualization aggregates the data once before rendering, and includes crosshair functionality for comparing values across the regional charts.

DDaniel Ribaudo
69% match