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

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

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
69% 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
69% 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
69% 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…

Assignment 3 - Histogram - P5.js

This visualization displays a boxplot of billionaire ages from the billionaires.csv dataset, summarizing the distribution through quartiles, median, and outliers. It highlights the interquartile range with a colored rectangle, extends whiskers to the upper and lower fences, and marks outlier values as grey circles. Built with p5.js, the sketch loads the CSV in `preload()`, calculates statistical measures in `cleanData()`, and renders interactively in `draw()`. A tooltip appears when the mouse hovers over the box, revealing the computed five-number summary values.

SSimon Hackbert
67% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
67% match
Loading thumbnail…

Histogram D3

This histogram displays the distribution of average daily temperatures recorded throughout 2016, with bars colored green that turn red on hover. Built with D3 v6, the visualization loads CSV data via `d3.csv`, computes bin counts using `d3.histogram()`, and scales the axes with `d3.scaleLinear()`. The SVG rendering includes axis generators (`d3.axisBottom` and `d3.axisLeft`), interactive tooltips via appended `title` elements, and explicit margins for layout. The code demonstrates a straightforward binning workflow from raw weather data to a readable chart.

AAllen Ho
66% match