Histogram

100%

✓ Published0🌍 Public

Last edited Feb 11, 2024

Created on Feb 11, 2024

This interactive histogram visualizes the distribution of median salaries for recent graduates, based on data loaded from a CSV file. Built with the p5.js library, it processes the salary column, filters out zero values, and groups the data into 20 bins. The sketch calculates bin widths and frequencies, then renders the bars on a canvas with gridlines and labeled axes, using p5.js functions like `loadTable`, `createCanvas`, `map`, and `rect` to display the chart.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Histogram

This example displays a histogram of median salaries for recent graduates, using a dark background with light blue bars to visualize frequency distribution across 20 salary bins. The p5.js sketch loads CSV data from a GitHub gist, processes the salary column, and generates the chart on an HTML canvas. It includes labeled axes, gridlines for frequency, and animated rendering through setup and draw functions. The code uses p5.js’s loadTable, map, and rect APIs, with custom binning logic to exclude zero values.

RRiya Mathur

94% match

Loading thumbnail…

Strip Chart

This visualization displays the distribution of highest salaries for graduates using a strip chart. Individual salary values are plotted as blue points along a vertical axis, with random horizontal jitter applied to reduce overplotting. The chart is created with p5.js, loading a CSV dataset of graduate salaries and using the `loadTable`, `createCanvas`, and `ellipse` functions. Salary data is filtered, sorted, and scaled to fit the canvas height. Both the x and y axes are labeled, with the chart title displayed at the top.

RRiya Mathur

79% match

Loading thumbnail…

Box Plot

This example visualizes the distribution of salary data as a box plot, highlighting the minimum, first quartile, median, third quartile, and maximum values using a green box with a red median line. The data is loaded from a CSV file using p5.js’s `loadTable`, then processed and sorted in `setup` before a custom `drawBoxPlot` function renders the chart on a dimmed background. The code computes quantiles via a `quantile` helper function and uses p5.js drawing commands like `rect` and `line` to construct the plot directly on the canvas.

RRiya Mathur

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

76% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

RRiya Mathur

76% match

Loading thumbnail…

Histogram

This histogram displays the distribution of base pay for San Francisco city employees from 2011 to 2014, using p5.js to load a CSV dataset and render the visualization on an HTML canvas. The code processes the data into bins of $25,000 increments, calculates frequency counts, and scales bar heights proportionally to the count axis. Axes with labeled intervals and value labels are drawn using p5.js drawing functions, with salary values formatted in a compact "k" notation for readability.

DDominic Fernandez

76% 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

75% match

Loading thumbnail…

Histogram

A histogram displays the distribution of car prices from a CSV file loaded from a GitHub gist. The chart divides the price range into ten equal bins and plots the frequency of cars within each bin as vertical bars. The p5.js library handles the data loading via `loadTable()` and the drawing with `createCanvas()`, `rect()`, and `map()`. A background grid and labeled axes for price and frequency support the visualization, which includes tick marks showing price values at each bin boundary.

SShazil Taqi

75% match