Skip to main content
SimilarExport ZIP
100%

Chicago Energy Usage - Histogram

✓ Published0🌍 Public
PPeter Gish
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from HTML Starter

This example visualizes average energy consumption per Chicago census tract using a histogram with equal-width population bins. The p5.js sketch loads energy-usage data from a CSV file through the `loadTable` API, binning records by total population and computing the average kilowatt-hours per bin. Rendered on a 900×700 canvas, the chart displays bars colored in blue, a dot overlay at each bin’s average, and axes with configurable tick counts. The custom `linspace` function generates bin ranges, while CSS and HTML handle the page layout.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Chicago Energy Usage - Histogram

This histogram visualizes the distribution of average building ages for Chicago energy usage data from 2010. The p5.js sketch loads a CSV dataset and renders a box plot overlay, displaying summary statistics like quartiles, median, mean, and outliers alongside the histogram. It uses custom statistical calculations for percentiles and thresholds, with a mapping function to convert data values to canvas coordinates. The visualization highlights the spread and central tendency of building ages through both the histogram bins and the superimposed box plot elements.

PPeter Gish
90% match
Loading thumbnail…

P5 Histogram

This example displays a histogram of kerosene consumption in billion BTU, with data binned into eight ranges from 0-100 to 701-800. The visualization uses p5.js functions like `createCanvas`, `loadTable`, `rect`, and `line` to render the bars and grid. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title. The code manually assigns each row to a bin and scales bar heights by a factor of 20, rather than using a dedicated charting library.

Mmariahdiaz
71% match
Loading thumbnail…

histogram

This histogram visualizes the distribution of power data values from a CSV file, grouping the data into eight bins spanning 0 to 800. The code uses p5.js to load the external dataset in a `preload()` function, then draws vertical grid lines and cyan bars, with each bar’s height scaled proportionally to the count of values in its bin. Axis labels and bin ranges are rendered directly on the canvas, and the visualization’s fixed dimensions and styling are defined through p5.js canvas drawing commands.

Hhollyjpotter
68% match
Loading thumbnail…

p5.js.histogram

This visualization shows a histogram of city MPG values for a sample of cars, displaying the count of vehicles across eight MPG bins. The p5.js sketch loads pre-aggregated data from a CSV file hosted on GitHub, then renders bars on an 800x800 canvas using the `rect()` API. The chart includes labeled axes, gridlines at 200-count intervals, and a title, with data sourced from the CORGIS cars dataset. The bars are drawn in blue against a light gray background, with the y-axis representing counts and the x-axis displaying MPG values.

EEunice Tu
67% match
Loading thumbnail…

Thermostats in Chicago Communities (2010)

This scatterplot shows the relationship between census block population and the total number of installed thermostats across Chicago communities in 2010. Each circle represents a community area, plotted with population on the x-axis and thermostat count on the y-axis. The visualization uses D3 v4 to load data from a CSV file, create scales and axes with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`, and render SVG circles. The data comes from an energy-usage dataset hosted on GitHub.

PPeter Gish
67% 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
67% match
Loading thumbnail…

Asian American Quality of Life

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family home. The visualization uses D3.js with d3.stack to aggregate kilowatt-hour usage by month, with green and blue bars representing different meter accounts. The code employs scaleBand and scaleLinear for axes, scaleOrdinal with d3-scale-chromatic for colors, and includes interactive hover effects with tooltips showing kilowatt amounts. Axis labels rotate vertically to accommodate the title, and the chart clearly separates stacked segments by account number.

PPooja Srinivasan
66% match
Loading thumbnail…

Thermostats in Chicago Communities (2010)

This horizontal bar chart displays the top 10 Chicago communities with the highest average number of installed thermostats in 2010, using data from the city’s energy usage CSV. The visualization uses D3 v4 to load and aggregate the data, compute mean therm values per community, sort and select the top entries, and render SVG rectangles scaled by a linear x-axis and a banded y-axis. Axis labels, tick formatting, and a title are styled via CSS, with grid lines drawn through tick size configurations.

PPeter Gish
66% match