Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Oct 3, 2021

Created on Oct 2, 2021

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.

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…

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

83% 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

82% match

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

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…

Chess Game Dataset Histogram Viz

Three interactive histograms visualize a chess game dataset, showing the distribution of average player ratings, the absolute rating difference between players, and the number of turns per game. Each plot uses `d3.histogram` with adjustable bin counts via HTML number inputs, and bars transition smoothly using `transition.attrTween` and `d3.axisLeft` for updated scales. Data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`. The visualizations render as SVG with a shared axes module for consistent labeling.

MMartha Cash

73% 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

73% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of CS416 Project_2

This visualization displays Amazon Top 50 bestselling books from 2009 to 2019, showing average user ratings and prices per year through grouped bar charts. Users select individual years via buttons to view summary statistics. The D3.js (v6) code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG rectangles, with color scales mapping rating and price values. Data is loaded asynchronously from CSV files via `d3.csv`, and two separate chart panels share the SVG canvas.

Mmz4987

73% match

Loading thumbnail…

Fork of Hello VizHub

This visualization displays the number of messages and shares over time as a grouped bar chart. The data, spanning from July 2020 to July 2021, is rendered as SVG with D3.js v5. It leverages `d3.scaleBand` for the axes and `d3.scaleOrdinal` for colors, with interactive tooltips on mouseover. The chart includes rotated x-axis labels and a legend, while the code imports `select` from D3 and uses local modules and a CDN-loaded D3 library.

Mmegshe

72% match