Budget Bar Chart

100%

Budget Bar Chart

✓ Published1🌍 Public

Last edited Apr 20, 2020

Created on Apr 17, 2020

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.

AI-generated description

A bar chart of sample budget data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Jim H. Budget Example

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.

JJames Barbour, Jr.

79% match

Loading thumbnail…

Final Project Bar Chart

This bar chart displays Data Science Salaries from 2020 to 2024, sourced from a CSV file in a GitHub repository. The visualization uses D3 v5 to render an SVG with a blue bar for each year's average salary. It includes an interactive tooltip that appears on mouseover, showing the specific year and salary value. The chart features rotated x-axis labels and styled axes, with the bars animated via D3's transition methods for the tooltip opacity.

Kkowshiksamudrala08@gmail.com

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

73% match

Loading thumbnail…

ICE-7_shanmukha_BarGraph

This bar chart displays the budget allocation percentages across different categories, with each segment colored and accompanied by a legend for identification. The visualization is built using D3.js v5, employing the pie and arc generators to create the pie chart, scaleOrdinal with schemeCategory10 for color mapping, and SVG elements for rendering. The legend includes truncated category names and percentage values, with mouseover interactions logging the category to the console. Data is loaded from a CSV file, and the chart is titled "Budget Allocation Chart."

Sshanmukhadatta4040@gmail.com

73% match

Loading thumbnail…

Fork of Making a Bar Chart

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.

Kkaline

73% match

Loading thumbnail…

Bar Chart - ICE 6

This bar chart visualizes movie budgets from a CSV data source, displaying each film’s budget as a horizontal bar sorted by movie title. The visualization uses D3 v6 to create the SVG-based chart, with bar lengths encoded by budget values and movie titles on the y-axis. The code employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while axes are rendered using `axisLeft` and `axisBottom`. A gradient fill (green to orange) colors the bars, and the chart includes labeled axes and a title, "MOVIES WITH THEIR BUDGET (IN MILLIONS)." The x-axis uses tick formatting (e.g., "45M") to simplify large numbers.

Ggaddamthanmayeereddy759@gmail.com

72% match

Loading thumbnail…

Fork of Bar Chart - ICE 6

This bar chart displays movie budgets in millions, sourced from a CSV file, using a green-to-orange gradient. It shows what the visualization depicts before explaining the implementation: horizontal bars represent each film’s budget, sorted by the data order, with axes labeled "Movies" and "Budget." The code uses D3 v6 APIs like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with formatting via `format('.2s')` to abbreviate dollar amounts. A linear gradient defined in the SVG defs fills the bars, while text styling and titles are applied through CSS classes.

Ppavan vasamsetti

72% match

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes monthly household expenses across categories like gas, electricity, and education, using data from a 2018 United Nations population report. It compares spending against NIBUD advisory thresholds, with a vertical line marking the recommended limit. Built with D3 v5, the chart uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG. Custom background rectangles highlight the advisory zone, while colors distinguish expense types. The x-axis is formatted with percentage ticks, and data loads from a CSV via `d3.csv`.

MManoukK

72% match