Skip to main content
SimilarExport ZIP
100%

A2 - Bar Chart

✓ Published0🌍 Public
RRavneet Singh Bhatia
Last edited Feb 6, 2024
Created on Feb 4, 2024

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.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

  • There is no index.html - that's what triggers the V3 Runtime
  • The entry point is the main function exported from index.js
  • The main function takes an argument container, a DIV

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes the top ten U.S. states by petroleum expenditure in transportation for 2019, with each blue dot positioned along a scaled x-axis that maps dollar amounts. The chart presents state rankings vertically, using labels and hover interactions that reveal exact values and draw a guide line to the axis. Built with p5.js, the sketch loads CSV energy data from a GitHub gist, processes it into a sorted dataset, and renders custom axes and dot annotations via the Canvas API.

RRavneet Singh Bhatia
82% match
Loading thumbnail…

A2 Heat Map

This heat map visualizes residential wood consumption across seven U.S. states over ten years (2010–2019), using orange squares whose opacity scales with the data value. Built with p5.js, it loads CSV data from a GitHub URL, draws axes and labels, and relies on the canvas API (`createCanvas`, `square`, `fill`) for rendering. Hovering over a square displays the specific value and a wood emoji via p5’s `mouseX`/`mouseY` checks and `text` function.

RRavneet Singh Bhatia
73% match
Loading thumbnail…

P5 Heatmap

This interactive visualization displays natural gas consumption across selected U.S. states from 2005 to 2011 using a heatmap grid. The color intensity of each rectangle reflects the consumption value, with blue indicating lower consumption and pink indicating higher consumption. The P5.js sketch loads data from a CSV file containing state, year, and consumption columns, then renders the grid on a 600x500 canvas. The code normalizes consumption values by dividing by 950,000 and maps them to the fill color's red channel. State labels appear along the left axis, with years displayed across the top.

Mmariahdiaz
72% match
Loading thumbnail…

D3 Bar Chart

This example visualizes natural gas consumption by the electric power sector across eleven U.S. states, using a horizontal bar chart where each bar’s length encodes the consumption value in billion BTU. The chart is built with D3.js (v7) and rendered as SVG, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Each bar is labeled with its exact value, and the plot includes a title and axis labels. The data comes from the included `data.csv` file.

Mmariahdiaz
71% match
Loading thumbnail…

D3 Sequential Color Bar Chart

This bar chart displays natural gas consumption by the electric power sector across eleven U.S. states, with each bar’s length encoding the consumption value in billion BTU. A sequential color scale using `d3.scaleSequential` and `d3.interpolatePuRd` maps higher consumption to darker hues, with a `d3.legendColor` legend clarifying the gradient. The chart is rendered as SVG using D3 v7, with axes created via `d3.axisBottom` and `d3.axisLeft`, and data loaded from a CSV file.

Mmariahdiaz
71% 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
70% match
Loading thumbnail…

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
Loading thumbnail…

D3 Diverging Color Bar Chart

This interactive D3 bar chart visualizes the percentage change in natural gas consumption by the electric power sector across eleven U.S. states, with bars diverging from a central zero axis. Each bar’s fill color reflects the magnitude and direction of change using a sequential color scale based on the `interpolateRdBu` interpolator. The chart employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for both the horizontal value scale and bar lengths, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for axis ticks. A `d3.legendColor` legend with nine cells maps the color scale to the numeric range. Data is loaded from a CSV file via `d3.csv`.

Mmariahdiaz
69% match