Tell us what works and what could be better. We read every submission.
@acmaneira·3 public vizzes
This bar chart displays the percentage of renewable energy generation relative to other energy sources across several OECD countries for the year 2011. The data is loaded from a CSV file, sorted in descending order by the 2011 value, and rendered as horizontal bars using D3 v3 with SVG. Each bar’s width encodes the renewable energy percentage, and hovering over a bar reveals a tooltip with the country name and its value. The visualization is styled with a light blue background and white SVG canvas.
This example demonstrates loading and parsing a CSV file with D3’s d3.csv function. The page includes a static SVG illustration of basic shapes, but the core functionality occurs in the console: the renewable_energy.csv dataset—country-level renewable energy values from 2002 to 2011—is fetched and converted into an array of JSON objects, which is then logged for verification.
The visualization shows how renewable energy production per capita (in kilograms of oil equivalent) evolves from 2002 to 2011 across OECD countries and the world. It uses a bar chart race, where each country is represented by a horizontal bar that updates its length and position over time. The code employs D3.js with `d3.forceSimulation` for smooth animated transitions of bar heights, and it reads the time-series data from the `renewable_energy.csv` file. The data source is the OECD, with values displayed as numeric labels beside each bar.