D3 Boxplot

100%

✓ Published1🌍 Public

Last edited Feb 19, 2024

Created on Feb 19, 2024

This example displays a bar chart of global sales figures for video games in 2016, with each game’s sales in millions of units shown on the y-axis and game names on the x-axis. It uses D3 v6 to build the visualization, loading data from a CSV file that is manually encoded into a JavaScript array. The SVG rendering uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate axis ticks, with circles placed via `append('circle')` and positioning computed from the scales.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Bar chart

This bar chart displays global sales figures for top-rated video games in 2016, with each game’s name on the x-axis and sales in millions on the y-axis. The D3.js code uses d3.csv to load the data, then maps it to a d3.scaleBand for the x-axis and a d3.scaleLinear for the y-axis. Rectangular SVG elements are colored steelblue, and d3.axisBottom and d3.axisLeft generate the labeled axes. A rotated text element labels the y-axis. The chart renders entirely as inline SVG within an HTML page.

KKwasi Acquaye

90% match

Loading thumbnail…

D3 Scatter plot

This scatter plot visualizes the global sales of top-rated video games from 2016, with each game represented as a circular point. The data, loaded from a local CSV file, maps game names along the x-axis and their sales figures in millions along the y-axis. The visualization is built with D3 v6, using functions like `d3.scaleBand` and `d3.scaleLinear` to manage the axes, while `d3.select`, `d3.append`, and `d3.axisBottom` handle the SVG element creation and axis rendering. Each dot is positioned using the computed scales, and steelblue fill distinguishes the data points.

KKwasi Acquaye

88% match

Loading thumbnail…

Fork of D3 Boxplot

This visualization displays the global sales distribution of top video games from 2015, highlighting the median, quartiles, and whiskers in a box plot. The chart uses d3.quantile to calculate statistical values and renders a vertical box with median line, whiskers, and min/max labels using SVG. The data is embedded directly as an array of sales figures, and d3.scaleLinear maps sales values to pixel positions. The code was adapted from a p5.js bar chart example, as shown in the included sketch.js file.

KKwasi Acquaye

85% match

Loading thumbnail…

a bar chart

This horizontal bar chart ranks video game titles by global sales in units, sourced from a Kaggle dataset. Built with D3 v6, it maps the numeric sales field to a linear x-scale and the game names to a categorical y-scale band. The SVG rendering uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to draw the axes, with orange rectangles encoding each game’s sales value.

RRED98310

84% match

Loading thumbnail…

D3 Scatter Plot: vgsales.csv

This scatter plot visualizes video game sales data from the vgsales.csv dataset, plotting each game’s release year on the x-axis against its global sales on the y-axis. Rendered as an SVG using D3 v6, the code applies `d3.scaleLinear` for both axes and draws semi-transparent circles with a radius of 4. The data is loaded via `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting modified to prevent commas in the year labels.

DDaniel Ribaudo

84% match

Loading thumbnail…

D3 Bubblechart

This visualization displays global sales figures for nine video game titles using a bubble chart, with each circle’s area encoding the sales value. The code loads data from a CSV file via `d3.csv`, converts the sales column to numbers, and uses `d3.scaleSqrt` to map sales values to circle radii. An SVG canvas is created with D3 v7, and a band scale (`d3.scaleBand`) positions the categories along the x-axis. The bubbles are drawn as `circle` elements with a fixed vertical position, and the axis is rotated for readability. The chart highlights comparisons such as Call of Duty’s dominance, with sales values up to 14 million units.

KKwasi Acquaye

83% match

Loading thumbnail…

BarChart

This bar chart shows the global sales of video games by genre, ranking categories like Action and Shooter by their total sales in millions. The visualization uses D3 v6 to load CSV data from a GitHub gist, and renders the chart as an SVG with animated transitions. It employs `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes generated by `axisBottom` and `axisLeft`. Bars are filled steelblue and change to orange on mouseover, using D3’s selection and transition APIs.

AAditya Khandelwal

83% match

Loading thumbnail…

Bar Chart

This bar chart visualizes global sales by video game genre, ranking categories like Action and Shooter from highest to lowest on a linear scale. Using D3 version 6, the code loads CSV data via `d3.csv` and draws SVG rectangles with `d3.selectAll`. The axes are created with `d3.axisBottom` and `d3.axisLeft` on band and linear scales. Rectangles change fill color from steelblue to orange on mouseover, then transition to red on mouseout with a 250ms duration.

Ppavan0828

83% match