A2 - Dot Plot — VizHub

A2 - Bar Chart

This bar chart visualizes petroleum consumption in residential areas across U.S. states in 2019, highlighting the top five and bottom five states by usage. The chart uses a logarithmic scale for bar widths, with color intensity (green to red) indicating whether consumption levels are considered good or bad. Interactive hover annotations display exact values. Built with p5.js, the visualization loads data from a remote CSV file and sorts it programmatically, drawing axes, bars, and labels through canvas rendering functions.

RRavneet Singh Bhatia

82% match

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`.

75% match

Vizhub for pie chart

This pie chart visualizes the top five U.S. states by fuel consumption percentage, with each slice labeled and color-coded, alongside a legend listing state names and values. The data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for colors. Text labels are positioned on slice centroids with `arcGenerator.centroid`, while the legend is built manually with SVG rectangles and text elements. The visualization updates dynamically as the CSV is fetched asynchronously.

NNHRK555

70% match

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.

70% match

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.

Dot Plot

This dot plot displays the relationship between average city miles per gallon and the count of vehicles with that fuel efficiency, using a circle for each data pair. The visualization uses D3 v4 to load and parse a CSV file (dot_chart.csv), then draws an SVG chart with a band scale for the x-axis and a linear scale for the y-axis. Hover interactions trigger tooltips that reveal the exact count value for each dot, with the chart styled using fill colors and strokes.

Ddriftcafe

Pie Chart

This pie chart displays the top 10 US states by GDP, with each slice sized proportionally to the state’s economic output. The visualization is built with React and D3 v4, using `d3.pie` and `d3.arc` to generate SVG paths. Hovering a slice highlights it and reveals a tooltip with the state name and value. A legend alongside the chart identifies each state, while the data is sourced from a CSV file containing state GDP figures.

Ssrivalliwuyyuru

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.