Tell us what works and what could be better. We read every submission.
@ThomasSeymat·6 public vizzes
A scatterplot displays each EU country’s renewable energy consumption percentage against its energy dependence rate for 2013. Circles are sorted by dependence and animate from tiny points to full size via a staggered transition. The visualization uses D3 v3 with `d3.scale.linear`, `d3.svg.axis`, and `transition.attr` to render SVG circles. Data comes from Eurostat, loaded through `d3.csv`.
This horizontal bar chart ranks 28 European Union countries by their renewable energy consumption as a percentage of total energy use in 2013, with Sweden at the top and Luxembourg at the bottom. The visualization uses d3.v3 with SVG rendering, employing a linear `d3.scale.linear` for the x-axis and an ordinal `d3.scale.ordinal` with `rangeRoundBands` for the y-axis country categories. Data is loaded from a CSV file via `d3.csv` and sorted in descending order, with green bars and hover opacity changes for interactivity. The chart includes axis labels via `d3.svg.axis` and tooltips through appended `title` elements, sourced from Eurostat.
A horizontal bar chart ranks European Union countries by renewable energy consumption as a percentage of total energy use in 2013. The bars are sorted in descending order, with Sweden at the top and Luxembourg and Malta at the bottom, and each bar includes a tooltip showing the exact percentage. The visualization uses d3.v3 with SVG rendering, employing ordinal and linear scales for the axes, and sorts the data with `d3.descending`. Data comes from a CSV file sourced from Eurostat.
This bar chart shows the percentage of renewable energy consumption in European Union countries for 2013, sorted in descending order from Sweden to Luxembourg. The visualization uses D3 v3 to load the CSV data, sort it by the renewable energy consumption column, and render SVG rectangles whose widths are scaled proportionally to each country’s percentage. Hovering over a bar reveals a tooltip with the country name and exact value via the appended `title` element. The data originates from Eurostat.
This example displays a static SVG composition of circles, lines, rectangles, and text, overlaid with data loaded from a CSV file. The code uses D3 v3’s `d3.csv` to parse the GreenEnergyEU dataset into an array of JSON objects, logging it to the console for verification. The SVG elements—such as the pink circle, orange and blue lines, red rectangle, and bold navy text—are drawn directly in the HTML markup, while the CSV data is not yet bound to any visual encoding. The rendering approach relies on SVG primitives, with no dynamic scales or transitions implemented.
This example visualizes the relationship between electricity prices and renewable energy adoption across 28 European countries using data from 2013–2014. It plots each country as a point on a scatterplot, encoding electricity prices on the x-axis and the share of renewable energy in gross final consumption on the y-axis, with point color and size determined by additional metrics like transport fuel renewables and energy dependence. The visualization uses d3.forceSimulation to position labels and nodes, d3.scaleLinear for axis mapping, and d3.axisBottom/axisLeft for axes. The underlying data is loaded from a CSV file via d3.csv, and the rendering relies on SVG paths and circles.