Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published0🌍 Public

Last edited Mar 12, 2022

Created on Mar 12, 2022

This bar chart visualizes the lifetime gross earnings of ten popular movies, using D3.js within a React framework. The SVG-based visualization animates bars on hover, highlighting the selected movie and displaying the percentage divergence from others. The chart employs D3’s scaleBand, scaleLinear, axis functions, and transition effects for interactive feedback, with data hardcoded in JavaScript and styled via CSS.

AI-generated description

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

Similar vizzes

Loading thumbnail…

3d Bar Chart

This example visualizes the lifetime gross earnings of the top 50 movies using a 3D bar chart, with each bar’s height representing earnings and its position on the x-axis corresponding to movie title. The bars are rendered as SVG polygons with front, top, and side faces, drawn in a perspective projection based on a configurable camera position. The implementation uses D3.js for scales, axes, and data binding, with custom functions like `perspective` and `bar3d` handling the 3D-to-2D projection and face generation. Bars are sorted by distance from the chart’s center to control overlap, and hover interactions change the fill color.

Ssumitradevipolina

85% match

Loading thumbnail…

Scientific Data Visualisation Assignment Rendering Marks and Channels with React & D3

This bar chart displays the gross earnings of twelve movies, with movie titles on the y-axis and their corresponding dollar values on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and generates axis ticks. The data is fetched from a remote CSV URL, and the chart draws blue rectangles for each movie's gross value.

SSravyaAnnadi

83% match

Loading thumbnail…

Marks and Channels

This example displays the top 5 movies by lifetime gross earnings as a horizontal bar chart, with each bar’s length encoding the numerical value. Built with React and D3 v5, it uses `d3.csv` to load the data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The SVG rectangles are rendered directly via React, with axes drawn using custom ticks and gridlines.

Ssumitradevipolina

80% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3_Ramakanth

This visualization displays the top 10 highest-grossing movies in USD as a horizontal bar chart, with movie titles on the y-axis and weekend gross earnings on the x-axis. The React app fetches CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` to map film names and gross values, and renders SVG rectangles for bars with tick lines and labels. It relies on React's `useState` and `useEffect` hooks to load and sort the data, while D3 v5 handles the scales and chart layout.

Vvegurusaiprathyusha

79% match

Loading thumbnail…

D3 Starter Updating bar chart + Interaction

This example demonstrates an interactive bar chart that visualizes movie metrics—revenue, budget, or popularity—for titles released between 2000 and 2009. Users click buttons to switch metrics, triggering animated updates to bar lengths and axes through D3’s general update pattern with transition delays. Hovering over a bar displays a tooltip with details like profit, ratings, and genre. The code uses d3.scaleBand, d3.scaleLinear, d3.axisTop, d3.axisLeft, and d3.transition, with SVG rendering and data parsed from a CSV file.

Mmaxthamt

78% match

Loading thumbnail…

D3 Starter Updating bar chart

A D3 bar chart displays the top 15 movies from 2000-2009, with bars showing revenue, budget, or popularity; interactive buttons trigger an animated update that re-sorts and re-scales the data. The chart uses D3's modular API, including `scaleLinear`, `scaleBand`, `axisTop`, `axisLeft`, and the `transition` helper for smooth animations. SVG elements render the bars and axes, with a header updating to reflect the selected metric.

Mmaxthamt

78% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays movie budgets against their titles, with a color gradient from IndianRed to red encoding budget magnitude and IMDB scores revealed on hover. Built with d3.scaleLinear for the x-axis and color mapping, and d3.scaleBand for the categorical y-axis. The visualization includes an interactive circle that toggles bar widths using CSS-like transitions via the transitionWidth helper. Data comes from a local CSV file containing movie titles, budgets, and IMDB scores, rendered as SVG with d3.axisLeft and d3.axisBottom for axes.

Vvasukipriyam

78% match

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart compares movie budgets against titles, with a color gradient from IndianRed to red indicating budget magnitude. Hovering over a bar displays the movie title, budget, and IMDb score in a separate HTML div using mouseover events. The visualization animates bar widths when clicking a circular button, toggling between full and zero widths with d3 transitions. It uses d3.csv to load data, d3.scaleLinear for both x-axis and color encoding, d3.scaleBand for categorical y-axis placement, and d3.axisLeft/axisBottom for axis rendering.

Vvasukipriyam

78% match