Skip to main content
SimilarExport ZIP
100%

Narrative Visualization

✓ Published0🌍 Public
Xxiaojingwu138
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from D3 Starter

This interactive narrative visualization, built with D3.js v5, illustrates wage and salary employment rates as a percentage of total employment from 2000 to 2017. It presents a sequence of line charts for the world average, then the USA, China, and Russia, progressing through a multi-step story with clickable “next” buttons. The tool queries live data from the World Bank’s WDI API, loading total, male, and female series for each country. Each step highlights a different country’s trend, with a final interactive mode letting users select gender and country to query and render new lines.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization for the Gender Wage Gap in the US

Using d3.v5 and SVG, this example visualizes the gender wage gap in the US by plotting average yearly earnings against eight occupation categories for 2017. It shows income differences across three groups: females, males, and persons overall. The visualization uses d3.csv to load the data, filters for a single year, and then employs d3.scaleOrdinal and d3.schemeCategory10 for color coding. Linear scales (d3.scaleLinear) and axes (d3.axisLeft, d3.axisBottom) render the chart, with gridlines from the left and bottom axes.

Xxiaoma1002
74% match
Loading thumbnail…

Visualization for the Gender Wage Gap in the US

This visualization compares the gender wage gap across eight occupations in the US for the year 2017, plotting income on the x-axis and job categories on the y-axis. Three colored lines represent females, males, and all persons, with a legend identifying each group. The chart uses D3 v5 to load the CSV data, filter by year, and render an SVG with linear scales for both axes, gridlines, and axis labels. The code employs `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization.

Xxiaoma1002
72% match
Loading thumbnail…

Fork of D3 Starter

This visualization displays employment rates for both males and females over time, allowing users to select a country from a dropdown menu to update the chart. The view shows a dual-series line chart where brown vertical lines and circles represent male data at each time point, while green ones represent female data. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG circles and lines for rendering. A legend distinguishes the two gender variables.

Iiamsrihari28
69% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes average wages across different countries for the year 2021, with each dot representing a nation’s wage value. The visualization uses D3.js v7 to render SVG elements, employing a linear x-scale for wage amounts and a point y-scale for country names. Data is loaded from a CSV file via `d3.csv`, then mapped to circle positions using the scales. The chart includes labeled axes for country and average wage, with hover effects changing dot color to orange.

Nnagasai.mandalapu@gmail.com
69% match
Loading thumbnail…

Final Project

This interactive visualization displays U.S. minimum wage trends from 1968 to 2017 using a dual choropleth map and line chart. Users click states to compare their minimum wage both in raw dollar values and adjusted 2018 dollars, with the line chart updating to show historical trajectories for selected states. A slider allows browsing different years. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for color encoding, and d3.line for the time-series data, sourced from Kaggle. A color legend helps interpret the wage ranges.

RRobert Curtis
68% match
Loading thumbnail…

나라별 factor 비교 (d3.V3)

This visualization compares five countries—Indonesia, Japan, China, Vietnam, and South Korea—across selectable factors such as unemployment, marriage rates, household prices, and elderly population. Using D3.js v3 and React, it renders animated multi-line SVG charts where users switch factors via a dropdown and toggle country visibility with checkboxes. The code explicitly maps country lines to colors, scales the y-axis dynamically with `d3.svg.axis`, and reads from a CSV file with yearly values.

Hhshs1115
67% match
Loading thumbnail…

Fork of ICE-7 Scatter plot

This animated scatter plot visualizes changes in average wages across countries over time, comparing each year’s values against the following year’s values in a sequence of transitions. The visualization cycles through data from 2000 to 2022, updating every three seconds. It uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` for country colors and year-based symbol shapes (circles, crosses, diamonds, and more), and `d3.axisBottom` and `d3.axisLeft` for grid lines. The code demonstrates a reusable chart pattern with configurable accessors and margins.

Nnagasai.mandalapu@gmail.com
67% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes average wage trends across countries using an animated scatter plot built with D3 v6. It renders circles positioned by each country's first and last recorded wage values, with a y-axis using a band scale for country names and an x-axis linear scale for wages. The visualization updates every two seconds by randomizing data points, demonstrating reusable chart patterns through the custom `scatterPlot` function that leverages `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Data comes from a CSV of country wage statistics, displayed as an SVG with smooth transitions between updates.

Mmukundakrishna.r@gmail.com
67% match