Transition in bar chart : Easy interaction using CSS property transition

100%

Transition in bar chart : Easy interaction using CSS property transition

✓ Published0🌍 Public

Last edited Mar 12, 2021

Created on Mar 12, 2021

This visualization displays the top 10 most populous countries based on 2018 United Nations estimates, using horizontal bars rendered as SVG rectangles. It builds on a basic bar chart by adding a CSS transition property that smoothly changes bar fill color from steelblue to red on hover, demonstrating simple interaction without D3's transition system. The code uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom with custom tick formatting for the axes. The styling in styles.css handles the transition effect.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example showcases the top 10 most populous countries in 2018 based on United Nations data, using a bar chart built with D3.js. The visualization demonstrates custom axis styling and interactive elements, including animated transitions when data is updated. The code uses D3's `scaleBand` and `scaleLinear` for chart scaling, along with `d3.axisBottom` and `d3.axisLeft` for axes. It also features animated transitions via `.transition().duration()`, allowing bars to smoothly move or exit when the dataset changes. The SVG rendering includes interactive elements like mousemove and click events for dynamic user engagement.

Ttracy3057

86% match

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. Animated transitions in the two axes and bars react to user interaction. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and renders SVG elements. Hovering over a bar reveals its population value through a native SVG `<title>` tooltip.

Ddr-rompecabezas

84% match

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. Built with D3 v5, it demonstrates custom axes through `scaleLinear` and `scaleBand` for positioning. However, the working code renders a single animated rectangle that shifts horizontally every two seconds via `setInterval`, while the chart's data loading and population scaling are present in the CSV parsing. The SVG rendering and steelblue fill are styled through CSS.

Iinroadings

84% match

Loading thumbnail…

Making a Bar Chart

A bar chart displays the populations of the top 10 most populous countries from a 2018 United Nations estimate. Using d3.csv, the data is parsed, and d3.scaleLinear and d3.scaleBand map population values and country names to the SVG canvas. Axes are rendered with d3.axisLeft and d3.axisBottom. Animated transitions update bar heights when the cereal dataset is selected via a dropdown, demonstrating reusable chart components with d3 v5.

Vvasukipriyam

83% match

Loading thumbnail…

Untitled

This interactive bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization demonstrates D3 v3 axis customization, displaying population values on a logarithmic scale with formatted tick labels. The chart is built with Vue and rendered as an animated SVG, using D3 transitions to smoothly update the bars and axes when the data changes. The accompanying code shows how to style tick marks, axis labels, and titles using CSS.

DDmitriy

83% match

Loading thumbnail…

07 - let's make a bar chart - dataviz 2018

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to horizontal bar lengths and country names to vertical bands. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1,000 during preprocessing. The SVG rendering applies a steelblue fill to bars, with margins and axes configured to organize the categorical comparison clearly.

Zzach b.

83% match

Loading thumbnail…

Making a bar chart

This bar chart shows the populations of the top 10 most populous countries in 2018, based on United Nations estimates. The chart uses vertical bars with a linear scale for population and a band scale for country names. The code imports specific functions from d3 v5—including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to load the data and render the SVG elements. Bars are colored steelblue via CSS, and axes are positioned using margins and transforms.

NNadia W.

83% match

Loading thumbnail…

Bar chart

This animated bar chart displays the populations of the ten most populous countries, using horizontal bars colored on a linear scale from orange to brown. The visualization loads data from a CSV file and multiplies each population value by 1,000 for display. Built with D3 v5, it uses `scaleLinear` for the x-axis and population-based coloring, `scaleBand` for the y-axis categories, and `axisBottom` with tick formatting that abbreviates large numbers. Bars animate in over one second using `transition` with `easeLinear`, while SVG renders all elements.

CChris Mora

83% match