Skip to main content
SimilarExport ZIP
100%

Wealth Distribution Overtime

✓ Published0🌍 Public
RRuba Khan
Last edited Sep 25, 2024
Created on Sep 25, 2024

Wealth Distribution Overtime uses d3.line, scaleLinear, axisBottom, axisLeft, and scaleOrdinal to render three multi-series line charts tracking the wealth of Elon Musk, Mark Zuckerberg, and Jeff Bezos from 2020 to 2024. The code defines the data inline, with values in hundreds of millions, and draws each person’s trajectory as an SVG path with stroke and circle marks. A color-coded legend and labeled axes clarify the comparison, while the x-axis shows years and the y-axis displays wealth magnitude.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations

MIT Licensed

Similar vizzes

Loading thumbnail…

linechart

This line chart visualizes the changing wealth of billionaires from 1996 to 2014, with each line representing an individual's net worth over time. The SVG-based chart uses a yellow stroke for the lines and white-filled dots to mark data points, following a minimal, clean design. Data is loaded from a CSV file containing billionaire attributes such as age, gender, citizenship, industry, and wealth type, allowing the line chart to map wealth values across years for each person. The visualization focuses on trend comparison, with the styling keeping attention on the data itself.

BByronHan333
77% match
Loading thumbnail…

Bar Chart Sequential Scale

This bar chart visualizes the wealth of billionaires, using a sequential color scale where bar fill intensity corresponds to net worth in billions. The chart encodes value through both bar height and color, with a legend explaining the color mapping. Built with D3 v6, it loads CSV data, applies a linear color scale from white to blue, and renders SVG rectangles. The visualization uses `d3.scaleBand` for x-axis positioning and `d3.axisBottom` for ticks. A `d3.legendColor` legend clarifies the color scale. Hovering highlights each bar in red, and tooltips display exact values.

AAllen Ho
72% match
Loading thumbnail…

Line Chart

This line chart displays the net worth of Bill Gates from 1996 to 2014, based on a CSV dataset. It shows how his wealth grows over time. The visualization uses D3 v4 with an SVG rendering, employing a linear x-scale for years and a linear y-scale for worth in billions of USD. The line is styled with a stroke, and circles mark each data point, with axis labels and a title included.

BByronHan333
71% match
Loading thumbnail…

bar chart

This bar chart displays the net worth of prominent billionaires from the 2014 dataset, with each bar representing an individual’s name and worth in billions of USD. The visualization uses D3.js v4 to create an SVG-based chart, employing `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis values. Data is loaded from a CSV file, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated text labels for readability. The chart highlights wealth distribution across notable figures, sourced from the provided gist.

BByronHan333
70% match
Loading thumbnail…

Customizing Axes

This visualization displays a bar chart of estimated billionaire populations from 2018 United Nations data, comparing the top 10 countries by wealth. The chart customizes D3 axes by removing default domain lines, using a custom tick format that converts abbreviations like 'G' to 'B', and adding axis labels and a title. It uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom from D3 v5, with SVG rendering and CSS styling for tick text, lines, and labels. The margins and inner dimensions are computed to position the chart within a 960×500 SVG canvas.

AAjayyy
70% match
Loading thumbnail…

Fork of Fork of Activity 6 Tutorial 3.2

This horizontal bar chart displays the total wealth of billionaires across 18 industries, sorted from highest to lowest total final worth. The visualization uses hardcoded data rendered as SVG rectangles with d3.axisLeft for the categorical y-axis and d3.axisTop with a linear x-scale for the wealth values. Each bar is labeled with its exact dollar amount using d3.format. The chart emphasizes the dominance of Technology and Fashion & Retail, which have the largest accumulated wealth totals.

Nnitishsurneni@gmail.com
69% match
Loading thumbnail…

scatter

This scatter plot visualizes billionaire wealth distribution, mapping individual billionaires as circles based on their age and net worth in billions of dollars. The chart uses the d3.v4 library with SVG rendering, reading from the billionaires.csv dataset. The data is plotted with age on the x-axis and wealth on the y-axis, with each point representing a billionaire. The chart includes marginal space for a categorical legend and uses a simple, clean design typical of blockbuilder.org examples. The visualization makes it easy to compare the relationship between age and wealth across the included billionaires from 1996.

BByronHan333
69% match
Loading thumbnail…

scatter

This scatter plot visualizes the wealth distribution of billionaires from 1996, with each point representing an individual billionaire. The data, sourced from a CSV file, is plotted with age on one axis and net worth on the other, using colored or shaped symbols to encode categories such as industry and region. The chart is rendered as an SVG using D3 v4, with margins defined for axes and a legend, and the visualization highlights patterns in billionaire demographics and financial standings across different sectors and countries.

BByronHan333
69% match