Kirigoe
About Projects Data Visualizations Accessibility Contact
D3.js + SvelteKit

Data Visualizations

I always had an interest in data visualization. It was the primary reason I chose SvelteKit, a well-known framework used by top newspapers to add interactive data visualizations. I decided to test some sample data with a popular data visualization framework, D3.

Sample Data and Charts

The first charts will be basic, for me to test on my own. Then I will add charts that focus on cryptocurrency and stablecoins. I may even add some interactive maps. What SvelteKit is suitable for.

Kirigoe

This image was generated by DALL-E 5 with the following prompts; Create an abstract landscape design will keep it clean, modern, and symbolic, which is ideal for a startup website and base it on:

  • A foggy valley represented with flowing gradient shapes in blue-gray.
  • A winding golden path cutting through the mist, symbolizing clarity and transformation.
  • Minimal, abstract human silhouettes fading into the fog to hint at identity and change.
  • Flat, modern gradients and geometric abstraction, making it feel professional and web-ready.
  • Kirigoe symbolism with data visualization motifs — blending misty gradients, flowing forms, and glowing geometric data elements for a modern, tech-oriented aesthetic for the latest image.

The original image generated contained the kanji 霧越 subtly integrated into the mist as a textured detail, almost hidden. The kanji was removed for the website.

Data Visualization

Annual Growth TrendValueMonthJan: 30Feb: 45Mar: 55Apr: 48May: 65Jun: 78Jul: 85Aug: 92Sep: 88Oct: 95Nov: 105Dec: 112JanFebMarAprMayJunJulAugSepOctNovDec020406080100120

Understanding the Chart

This interactive line chart visualizes the Annual Growth Trend over a 12-month period, demonstrating how data can be effectively presented using D3.js and SvelteKit.

Key Features

  • Smooth Animation: The chart animates on load with a 1.5-second cubic easing
  • Data Points: Each circle represents a monthly value
  • Grid Lines: Horizontal guides help read values accurately
  • Interactive: Hover over data points to see exact values

What This Shows

The data demonstrates a general upward trend from January through December, with the highest values occurring in the final quarter. This type of visualization is ideal for tracking metrics like growth rates, performance indicators, or financial data over time.

Technology Stack

  • D3.js: Powerful data visualization library
  • SvelteKit: Modern framework with Svelte 5 runes
  • SVG: Scalable vector graphics for crisp rendering
  • Tailwind CSS: Utility-first styling

Investment Growth Comparison

Compare the growth of $100 invested in USDC (4.5% APY) versus a traditional savings account (1.1% APY) over 10 years.

Investment Type:
One-Time Investment GrowthValue (USD)YearsUSDC Year 0: $100USDC Year 1: $105USDC Year 2: $109USDC Year 3: $114USDC Year 4: $120USDC Year 5: $125USDC Year 6: $131USDC Year 7: $137USDC Year 8: $143USDC Year 9: $150USDC Year 10: $157Savings Year 0: $100Savings Year 1: $101Savings Year 2: $102Savings Year 3: $103Savings Year 4: $104Savings Year 5: $106Savings Year 6: $107Savings Year 7: $108Savings Year 8: $109Savings Year 9: $110Savings Year 10: $112012345678910$0$50$100$150USDC 4.5%Savings 1.1%

One-Time Investment Results

USDC (4.5% APY)

$157

After 10 years

Savings (1.1% APY)

$112

After 10 years

Difference

$45

USDC earns 40% more

Key Insights

  • USDC stablecoins offer significantly higher APY than traditional savings
  • Even a one-time investment grows substantially over time
  • The difference compounds over time, creating wealth gaps
  • DeFi platforms can offer competitive alternatives to banks
Note: This is a simplified calculation for demonstration purposes. Actual returns may vary based on market conditions, platform fees, and other factors. Cryptocurrency investments carry risks.