Colm Lang A4 | Heatmap

100%

Colm Lang A4 | Heatmap

✓ Published0🌍 Public

Last edited Mar 8, 2022

Created on Feb 22, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Colm Lang A4 | Scatter Plot

This scatter plot displays the relationship between total power generation (in TWh) and the renewable share of production (as a percentage) for European countries in 2020. Each green circle represents a country, positioned along the x-axis for generation and the y-axis for renewable share. The visualization is built with D3.js v7, using `d3.csv` to load the external dataset, `d3.scaleLinear` for axis scaling, and SVG `<circle>` elements for the data points. The plot is styled with a custom CSS background and Roboto font.

CColm Lang

86% match

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

86% match

Loading thumbnail…

Colm Lang A4 | Bar Chart in D3

This bar chart displays the average share of renewable energy production across EU member states per year, with exact percentages revealed on hover. It loads a CSV file from a GitHub gist using `d3.csv`, then renders SVG rectangles scaled by `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The chart includes axis labels, a title, and CSS-driven hover interactions that change bar color and display the numeric value.

CColm Lang

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

85% match

Loading thumbnail…

Fork of Colm Lang A2 Heatmap

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.

NNitish Kumar

84% match

Loading thumbnail…

Colm Lang A6 Bar Chart

This bar chart visualizes the average share of electricity production from renewables across EU member states from 2012 to 2020. Each bar is colored using a linear color scale to encode the year-over-year percentage change, with a legend displaying the percentage format. The chart is built with D3 v7, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis and color encoding, and `d3.legendColor` for the color legend. Data originates from a CSV file, and hovering over a bar reveals its change percentage.

CColm Lang

83% match

Loading thumbnail…

Colm Lang A2 Bar Chart

This example shows the average share of renewable energy production from 2000 to 2020 for EU member states as a bar chart. Each bar represents a country’s value and is labeled with its corresponding year. The visualization is built with p5.js, using the `loadTable` function to fetch a CSV file from a GitHub gist. The chart includes axes, tick marks, and a rotated y-axis label, rendered through canvas drawing commands, with bars scaled proportionally to the data range.

CColm Lang

81% match