Skip to main content
SimilarExport ZIP
100%

Fork of ICE 6 Scatter Plot Chart

✓ Published1🌍 Public
Ssowjanya
Last edited Oct 19, 2025
Created on Oct 19, 2025

This scatter plot shows projected company financials—Revenue, Expenses, and Profit—from 2018 to 2030, with each point colored by category and interactive hover tooltips revealing year, value, and employee count. Built with React components and D3.js v5, it uses `scaleLinear` and `extent` for scales, `axisBottom` and `axisLeft` for axes, and `csvParse` on static CSV data. The SVG rendering includes custom grid lines, a legend, and drop-shadow effects on hover.

AI-generated description

Company Financials Scatter Plot

This visualization shows a company's financial data (Revenue, Expenses, and Profit) from 2018 to 2030 using a scatter plot.

Features

  • Scatter plot visualization with three data series (Revenue, Expenses, Profit).
  • Interactive tooltips on hover to display detailed data for each point.
  • Clean, modern styling with a clear legend.
  • Built with React for component-based architecture and D3.js for scales and axis generation.
  • Refactored into modular components for better readability and maintenance.

Data Source

The data is statically included in the application source code and represents fictional company financial projections.

Implementation

Built with React and D3.js, using functional components and hooks for state management and side effects.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 6 Scatter Plot Chart

This bar chart tracks company profit from 2018 to 2030, with each year’s profit value labeled above its corresponding bar. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering. Synthetic financial data provides the year and profit values, while CSS drop-shadow filters and hover effects add visual depth.

Ssowjanya
90% match
Loading thumbnail…

Fork of Fork of Scatter plot

A scatter plot visualizes company financial performance from 2018 to 2030 using CSV data, encoding Revenue, Expenses, and Profit as colored circles whose size reflects employee count. D3 v7 API calls including `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom` render the SVG chart, while mouseover events trigger a positioned tooltip showing metric details. A legend distinguishes the three financial metrics, and a secondary legend maps circle size to employee numbers.

Ssowjanya
85% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 (Multi series chart)

This multi-series chart combines bar and line encodings to compare financial metrics of a fictional company across years, highlighting revenue and expenses as bars against profit and employee counts as overlaid lines. Built with React and D3 v6, the visualization uses separate y-scales for bars and each line series, with axes rendered via `axisLeft`, `axisRight`, and `axisBottom` on an SVG. The code employs `scaleBand` and multiple `scaleLinear` instances, then draws bars as `rect` elements and lines using D3's `line` generator, with gridlines created from a reused left axis.

Ssowjanya
83% match
Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Vvydeeshm@gmail.com
82% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
80% match
Loading thumbnail…

Fork of ICE7 Reusable Scatter

This example visualizes PS4 game sales data as an animated scatter plot, showing global sales against release year across product categories. The visualization cycles the x-axis between Year and North American sales every few seconds. Built with D3 v6 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, renders circles as SVG marks, and includes a hand-coded legend with color-coded categories. Data loads from a CSV via `d3.csv`, with axis transitions driven by `setInterval`.

Mmaheganesh
80% match
Loading thumbnail…

Fork of ICE-7 Area Chart

This fork of ICE-7 Area Chart visualizes the cost of sales from 2000 to 2013 using an area chart with a smooth curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, `axisLeft`, and `axisBottom`. A black line traces the data while a yellow filled area beneath it emphasizes the trend. The chart loads CSV data from a GitHub gist, formats years as dates, and labels axes with the provided titles.

Ssumit
79% match
Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes the cost of sales from 2000 to 2013, highlighting trends over time with a smooth, curved line and a filled area beneath it. The chart uses D3 v5 to load and parse CSV data, then applies scales for time and linear values, with axes labeled accordingly. The visualization renders as an SVG, featuring a yellow filled area and a black line, and includes gridlines and tick formatting for readability. The data source is a CSV file hosted externally, processed with D3's `csv` function.

Ssaiyogesh9911@gmail.com
79% match