Tell us what works and what could be better. We read every submission.
@alebusi·6 public vizzes
This visualization shows the evolution of youth unemployment rates across the world from 1991 to 2013, with each country represented as a thin grey line. Users can explore the data by hovering over lines to highlight them, and specific regions are emphasized with distinct colors: the EU in steelblue, Middle East in green, Latin America in indianred, Sub-Saharan Africa in purple, North America in orange, and East Asia in red. The chart uses an SVG line graph with a time scale on the x-axis and a linear scale on the y-axis, with axis labels and a legend-style highlighting system for regional focus. The data is loaded from a CSV file and restructured into per-country arrays of year/value pairs, then rendered as individual lines that brighten and thicken on hover. The visualization includes a title and brief description prompting further exploration of the causes of trends in youth unemployment over two decades.
The scatterplot shows the math scores of boys versus girls across 37 OECD countries, with each circle representing a country. The diagonal line separates countries where boys outperform girls from those where girls perform better. The visualization uses D3 v3 to load the CSV data, sort it by girls' scores, and render an SVG scatterplot with a linear scale for each axis. Hovering reveals a tooltip with the country name and both scores.
A horizontal bar chart ranks 37 OECD countries by girls' average mathematics scores, with Korea at the top and Brazil near the bottom. The bars are created by binding CSV data to SVG `rect` elements, using `d3.scale.linear` for the width axis and `d3.scale.ordinal` with `rangeBands` for the categorical country positions. Hovering reveals a tooltip via an appended `title` element. The code relies on d3.v3’s `d3.csv`, `d3.svg.axis`, and data sorting with `d3.descending`.
This example shows how girls’ mathematics scores across 37 OECD countries can be represented as a horizontal bar chart, sorted from highest to lowest. Each bar’s width encodes the score, with country labels overlaid on the bars and hover tooltips revealing the exact values. The visualization uses D3 v3’s `d3.csv` to load the data, `d3.descending` for sorting, and SVG `rect` and `text` elements created via data joins. The bars are styled with CSS, and the dataset comes from the OECD_ISA_2012.csv file.
This example demonstrates how to load and inspect tabular data from a CSV file using D3.js. The page displays a static SVG graphic with a red title, while the code reads the OECD_ISA_2012.csv dataset, which contains student assessment scores by country and gender. The d3.csv function parses the file into an array of JSON objects and logs the result to the browser console for verification. The visualization itself is minimal, focusing on the data-loading workflow rather than presenting the parsed values graphically.
This visualization uses OECD PISA 2012 data to compare average student performance in math, reading, and science across 37 countries, split by gender. It shows the gender gap in each subject, with reading favoring girls in every country while math and science scores are typically higher for boys. The chart employs d3.forceSimulation to position circular country nodes in a two-dimensional layout, where each node’s size encodes overall performance and its horizontal offset reflects the gender difference. Tooltips reveal exact scores on hover, and the data is loaded directly from the included CSV file.