Bar Chart

100%

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

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.

AI-generated description

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

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

84% match

Loading thumbnail…

Dot Plot

This dot plot visualizes state expenditure data from 1992–2019, with each point representing a state’s total spending in hundreds of millions of dollars. The chart uses p5.js’s `loadTable` to fetch a CSV, `createCanvas` for rendering, and `point` with heavy `strokeWeight` to draw dots. Annotations highlight comparisons, such as New York’s spending being 1.5 times Texas’s, while the axes are manually constructed via `line` and `text`.

PPranay Matalia

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

81% match

Loading thumbnail…

Heat Map

This heat map visualizes the total expenditure of several U.S. states over time, using pink intensity to indicate higher spending amounts. It plots a grid where each cell's color corresponds to a specific state-year combination, with darker pink representing greater expenditure. The visualization is built using the p5.js library, which handles the canvas, drawing, and color fills. Data is loaded from a CSV file via the `loadTable` function, with state names and years rendered as text labels alongside the grid. The map reveals that most states show increasing expenses over recent years, while West Virginia's spending initially declined before rising again.

PPranay Matalia

79% match

Loading thumbnail…

Histogram

This histogram displays the number of states falling into various expenditure brackets (in hundred-million-dollar units). It visualizes aggregated finance data loaded from a CSV file. The code uses the p5.js library to render the chart, processing the data to sum expenditures per state, then binning these totals into fifteen predefined ranges. The p5.js canvas draws the bars, axis labels, and grid lines.

PPranay Matalia

78% match

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

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

77% match

Loading thumbnail…

HeatMap

This heatmap visualizes the expenditure of several U.S. states from 1992 to 2001, with each cell colored on a linear scale from light beige to dark red to indicate spending levels. The chart includes labeled axes for state and year, along with a legend showing approximate dollar amounts. Built with React and rendered as SVG, it uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft to generate the axes.

PPranay Matalia

76% match