Skip to main content
SimilarExport ZIP
100%

Line Charts

✓ Published0🌍 Public
Oolin8
Last edited Oct 7, 2021
Created on Oct 7, 2021
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

Fork of Hello VizHub

This visualization displays the number of ratings for four board games—Catan, Dominion, Codenames, and Terraforming Mars—over the years 2016 to 2020. It uses D3 v5 with an SVG rendering approach, reading data from a CSV file via `d3.dsv`. The code employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `d3.curveMonotoneX` to draw the four multi-series lines, and appends a legend with colored rectangles. Data is parsed using `d3.timeParse` for the year values.

Oolin8
80% match
Loading thumbnail…

Number of Ratings 2016-2020

This visualization displays the number of board game ratings from 2016 to 2020, using circles to represent individual data points over time. The chart places each rating count as a circle within an SVG canvas, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. The code loads data from a CSV file using d3.csv, formats dates with d3.timeFormat, and arranges the visualization with margins and a translated group element. The rendering relies on React and d3.v5, producing a bordered SVG output.

Oolin8
79% 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
78% match
Loading thumbnail…

Bar Chart

This bar chart displays game ratings for a collection of board games, sorted from highest to lowest rating. The chart uses an SVG rendering with D3 v6, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file via `csv()`, parsed, and sorted before rendering. The `wrap` function handles long game titles, while styled rectangles represent each rating value.

JJames DePaola
77% match
Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans
77% match
Loading thumbnail…

D3-Learning

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.

Jjimdb8687
77% match