Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Sep 1, 2023

Created on Aug 13, 2023

This bar chart displays Brazilian public budget expenditures, comparing committed (“Empenhados”) and paid (“Pagos”) values by year. Users can filter the data by fiscal category (“Resultado Primário”) and government function (“Função”) via dropdown menus. The visualization uses D3 v5 with `d3.csv` for data loading, `d3.nest()` for aggregation, and `scaleLinear` and `scaleBand` for axes. Bars are rendered as SVG rectangles, with tooltips on hover and axis labels customized using `axisBottom` and `axisLeft`. Data originates from the provided `orcamentoData.csv` file.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart shows total committed Brazilian government expenses per year, aggregated from the CSV data by year using d3.nest and d3.rollup. The visualization uses a linear scale for the x-axis, a band scale for categorical year labels, and SVG rectangles. Axes are generated with d3.axisBottom and d3.axisLeft, with tick labels formatted using d3.format to abbreviate large numbers.

Rrodrimoni

86% match

Loading thumbnail…

Untitled

This stacked bar chart displays categorical spending data from a CSV file, grouping values by year and showing the breakdown of components such as "Função" and "Subfunção" with amounts for "Empenhado" and "Pago". The visualization uses D3 v4’s `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to render a 460-by-400 pixel SVG, with axes, color-coded segments, and a filter button in the accompanying HTML page.

WWilliam Niemiec

76% match

Loading thumbnail…

Budget Bar Chart

This bar chart visualizes sample budget data for fiscal year 2020, displaying the budget amount for each project category (Development, Field Support, Liasion, and Operations) on a linear scale. The height of each bar represents the budget in thousands of dollars, while hovering over a bar reveals a tooltip showing the OE and Expensed values for that entry. The visualization uses D3 v5 to load the CSV data, parse the currency-formatted numeric values, and render bars via SVG rect elements with a band scale for the x-axis and a linear scale for the y-axis.

JJames Barbour, Jr.

73% match

Loading thumbnail…

Despeses Pressupost 2021

This example displays the top ten budget expenditures for the 2021 Catalan budget as a horizontal bar chart, using a quantitative axis for spending amounts and a categorical axis for budget items. The visualization loads CSV data from a GitHub gist and processes it with `d3.csv` and `d3.max` to set the linear scale. React manages the component state and rendering, while SVG elements are positioned using `d3.scaleBand` and `d3.scaleLinear`. The chart includes grid lines and tick labels generated from `xScale.ticks()`, with each bar’s height determined by the band scale’s bandwidth.

DDavid

70% match

Loading thumbnail…

Fork of dataset - simple bar chart

This fork of the dataset example displays a horizontal bar chart of the top 20 most-traded stocks on Brazil’s B3 exchange, ranked by trading volume. The visualization uses D3 v5 to load CSV data via `d3.csv` and render SVG bars, with `scaleLinear` and `scaleBand` handling the axes. It applies `axisLeft` and `axisBottom`, formats tick labels with `d3.format`, and removes grid lines for a clean look. The chart title notes “Top 20 maiores volumes,” and the bars are styled with a steelblue fill.

EElMITHOS

70% match

Loading thumbnail…

Fork of Let´s make a bar chart!

This fork of “Let’s make a bar chart!” displays a horizontal bar chart of country populations, with bars ordered alphabetically along the y-axis and population values on the x-axis. The visualization uses d3.csv to load the data, then builds scales with d3.scaleLinear and d3.scaleBand, rendering bars as SVG rectangles and adding axes via d3.axisLeft and d3.axisBottom. The chart applies a fixed margin layout and steelblue fill for the bars.

MMatiasmedrano66

69% match

Loading thumbnail…

Fork of dataset

This example renders a horizontal bar chart of trading volumes for Brazilian stocks (B3) using D3 v5. It loads data from a CSV file, parses the `qtde` column as numeric values, and maps `Codigo` labels along a band scale. The visualization uses `scaleLinear`, `scaleBand`, and `axisBottom` with `format('.3s')` to display abbreviated values, while bars are appended as SVG rectangles. A button in the HTML triggers a message element, though its interaction is minimal.

SSheshidharreddy

69% match

Loading thumbnail…

Fork of dataset

SSheshidharreddy

69% match