Skip to main content
SimilarExport ZIP
100%

White hat in D3

✓ Published0🌍 Public
KKwasi Acquaye
Last edited Apr 9, 2024
Created on Apr 9, 2024

This example presents a horizontal bar chart of 2015 global video game sales, with a single bar chart comparing CO2 emissions by country, highlighting China in red. The D3.js (v7) visualization encodes values as bar heights, with axes, data labels, and a title. It uses `d3.scaleBand` for the categorical x-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and applies hover styling via CSS. The sketch.js file, however, uses Processing to load a CSV and draw a similar chart for game sales, demonstrating a different rendering approach in the same gallery.

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

D3 Boxplot

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.

KKwasi Acquaye
82% match
Loading thumbnail…

Bar Chart Clean - To Be Used

This example displays a bar chart of global video game sales by genre, using a clean, minimal design. It is built with D3 version 6 and renders entirely as SVG, with interactive mouseover and mouseout transitions that change bar color from steel blue to orange. The chart reads from a CSV file and uses D3’s scaleBand and scaleLinear to map genres and sales values, while axisLeft and axisBottom generate the axes. The code also demonstrates a simple enter animation for the bars, though no initial transition is shown.

EElMITHOS
81% match
Loading thumbnail…

bar chart from bonus ice

An interactive bar chart displays global sales figures for ten video games and programming languages, with hover highlighting that reveals the percentage difference between the selected bar and all others. Built with React and D3 v5, the visualization uses SVG rendering and transitions to animate bar opacity and width changes on mouse events. D3 scales (`scaleBand`, `scaleLinear`) drive the axes, while grid lines and axis generators (`d3.axisLeft`, `d3.axisBottom`) structure the layout. A dashed horizontal line and divergence labels appear on hover, with data sourced from a hardcoded sample array containing names, sales values, and colors.

TTejamod
80% match
Loading thumbnail…

BarChart

This bar chart displays global video game sales by genre, using data from Kaggle. It shows total sales in units for categories like Action, Shooter, and Platform, with bars rendered as SVG rectangles. The chart implements axes, labels, and a mouseover interaction that changes bar color. It uses d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct the visualization, with animated color transitions on mouseout via D3 transitions.

RRED98310
80% match
Loading thumbnail…

BarChartPlatform

A bar chart displays video game sales across platforms for the top 500 titles, with a dropdown to switch between global, EU, JP, NA, and other regional sales figures. Using React with D3 v5, the visualization renders SVG rectangles whose heights encode sales values, with scales from `d3.scaleBand` and `d3.scaleLinear`. Axis components draw tick marks and labels, while D3’s `csv` loads the Kaggle dataset. Tooltips, formatted via `d3.format`, appear on hover.

RRED98310
79% match
Loading thumbnail…

Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of video game data, mapping each game’s maximum number of players to bar length and its release year to vertical position. The bars are rendered as SVG rectangles with a steelblue fill, using D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv`, then parsed and bound to the visualization. The chart’s margins and inner dimensions are calculated explicitly to position the plotting area.

SSimon Hackbert
79% match
Loading thumbnail…

barchart

This bar chart displays global sales for video game titles. The code uses D3 v7 to load CSV data, map data to x and y scales, and render SVG rectangles as bars. The chart includes axis labels, a title, a legend, and rotated x-axis tick labels. The data is loaded from a remote gist, and the visualization is structured with a large chart container and D3's margin, scaleBand, and scaleLinear functions.

Nnithinreddypinikesi@my.unt.edu
79% match