Skip to main content
SimilarExport ZIP
100%

Despeses Pressupost 2021

✓ Published0🌍 Public
DDavid
Last edited Apr 9, 2021
Created on Apr 8, 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.

AI-generated description

A program that loads in some data about CSS named colors using d3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays California government expenditures from 2012 to 2019, with the y-axis labeled in tens of millions of dollars. The visualization uses D3 v7’s `d3.scaleBand()` and `d3.scaleLinear()` to encode the categorical years and continuous expenditure values. The React framework renders the bars as SVG rectangles with a `steelblue` fill, while `d3.csv()` reads the data from a CSV file. Axis labels are added using `d3.axisBottom()` and `d3.axisLeft()`, with a title placed above the plot area.

PPranay Matalia
76% match
Loading thumbnail…

Untitled

This example shows personal spending over time as a bar chart titled “My Spendings Over The Years,” with each bar colored by a quantized scale from light to dark blue to indicate dollar amounts. The visualization uses D3 v7 to load CSV data, create a band scale for years and a linear scale for dollar values, and render SVG rectangles for bars. An axis with dollar-formatted tick labels, a year label, and a d3-legend color legend are added, with the y-axis domain hard-coded to 2125 for consistent scaling.

Rrykay
74% 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
73% match
Loading thumbnail…

spending_graph

This visualization shows French Government Spending by Department, using a bar chart to compare spending allocations across Education, Military, Health, Transportation, and Others. The bars are rendered in SVG using D3 v6, with `d3.scaleBand` and `d3.scaleLinear` mapping categorical and numerical values, while `d3.axisBottom` and `d3.axisLeft` display the axes. Hovering over a bar changes its fill color from steelblue to orange. The chart includes rotated department labels and explicit axis titles, with data provided as static in-code arrays.

Ttimothy.bell@cgi.com
73% match
Loading thumbnail…

Axes for React and D3

This example displays a horizontal bar chart of the top ten countries by population in 2020, using data loaded from a CSV file. The visualization is built with React and D3 v5, rendered as an SVG. The code uses D3 utilities like `csv` for data loading, `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to compute the domain. Axis ticks and grid lines are generated from the scales, with bars drawn as SVG rectangles.

SSarah Elkeurti
72% match
Loading thumbnail…

React and D3 - Barchart with margins and axes

This example demonstrates a horizontal bar chart that visualizes the top 10 countries by population in 2020, using data loaded via d3.csv from a GitHub gist. The chart displays bars with quantitative x-axis tick lines and categorical y-axis country labels, all rendered as SVG elements within a React component. It combines React’s useState and useEffect hooks for asynchronous data loading with d3.scaleBand, d3.scaleLinear, and d3.max to compute the scales. The visualization applies explicit margins to position the plotting area, and renders axes and bars as SVG lines, texts, and rects.

SShane Carey
72% match
Loading thumbnail…

Axis react and D3 The margin convention ActualBarchar d# react

This example shows a horizontal bar chart ranking the top 10 countries by 2020 population, rendered as an SVG using React components and D3 scales. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with custom `AxisBottom` and `AxisLeft` components that generate ticks and labels. Data is loaded asynchronously via `d3.csv` from a gist, sorted in descending order, then sliced to the top 10. Bars are drawn as `rect` elements in the `Marks` component using the computed scales.

JJonas Carvalho
72% match
Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG inside a React component. The visualization uses React state and hooks to load CSV data from a GitHub gist, then applies D3’s `scaleBand` and `scaleLinear` to position bars and generate axis ticks. Manually drawn grid lines and tick labels for both axes are created by mapping over `xScale.ticks()` and the y-scale’s domain, with a fixed margin convention shaping the inner chart area.

MMaciek Sitkowski
71% match