Fork of Colm Lang A2 Heatmap

100%

Fork of Colm Lang A2 Heatmap

✓ Published0🌍 Public

Last edited Sep 26, 2022

Created on Sep 26, 2022

This heatmap shows the average share of renewable energy production for European countries from 2000 to 2020, with each row representing a country and each column a year, colored by percentage. The code uses p5.js to render the visualization, loading CSV data via `loadTable` from a GitHub Gist. It draws colored squares with `square`, maps values through the custom `getColor` function using `lerpColor`, and includes a gradient legend built from individual lines. Axes, titles, and country labels are placed with text and line drawing functions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Colm Lang A2 Heatmap

This visualization displays the average share of renewable energy production per country in Europe from 2000 to 2020, with each row representing a country and each column a year, colored on a green scale from dark to light. Built with p5.js, it uses a loadTable call to fetch CSV data from a GitHub gist, then draws a heatmap grid with square cells sized and spaced by calculated dimensions. Axis lines, country labels, and a legend showing percentages from 0 to 100 are rendered via p5’s drawing functions, while color interpolation (lerpColor) maps production values to a gradient.

777tinna

96% match

Loading thumbnail…

Colm Lang A2 Heatmap

This heatmap visualizes the average share of renewable energy production across European countries from 2000 to 2020. Each row represents a country, with colored squares indicating yearly percentage values, ranging from dark green (low) to light green (high). The visualization uses the p5.js library, loading CSV data via `loadTable`, and draws the grid of squares with `square()`. A color legend maps percentages to a three-stop gradient created with `lerpColor`. Country and year labels are placed along the axes for reference.

CColm Lang

92% match

Loading thumbnail…

Fork of Fork of Colm Lang A2 Bar Chart

This bar chart displays the average share of renewable energy production from 2000 to 2020 for EU member states, with each bar labeled by year and scaled to the axis height using a custom `getHeight` function that rounds the maximum value to the nearest five. The visualization uses p5.js to render the canvas, load a CSV dataset via `loadTable`, and draw axes, gridlines, tick marks, and bars through functions like `drawAxis`, `drawTicks`, and `drawBar`, with the data sourced from a processed Europe power sector CSV file.

Vvegurusaiprathyusha

85% match

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

This visualization displays the average share of renewable energy production in EU member states from 2000 to 2020, using a bar chart where each bar represents a year with its corresponding percentage value. Built with p5.js, it loads CSV data from a GitHub-hosted file, draws axes with tick marks and labels, and renders bars scaled proportionally to the dataset’s maximum value. The chart uses a simple Cartesian coordinate system with custom scaling functions to map data values to pixel heights.

Vvegurusaiprathyusha

85% match

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

This example visualizes the average share of renewable energy production from 2000 to 2020 across EU member states as a bar chart. It uses p5.js to render the visualization, drawing axes, ticks, and bars on a 960×500 canvas. The data is loaded from a CSV file via `loadTable()` in the `preload()` function, with bar heights scaled proportionally to the axis dimensions. The code includes custom functions for axis labels, tick marks, and bar drawing, with a green fill for each bar.

MMar-99

85% match

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

A fork of Colm Lang's bar chart, this p5.js visualization displays the average share of renewable energy production from 2000 to 2020 across EU member states. The data is loaded via `loadTable` from a remote CSV file, with a canvas rendering gridlines, axis ticks, and labeled axes using custom drawing functions. Each bar's height is scaled proportionally to the maximum value in the dataset, with country years plotted along the x-axis. The sketch uses p5.js 1.4.0 and processes the data directly from the CSV without additional libraries.

VVReddy913

85% match

Loading thumbnail…

Colm Lang A4 | Heatmap

This heatmap visualizes the average share of renewable energy production (as a percentage of total generation) across ten European areas from 2000 to 2020. Using d3.csv to load the data, it maps years along the x-axis and areas along the y-axis, coloring each 30-pixel cell with d3.interpolateRgb.gamma to encode share values. On hover, each cell reveals its exact percentage via a text label. The chart is rendered as an SVG with d3.axisBottom and d3.axisLeft for the axes.

CColm Lang

84% match

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

A vertical bar chart displays the average share of renewable energy production for EU member states from 2000 to 2020. Each bar represents a single year, with height scaled proportionally to the renewable percentage. The chart uses the p5.js API, including `loadTable` to fetch CSV data from a GitHub gist, and custom functions to draw axes, ticks, and bars via `line`, `rect`, and `text`. A light blue background and green bars render the dataset’s yearly values.

MManideepChakilam

84% match