Skip to main content
SimilarExport ZIP
100%

Interactive bar chart based on categorical data

✓ Published0🌍 Public
AAAL FORHAD
Last edited Mar 12, 2022
Created on Mar 10, 2022
Forked from HTML Starter

This interactive bar chart displays GDP growth rates for ten U.S. states, ordered from highest to lowest. The chart uses D3.js v5 within a React framework to render SVG bars, axes, and labels. The value on the y-axis represents GDP growth percentage, while the x-axis lists state names. The visualization includes a hover interaction: mousing over a bar highlights it and draws a horizontal dashed line at that bar's value, while showing divergence percentages between the hovered state and all others. A CSS grid and source line complete the presentation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
82% match
Loading thumbnail…

Create a 3D Bar Chart with d3

This example visualizes the top 10 US states by GDP as an interactive 3D bar chart using d3-x3d and the x3dom WebGL library. The bars, colored with a gradient, represent state GDP values from a CSV dataset. The code uses the d3.x3d.chart.barChartMultiSeries() API to render the 3D scene, while d3.csv loads the data into a React component that slices the results to the top ten states. The visualization runs in a standard HTML page alongside a React starter alternative.

AAAL FORHAD
81% match
Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
81% match
Loading thumbnail…

Pie Chart (with labels) with d3

This interactive pie chart visualizes the top 10 US states by GDP, with labeled slices displayed within an SVG. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal to generate and color the wedges, while mouseover events trigger tooltips that display each state’s name and value. The d3.v4 library powers the hover interactions, which adjust slice opacity and show a text-based tooltip with a background rectangle. Data is loaded from an external CSV file, and the visualization is rendered within a React component.

AAAL FORHAD
81% match
Loading thumbnail…

GDP Bar Chart

This example presents a static bar chart of GDP data, with each bar’s height representing a country’s economic output. The visualization uses D3.js to bind data to SVG elements, scale the bars with `d3.scaleLinear`, and apply a color scale to differentiate values. The chart is rendered inside a minimal React component, with the view instantiated via a simple `div` container. Bars are drawn using SVG `rect` elements, and the code leverages D3’s selection and data-join pattern to create the visualization.

Aadventuresenglish.info@gmail.com
80% match
Loading thumbnail…

ICE-6

This visualization presents a horizontal bar chart of the top 10 US states by GDP, with the state flag displayed beside each bar. The React component uses hooks to load CSV data via d3.csv and scales it with d3.scaleBand and d3.scaleLinear, rendering SVG elements. State flags are fetched from an external GitHub repository and inserted as SVG images, while gridlines and axis ticks are generated from xScale.ticks.

AAAL FORHAD
79% match
Loading thumbnail…

Untitled

This example visualizes U.S. Gross Domestic Product data from 1947 to 2015 as a bar chart, with each bar representing a quarterly GDP value. The code fetches JSON data from a freeCodeCamp repository and uses D3 v7 scales, axes, and selection methods to render an SVG directly to the page. Bars are colored navy, with tooltips showing the date and value, while the x-axis displays dates and the y-axis shows GDP amounts. The visualization fills the entire browser window and dynamically scales based on viewport dimensions.

Aadventuresenglish.info@gmail.com
78% match
Loading thumbnail…

Fork of Pie Chart (with labels) with d3

This pie chart displays the top 10 US states by GDP, with each slice representing a state’s economic output. The visualization uses d3.arc to generate the pie geometry and d3.pie to compute the arc angles, while a hover tooltip with a bounding box reveals state names and values. It is built with React, loading data via d3.csv from a remote CSV file, and rendered as SVG. The legend and slice colors use d3.scaleOrdinal with d3.schemeCategory10.

SSweetierams
78% match