EDAV7_1_axes

100%

✓ Published0🌍 Public

Last edited Apr 11, 2021

Created on Apr 10, 2021

This interactive bar chart displays Hermès revenue by geographical area from 2010 to 2020, with radio buttons allowing users to switch between years. The visualization uses D3 v6's `scaleBand` and `scaleLinear` to construct the axes and bars, while a second SVG shows the corresponding revenue values with a total. Data is embedded directly in the code, rendered with SVG and animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

EDAV7_1_axes

This example animates a bar chart of crime data against Indian women, showing values for female and male respondents with yes/no categories across multiple years. The bars transition through six sequential datasets, each with a two-second duration and two-second delay, alternating between cornflower blue and forest green. Built with D3 v7, the visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition` with duration and delay parameters to update bar heights. The data comes from a CSV file referenced in the README, and the SVG rendering includes a light blue background and axis labels.

HHelen-Luwei-Zhang

74% match

Loading thumbnail…

Untitled

A bar chart displays monthly revenue from a JSON dataset, with each bar representing one month from January to July. The visualization uses D3 v6 to draw SVG rectangles scaled by a linear y-axis and a band x-axis, with axis labels for "Month" and "Revenue." The code loads data via `d3.json`, formats revenue values as numbers, and renders the chart using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs.

EEmanuel Alvarado Perez

71% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of proposal counts for primary departments, with interactive year buttons (2013–2021) that let users switch between datasets. The chart uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. A click on a year button updates the chart data and highlights the selected button, while bars are rendered as SVG rectangles. The x-axis formats tick labels with `.0s` and replaces "G" with "B", and hover states adjust bar opacity. The data is embedded as CSV strings within the code.

Ttracy3057

70% match

Loading thumbnail…

Revenue Bar Chart w/ transition

A dropdown menu lets viewers toggle between revenue and profit for seven months of data, updating a bar chart with smooth transitions. The chart uses D3 v7’s `scaleBand` and `scaleLinear` axes, with bars rendered as SVG `rect` elements. Changing the selection triggers a `transition` that animates bar heights and positions, while the exit state briefly turns bars red before removal.

AAdan Rodriguez

70% match

Loading thumbnail…

EDAV7_1_axes

Animated bar chart compares reported crimes against women in India across four categories—female/no, female/yes, male/no, male/yes—over multiple years. Six sequential stages animate bar heights and colors, using d3.axisBottom for the x-axis and d3.scaleBand and d3.scaleLinear to map categories and values. The transition API with specified durations and delays animates rect attribute changes, while the SVG background highlights the plot area. Data comes from a GitHub-hosted CSV file.

HHelen-Luwei-Zhang

70% match

Loading thumbnail…

Document

This interactive bar chart shows monthly values for a selected year, with a slider controlling the year from 2009 to 2014 and a smooth 2-second transition animating the bars to their new heights and colors. The visualization uses D3 v4 with a band scale for months, a linear scale for values, and a quantile color scale to encode magnitude. Data is loaded from six CSV files using d3.queue, and the chart updates by merging entering and existing SVG rect elements via `selection.merge` and applying axis transitions.

Hhamzavg

70% match

Loading thumbnail…

D3 with DS4E

A bar chart displays 2022 population by country from a CSV dataset, with bars animating in sequentially and reacting to hover. The visualization renders with SVG and uses D3 v7 scales (`d3.scaleBand`, `d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and transitions (`transition`). Hover events trigger a tooltip and temporarily enlarge the selected bar. The title incorrectly labels the chart "Stock Price," though it plots population values.

PPLD3508A

70% match

Loading thumbnail…

D3 Example

This example presents a horizontal bar chart comparing revenue figures across named categories, with an additional vertical reference line and a separate bar strip on the right side. Built with D3.js (version 3.5.5) and rendered as SVG, it uses two CSV data files—one containing revenue and prior-year values, the other containing revenue and other metrics. The chart employs ordinal and linear scales, along with D3’s axis and selection APIs, to map category names to bar heights and revenue values to bar widths, while the standalone line and rectangles are placed manually via SVG coordinates.

RRatnar

70% match