Skip to main content
SimilarExport ZIP
100%

dotPlot

✓ Published1🌍 Public
Hhollyjpotter
Last edited Feb 9, 2022
Created on Feb 8, 2022
Forked from barChart

This dot plot visualizes carbon intensity (gCO2/kWh) for 2020 across multiple countries, with each circle representing a data point positioned along the y-axis based on its value. The chart includes labeled axes, tick marks, grid lines, and a rotated axis title indicating the measured metric. The visualization is built using p5.js, loading data from a CSV file via `loadTable()` and rendering circles with the `circle()` function. Data is processed from the `powerData.csv` source, with countries listed on the x-axis and carbon intensity values plotted vertically.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

boxPlot

This example visualizes a boxplot of CO2 levels (carbon intensity in gCO2/kWh) for European countries in 2020, displaying statistical summaries including minimum, maximum, median, and quartiles. The plot is drawn manually on a 1000x1000 canvas using p5.js, with loadTable() to import the CSV data and custom JavaScript functions for sorting and calculating median values. The visualization includes labeled axes and a title to communicate the distribution of carbon intensity across countries.

Hhollyjpotter
82% match
Loading thumbnail…

barChart

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

Hhollyjpotter
81% match
Loading thumbnail…

Colm Lang A2 Dot Plot

This dot plot visualizes the average share of renewable energy production per country in Europe for 2020. It displays each country as a green dot along a horizontal axis, with tick marks and labels indicating percentage values. The visualization uses the p5.js library to load a CSV dataset, draw the axis, ticks, and dots, and render country labels. It calculates axis scaling and tick spacing dynamically based on the data range.

CColm Lang
74% match
Loading thumbnail…

Scatter plot

A scatter plot displays CO2 emissions for top-ranking countries, mapping each country's total 2018 emissions in gigatons along a horizontal linear scale against a vertical point scale of country names. The visualization encodes data points as steelblue circles, with axes, gridlines, and labels styled via CSS. Built with D3 v6, it uses `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom`/`axisLeft` for rendering axes, while `format` converts emission values to readable units. Data originates from UCSUSA's 2018 country emissions dataset.

Ccarbuncle-3djs
72% match
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa
72% match
Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa
72% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays the top 10 countries with the highest CO2 emissions in 2019 as a horizontal bar chart, using a dataset loaded from a CSV file. The visualization is built with React components that render SVG marks while leveraging D3’s `scaleBand` and `scaleLinear` to position rectangles along the x and y axes. Axis ticks and labels are generated manually by mapping over scale domains, and the chart includes a blue gridline for each tick value. The page is titled "CO2 emission in the Countries" and updates asynchronously when the data finishes loading.

NNikhilchiguru-8
71% match
Loading thumbnail…

P5 Dot Plot

This example visualizes natural gas prices in the industrial sector from 1961 to 2016 using a dot plot. Each dot represents a sampled year, positioned horizontally by price and vertically by time, with labels for both the year and price value. The code uses the p5.js library, loading CSV data from a GitHub repository via `loadTable`, then rendering points, text, and axis lines on a 600x500 canvas. The plot includes a labeled x-axis for price increments and annotations for the most and least expensive years.

Mmariahdiaz
71% match