Charts
  1. Bar Chart
  2. Column Chart
  3. Stacked Bar Chart
  4. 100 Percent Stacked Bar Chart
  5. Multiple Bar Chart
  6. Scatter Plot
  7. Line Chart
  8. Tree Map
  9. Donut Chart
  10. Area Chart
  11. Map of Africa
  12. World Globe
  13. MapBox
  14. Scrollytelling
This project documents Charts I redeveloped as a learning process to learn d3 and svelte. Most of the data and chart were inspired and copied from d3-graph-gallery and Connor Rothschilld.

Bar Chart

IndiChinIndoIrelIcelTurkIsraSaudCostMexi0% 2% 4% 6%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Column Chart

0% 1% 2% 3% 4% 5% 6% India China Indonesia Ireland Iceland Turkiye Israel Saudi Arabia Costa Rica Mexico
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Stacked Bar Chart

bananapoaceesorghomtriticum0% 20% 40% 60%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Multiple Bar Chart

bananapoaceesorghomtriticum0% 10% 20% 30%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Line Chart

1020304050607080901000% 2% 4% 6% 8% 10%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

100% Stacked Bar Chart

bananapoaceesorghomtriticum0% 20% 40% 60% 80% 100%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Scatter Plot

5000100001500020000250003000035000400004500040% 50% 60% 70% 80%
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Tree map

grp1grp2grp3grp4grp5
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Donut Chart

PreseedPreseriesSeedUnspecifiedIncubator/AcceleratorSeriesB
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph

Area Chart

Jan-17Jan-18Jan-19Jan-20Jan-21Jan-22Jan-2305001000
17-Jan
23-May
Data Source: Jayeola Gbenga
Code: Jayeola Gbenga
Inspiration: Chris Martin

Map of Africa

Map of Africa showing key recipient countries
Data Source: D3-Graph
Code: Jayeola Gbenga
Inspiration: D3-Graph