A2 - Visualizing Amounts using P5js

100%

A2 - Visualizing Amounts using P5js

✓ Published2🌍 Public

Last edited Apr 2, 2024

Created on Feb 6, 2024

This example presents four P5.js visualizations of amounts: a bar chart, a dot plot, a heatmap, and a bar chart with a logarithmic scale. It uses the P5.js library for drawing and rendering. Each chart is embedded via VizHub links on a plain HTML page. The code demonstrates different approaches for encoding quantitative values, including rectangular bars, circles, color intensity in a grid, and a log-transformed axis for data with wide ranges.

AI-generated description

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

Similar vizzes

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham

81% match

Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham

79% match

Loading thumbnail…

A2 Graphs

This example presents three distinct data visualizations within a single p5.js canvas: a bar chart of female smokers in Australia over time, a dot plot of fiber content in bread, and a heat map of monthly precipitation in Seattle. The code loads CSV data from GitHub gists using `loadTable`. It directly renders shapes like `rect` for bars and heat map cells, and `circle` for dots, while manually annotating axes and using color thresholds to encode precipitation levels.

MMiaya South

74% match

Loading thumbnail…

Lets make face with D3.js

This example visualizes a simple bar chart from an array of numeric values, `[4,8,15,16,23,42]`, where each value determines the width of a colored bar. The page uses D3.js v5 loaded from a CDN, alongside plain HTML and CSS, to render the bars with steel-blue backgrounds and right-aligned white text inside each div. The chart demonstrates basic data binding and styling without complex D3 scales or axes, relying instead on static div elements with inline width styles. It serves as a minimal introduction to representing data as proportional rectangles.

Kkhuton

73% match

Loading thumbnail…

Pseudo Viz

This example shows three horizontal bars labeled Bar 1, Bar 2, and Bar 3, with varying widths representing different values. The visualization is rendered as static SVG elements directly in the HTML, using `<rect>` for the bars and `<text>` for labels, styled with CSS for font size and color. The code relies on standard HTML, CSS, and JavaScript APIs without any external libraries or data processing, presenting a simple hardcoded bar chart layout.

SSami Kauhanen-Duac

73% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

73% match

Loading thumbnail…

Untitled

This example shows a basic bar chart comparing categorical names against numeric amounts. The chart uses SVG rendering with steel-blue bars and displays both x and y axes. The code loads data from a CSV file called "amounts.csv", converts the amount values to numbers, and uses D3 v6 scales including `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The bars are appended as SVG `rect` elements, with axes generated using `d3.axisBottom` and `d3.axisLeft`. The visualization is built within a React framework context, though the rendering logic itself is plain D3.

HHieuVu179

73% match

Loading thumbnail…

Lab2-Task2

This example displays a histogram of 20 fixed numeric values using SVG rectangles, with each bar’s height and color encoding the data magnitude. A linear color scale maps the minimum value to dark blue and the maximum to light blue. D3.js v4 selects the SVG, binds the array via `data()`, and appends `rect` elements for bars plus `text` elements showing each value in white. The rendering uses static JavaScript data, not an external dataset.

XXuân Vinh

73% match