Jim H. Budget Example

100%

Jim H. Budget Example

✓ Published0🌍 Public

Last edited Apr 22, 2020

Created on Apr 20, 2020

This example presents a grouped bar chart of fiscal year 2020 budget data, comparing budget, committed, obligated, and expensed amounts across different organizational units. Data from the Sample_Budget_Data.csv file is aggregated by organization using D3 v3. The visualization uses an ordinal scale for categories and a linear scale for values, rendering SVG rectangles with group colors. Tooltips provide additional detail on hover, and the y-axis fades in via a transition.

AI-generated description

A bar chart of sample budget data from Jim's example.

MIT Licensed

Similar vizzes

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.

79% 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

71% 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

70% match

Loading thumbnail…

Final bar chart with animation

A single rounded bar chart compares total monthly expense against budget, encoding the ratio as bar width. The bar animates from zero width to its final proportional length using a D3 v4 `transition`, with its fill color shifting from teal to orange to red as the ratio exceeds thresholds. Text labels display the fixed expense amount, while an SVG input element permits budget adjustment. The visualization renders with D3 selections, a linear scale for width mapping, and SVG rectangle and text elements.

DDDDDDanica

69% 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

68% 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

67% match

Loading thumbnail…

US Federal Budget

This visualization uses a force-directed bubble chart to depict the 2017 US Federal Budget, with each circle sized by budget amount and colored by BEA Category. Two checkboxes let users group the bubbles by BEA Category or by Grant, shifting the force layout's x-positioning to align circles with their respective categories. Built with D3 v4 and rendered in SVG, the chart encodes budget magnitude through circle area using a power scale, and hovering reveals exact dollar amounts via tooltips. The interactive layout allows users to explore how spending is distributed across agencies and categories.

3300ani

67% match

Loading thumbnail…

Untitled

A bar chart displays the yearly stock price of XYZ Foods, with dollar values on the y-axis and years on the x-axis. The visualization uses d3.csv to load external data and d3.scaleBand with d3.scaleLinear to map the values. SVG rectangles styled with a “bar” class render the bars, while d3.axisBottom and d3.axisLeft generate the labeled axes.

Jjshujaa2

67% match