Skip to main content
SimilarExport ZIP
100%

Bar Chart

✓ Published0🌍 Public
PPranay Matalia
Last edited Feb 25, 2022
Created on Feb 22, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart displays California government expenditure from 1992 to 2019, with the year on the x-axis and expenditure in units of approximately $10 million on the y-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist and renders an orange line via the `d3.line()` generator within an SVG. Axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`, with linear scales (`d3.scaleLinear()`) mapping data to pixel coordinates. The chart includes a title and axis labels, all positioned manually within the SVG canvas.

PPranay Matalia
90% 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
89% match
Loading thumbnail…

Bar Chart

This bar chart visualizes total state expenditures in the U.S. from 1992–2019, drawn using the p5.js library. The visualization sums spending per state from a CSV file loaded via `loadTable`, scaling bar heights to values in hundreds of millions of dollars. It highlights California as the highest spender and Wyoming as the lowest, with labeled axes, gridlines, and annotations. The rendering uses p5.js canvas functions such as `rect`, `line`, and `text` to construct the chart.

PPranay Matalia
84% match
Loading thumbnail…

Box Plot

This interactive p5.js visualization displays a box plot of California state expenditures from 1992 to 2019, with values loaded from a remote CSV file and normalized to units of $10 million. The sketch uses p5.js functions like `loadTable()`, `sort()`, and canvas drawing primitives (`line()`, `point()`, `text()`) to render the median, quartiles, and whiskers on a static 740x520 canvas, with axes and tick labels marking expenditure values.

PPranay Matalia
77% 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
76% match
Loading thumbnail…

Create Bar Chart

This example shows a bar chart of yearly values from 2011 to 2016, with dollar-formatted y-axis labels. It loads data from a CSV file using d3.csv, then maps the data to a responsive SVG canvas. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes. The visualization positions the plot area with a margin offset and applies a 0.4 padding to the bars for spacing.

Jjajinkya
74% 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
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
72% match