Log Scale with p5.js

100%

Log Scale with p5.js

✓ Published0🌍 Public

Last edited Dec 5, 2022

Created on Feb 8, 2022

This example visualizes ticket sales for the movie of the year from 1995 to 2021 using a logarithmic scale, with data loaded from a CSV file. It uses p5.js for canvas rendering and map data points as green circles positioned along the x-axis based on logarithmic calculations of sales figures. The visualization includes labeled tick marks and grid lines to indicate magnitudes from 1 million to 1 billion, with the log scale enabling compact representation of a wide value range.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Dot Plot with p5.js

This dot plot visualizes ticket sales for the “Movie of the Year” from 1995 to 2021, with each green circle positioned along a horizontal axis scaled in millions and labeled by year. The example uses the p5.js library within a React framework, loading CSV data via the `loadTable()` API and rendering circles with `circle()`. Grid lines, axis labels, and movie titles are drawn using canvas drawing methods, while the data source is fetched from a GitHub Gist URL.

OOlha

81% match

Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the relationship between ticket sales and income for movies from 1995 to 2021. Each circle represents a movie, with its horizontal position mapped to income and vertical position to tickets sold. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the data from a GitHub Gist. Seagreen circles are joined to the data using `selectAll` and `.join("circle")`, with title and axis labels added as SVG text elements.

OOlha

71% match

Loading thumbnail…

Log scale

This example demonstrates a logarithmic scale by positioning text labels at exponentially increasing values (10, 100, 1000, 10000, 100000) along a horizontal axis. The labels are evenly spaced due to the log transformation, contrasting with linear spacing. The code uses D3.js’s `d3.scaleLog()` to map the domain to pixel coordinates, then appends SVG `<text>` elements via `d3.select` and `.append()`. The data is hardcoded in an array, and the rendering uses an SVG canvas within an HTML page.

RRSSBDAE

70% match

Loading thumbnail…

Bar Chart p5.js

This bar chart displays the most successful film distributors by movie count from 1995 to 2021. It loads CSV data from a GitHub raw URL using p5.js’s `loadTable` in `preload()`, then renders bars with `rect()` and text labels in `draw()`. The chart includes grid lines, axis labels, and a title, all drawn directly on a 500×350 canvas created with `createCanvas`. The data source is visible as a remote CSV file, and the visualization uses static, hard-coded tick positions rather than dynamic scaling.

OOlha

69% match

Loading thumbnail…

Log Scale

This example visualizes reported migrant deaths over time, using a logarithmic y-scale to accommodate the wide range of total dead and missing counts. The scatter plot shows each reported date on the x-axis and the corresponding death toll on the y-axis, with points rendered as SVG circles. Built with React and D3 v5, it uses `scaleLog` for the y-axis, `scaleTime` for the x-axis, and the `csv` loader to fetch data from a GitHub gist. Axes are custom React components, and data is binned via `d3.histogram` for tick generation.

WWaseem Medhat

68% match

Loading thumbnail…

47) Log Scale

A scatterplot displays reported dates against total dead and missing migrants, using a logarithmic scale for the y-axis to accommodate a wide range of values. React components render SVG circles for each data point, with d3.scaleLog and d3.scaleTime mapping the data, while custom axes use d3’s tick formatting. The dataset comes from a CSV of Missing Migrants Global incidents, and tooltips show the reported date via SVG titles.

Llefat92

68% match

Loading thumbnail…

logscale

This scatter plot displays San Francisco temperature readings over a week, using a logarithmic y-axis (d3.scaleLog) to compress the range of temperature values. React components render the SVG, with d3.scaleTime mapping timestamps to the x-axis and d3.extent computing the domain. The visualization includes custom axes, radial gradient eyes, and a face-like background circle, while data loads from a CSV via d3.csv.

JJonas Carvalho

67% match

Loading thumbnail…

Bar Chart with p5.js

This p5.js bar chart displays the most successful film distributors from 1995 to 2021, ordered by the number of movies they distributed. The visualization uses a classic bar-and-axis layout, with distributor names on the y-axis and a count scale on the x-axis. It loads CSV data via the `loadTable()` function from a GitHub repository, then renders the chart using `rect()` and `text()` calls within the `draw()` loop. The chart includes gray gridlines, axis labels, and a blue fill for the bars, highlighting the quantitative ranking.

OOlha

67% match