Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Area_Chart

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

76aac28960584e7794b59652beb800e6

Open

Area_Chart

0 stars0🌍 Public
Kkshravyak.2001@gmail.com
Last edited Mar 27, 2025
Created on Mar 26, 2025

This area chart visualizes total earnings by payment method for freelancers, using a gradient-filled path with a "mountain" effect to highlight differences across categories. The visualization aggregates earnings from a CSV dataset and sorts them in descending order, with value labels placed above each data point. Built with D3 v7, the chart uses `d3.area()` with `d3.curveMonotoneX`, `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the legend colors.

AI-generated description

Marketing Spend vs Earnings Visualization

This project visualizes the relationship between marketing spend and earnings using D3.js. The area chart shows how earnings correlate with different levels of marketing investment.

Features

  • Interactive area chart showing the relationship between marketing spend and earnings
  • Responsive design that adapts to different screen sizes
  • Tooltips providing detailed information on hover
  • Smooth animations and transitions

Getting Started

Prerequisites

No special prerequisites are needed to view this visualization. Any modern web browser will work.

Running the Visualization

  1. Clone this repository or download the files
  2. Open index.html in your web browser
    • Alternatively, you can use a local server like Live Server for VS Code

Data Source

The data is sourced from a CSV file containing information about marketing spend and corresponding earnings in USD.

Technologies Used

  • D3.js - JavaScript library for data visualization
  • HTML5
  • CSS3
  • JavaScript ES6