spending_graph

100%

spending_graph

✓ Published0🌍 Public

Last edited May 27, 2024

Created on May 27, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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…

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

73% 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…

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

72% match

Loading thumbnail…

US Federal Budget

This interactive visualization uses a force-directed bubble chart to display the 2017 US federal budget, with each circle sized by spending amount and colored by BEA category. Users can toggle grouping by BEA category or grant type, which rearranges the bubbles along the x- and y-axes, respectively, using d3-force simulations. The chart is built with D3 v4 and SVG, and includes tooltips showing agency names and budget values. Data is loaded from a CSV and preprocessed to filter out zero-budget entries and aggregate by agency, BEA category, and grant/non-grant split.

3300ani

72% match

Loading thumbnail…

Multiple Line Chart

This multi-line chart displays military spending trends from 2001 to 2020 across eight countries, with the y-axis showing spending amounts and the x-axis representing years. The visualization uses D3 v5 to render an SVG, applying `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `nest` to group data by country. The chart includes axis labels, a title, and a single maroon line path, though the nested data structure is logged but not separately rendered as distinct lines.

KKinjal-Goyani

72% match

Loading thumbnail…

Sequential Bar Chart

This sequential bar chart visualizes California government expenditure from 2012 to 2019, with each bar colored along a green sequential scale to indicate relative spending levels. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleSequential with an interpolateGreens interpolator for the color encoding. The SVG is rendered in React, with data loaded from a CSV via d3.csv, and a d3-legend color legend shows the expenditure scale.

PPranay Matalia

72% match

Loading thumbnail…

US Federal Budget

This visualization uses a force-directed bubble chart to display the 2017 US Federal Budget, with each circle representing a government agency. Circle area encodes the agency’s budget amount, and color encodes its BEA (Bureau of Economic Analysis) category. Users can check boxes to group agencies by BEA Category or by Grant/Non-grant split, triggering the circles to rearrange via d3-force. The chart is built with D3 v4 and SVG, using a power scale for area, an ordinal color scale, and a force simulation with collide and x-position forces. Hovering over a circle reveals a tooltip with the agency name and budget in millions of dollars.</noah>

3300ani

72% match