Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published2🌍 Public
Wwangjonathan
Last edited Nov 8, 2018
Created on Aug 31, 2018

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.

AI-generated description

This bar chart shows population of the top 10 most valuable companies in the world.

The data comes from the year 2018 estimate in The 10 Most Valuable Brands in 2018.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most valuable companies, with market values in billions and a green axis label and title. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes. The chart is drawn as SVG rectangles, with the y-axis line and ticks removed, and the x-axis tick format converts values from gigabytes to billions. A React starter is also referenced in the README, though the main implementation relies on plain D3 v5.

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

Data Visualization - ICE-6 - Bar chart

This bar chart displays the revenue of the world’s top 10 biggest companies in billion dollars, sourced from a CSV file. It highlights how custom D3 axes can be styled with red gridlines, blue tick labels, and adjusted tick font sizes. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and rendering rect elements in SVG. Axes are manually constructed by mapping tick values, avoiding the default axis generators.

Ssuchitra2602
78% match
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
77% 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
77% 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
77% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 total merchandise exports worldwide for 2017, with countries ranked along the vertical axis and export values in dollars along the horizontal axis. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file using `csv` and rendered as SVG rectangles. Values are converted from billions by multiplying by 1000 during preprocessing.

Vveagy
77% match