Skip to main content
SimilarExport ZIP
100%

Bar Chart Race

✓ Published1🌍 Public
Aanjalipandith-star
Last edited Sep 7, 2020
Created on Sep 7, 2020
Forked from HTML Starter

This animated bar chart race visualizes the changing values of top global brands from 2000 onward, ranking the top 10 by brand value in millions of dollars. The visualization uses D3 v5's data join and transition system with `d3.transition()` and `updateBars` to smoothly interpolate bar positions and heights between yearly keyframes. Each bar is color-coded by brand category (e.g., Technology, Automotive) using `d3.scaleOrdinal` with the Tableau10 scheme. The data comes from Interbrand's annual rankings, loaded via `d3.csv` and processed with `d3.rollup` and `d3.pairs` to create interpolated frames.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart Race

This bar chart race animates the changing rankings of the world's most valuable brands from 2000 onward, using data from Interbrand. The visualization presents a dynamic competition where bars representing top brands, such as Coca-Cola and Microsoft, shift positions over time. Built with React and D3 v6, it uses SVG and animation to smoothly interpolate the values and ranks between yearly data points, creating a fluid, time-lapse effect. The code relies on D3's `scaleLinear`, `scaleBand`, `transition`, and `easeLinear` to orchestrate the movement, while a custom linear interpolation between keyframes and sorting logic drive the visual ranking updates.

Ppangaotata
92% match
Loading thumbnail…

Customizing Axes

This bar chart race shows the changing brand values of the top global brands from 2000 to 2018, displayed as animated horizontal bars that reorder each year. The visualization uses d3’s data join and transition methods to smoothly update bar positions, widths, and labels as the data changes. It employs d3.scaleLinear and d3.axisTop for the value axis, while a d3.interval drives the yearly animation. The data comes from Interbrand, with each brand assigned a random color using d3.hsl.

Bbeentherebeenhere
88% match
Loading thumbnail…

Untitled

This animated bar chart race displays the shifting brand values of the world’s top global companies from 2000 onwards, using data from Interbrand. The visualization animates the changing rankings and values over time, with bars dynamically reordering to reflect each brand’s current position. Built with React and D3 v5, the chart uses SVG rendering and d3.interval for the animation loop, while d3.scaleLinear maps value data to bar lengths and d3.axisTop renders the x-axis gridlines.

Ccmrhoang2
88% match
Loading thumbnail…

Customizing Axes

A bar chart race animates the yearly brand values of the world’s most valuable companies, as listed in the data.csv file. The visualization uses D3 v5 with SVG and transitions to dynamically rescale the x-axis to fit the top-ranked value. It customizes axes by styling tick text and lines via CSS, and employs `d3.create`, `svg.transition`, and `d3.easeLinear` to orchestrate the sequential updates.

LLuciano McSilva
80% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the brand values of the world’s top 10 most valuable companies in 2018, using data from the Inc. article “The 10 Most Valuable Brands in 2018.” The visualization encodes value on the horizontal axis with a linear scale and company names on the vertical axis using an ordinal band scale. Built with D3 v5, it renders company names and values as SVG rectangles, axes, and labels via `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The chart populates from a local CSV file, with values multiplied by one million for display.

Wwangjonathan
79% match
Loading thumbnail…

carbrandsales

This horizontal bar chart displays the top ten car brands by 2016 sales, using React to render SVG elements and D3 scales for layout. The visualization loads CSV data via `d3.csv`, applies a linear scale for sales values, and a band scale for brand names. Orange rectangles represent each brand’s sales figures, with gridlines and tick labels generated from the x-axis scale. The chart focuses on comparing relative sales performance across brands in a single year.

Vvaddepallinaveen
77% match
Loading thumbnail…

Fork of iCE 6 PART 1

This horizontal bar chart shows the top ten brands ranked by their popularity score, with each bar’s length proportional to the score and a color gradient from light to dark teal indicating rank. The data, loaded from a CSV Gist via `d3.csv` and `d3.autoType`, is sorted descending and sliced to ten entries. Built with D3 v7, the visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisBottom`/`d3.axisLeft` for gridlines and labels. Alternating background bands and value labels are rendered as SVG elements.

Ssarasaketh3@gmail.com
76% match
Loading thumbnail…

BAR CHART

A dark-themed bar chart ranks smartphone brands by total units sold in millions. Summed via `d3.rollups` and sorted descending, each brand appears as a blue bar with value labels, using a band scale for categories and a linear scale for counts. The CSV is fetched from a GitHub Gist, parsed with `d3.csvParse` and `d3.autoType`, then rendered as SVG with gridlines and rotated axis labels generated through `d3.axisLeft` and `d3.axisBottom`.

Llohitsai.nikkil@gmail.com
76% match