Skip to main content
SimilarExport ZIP
100%

Line Chart

✓ Published0🌍 Public
PPranay Matalia
Last edited Apr 2, 2022
Created on Mar 1, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

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

Expenditure over time plot

This line chart shows United States government expenditure as a percentage of GDP from 1800 to 2011, based on IMF data. The y-axis measures expenditure percentage, while the x-axis displays the year. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. The red line path has a thick, semi-transparent stroke, and gridlines extend across the plot area. Data is loaded from a CSV file hosted on VizHub.

MMukund Khandelwal
72% 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
72% 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
71% match
Loading thumbnail…

Line Chart

This line chart displays US healthcare spending per capita from 2000 to 2019, showing a steady upward trend over the two decades. The visualization uses D3.js v7 with an SVG rendering, employing `d3.scaleBand` for the categorical year axis and `d3.scaleLinear` for the spending values. The line is drawn using `d3.line()` and styled with a coral stroke. Data comes from Macrotrends, loaded via `d3.csv`, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

CChathurya
71% match