Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ccmrhoang2
Last edited Nov 11, 2021
Created on Nov 8, 2020
Forked from HTML Starter

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.

AI-generated description

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

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

Bar Chart Race

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.

Aanjalipandith-star
88% 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
86% 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
79% 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
78% match
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices per year, reading from a CSV file and rendered as SVG. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axes labeled "Year" and "Stock Price." On mouseover, bars highlight in orange via d3.select and animate with a transition, expanding width and shifting position while a dollar-value label appears; mouseout reverses these changes and removes the label. d3.v4 handles the animations and event-driven interactions.

AAbdouEnsaj
77% match
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices over multiple years, with steel-blue bars representing annual values. The visualization includes labeled axes: a rotated "Stock Price" y-axis formatted with dollar signs and a "Year" x-axis. Built with React and D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements, loading data from an external CSV file via `d3.csv`.

Jjshujaa2
76% match
Loading thumbnail…

Rendering Marks

This example displays a horizontal bar chart of the top 20 companies by brand value, using a dataset loaded from a CSV file via `d3.csv`. The visualization renders SVG marks with React, mapping each company to a `rect` whose width is scaled by its brand value using `d3.scaleLinear` and whose vertical position is determined by `d3.scaleBand`. Axes are composed manually from tick marks and labels generated by the scales, with gridlines drawn as blue SVG lines.

Nnagarjuna1968
75% match