Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
RRyan Rong
Last edited Feb 28, 2021
Created on Feb 28, 2021

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`.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

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

Fork of Line Chart

This fork of a D3 line chart displays card values by suit, plotting each suit’s value as a single connected line. The visualization uses d3.csv to load data from a remote gist, d3.scalePoint for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.line to generate the SVG path. Axes are rendered with d3.axisLeft and d3.axisBottom, featuring gridlines and labeled axis titles, with styling applied via external CSS. The chart includes a title and uses a minimal, clean design.

MM
76% 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
75% match
Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays card values grouped by suit across different face values, with separate colored paths for spades, clubs, diamonds, and hearts. It loads a CSV file using `d3.csv`, groups the data by suit with `d3.group`, and maps the values onto a point scale for the x-axis and a linear scale for the y-axis. The lines are drawn using `d3.line` and appended as SVG path elements, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

MM
75% match
Loading thumbnail…

Fork of Line Chart

This example displays a time-series line chart of review counts from 1976 to 2025. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.csv` to load data and `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to construct the plot. The chart features labeled axes, a title, and gridlines, with the review count plotted against the year.

SSANEEM MOHAMMAD
74% match
Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Vvidhyanamini
74% match