SaaS Revenue Simulator

Scatter Trial

This animated scatter plot compares monthly revenue and profit figures from a small JSON dataset. Two overlapping SVG circle groups represent the same months, with a toggle switching the y-axis between revenue and profit every two seconds. The visualization uses D3.js v5 scales, axes, and transitions with enter/exit animations as data points shrink or disappear. React serves as the framework, with SVG elements and animation handling via D3's transition API.

67% match

Tooltip And Events Trial

This interactive visualization displays monthly revenue and profit data as animated bar charts, toggling between the two metrics every two seconds. Built with React and D3.js (v5), it uses SVG rendering with transitions to animate bar height changes and data updates. The chart includes a legend, axis labels, and an interactive tooltip powered by d3-tip that displays the current value on mouseover. The bars animate smooth transitions using d3-transition, with new elements growing from the baseline and removed elements shrinking away in blue.

KKeerthiKandadai

65% match

Area Chart Trial

This area chart animates daily revenue data from a CSV file, showing a sharp rise in late 2013 followed by volatility. Built with React and D3 v5, the SVG visualization uses `d3.area()` with `d3.scaleTime()` and `d3.scaleLinear()` to map dates and values, while axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`. A 750ms transition updates the chart, and the area is filled with a light beige and stroked in green.

65% match

Area Chart

This area chart visualizes revenue trends from 2009 to 2017, using D3.js to render an SVG-based line and area graph. The x-axis represents time (years), while the y-axis shows expenses, with the area under the curve filled in light blue to emphasize the trend. The chart includes labeled axes, gridlines, and a smooth curve, making it easy to observe the overall pattern and fluctuations in revenue over the specified period.

NNandini Maddula

SVG

This example visualizes monthly sales data as a bar chart, with bars colored dark gray or red depending on whether sales exceed 20. It loads data from a local `sales.json` file and renders both bars and labels using SVG. The chart includes a linear y-axis for sales and a band-scaled x-axis for months, both created with `d3.scaleLinear` and `d3.scaleBand`, and formatted via `d3.axisLeft` and `d3.axisBottom`. The code is written for D3 v5 within a React-ready HTML page.

Jjarvis

Update Pattern Trial

A bar chart displays monthly revenue and profit data from a JSON file, toggling between the two metrics every two seconds. Built with React and D3 v5, the visualization uses a band scale for months and linear scales for values, with axis transitions via `d3.transition()`. The update pattern joins data to SVG rectangles, animating height, position, and fill color as bars swap between tomato (revenue) and green (profit), while newly entered bars grow from the baseline.

Activity7_Q2

This area chart displays a company’s monthly revenue over time, using a red filled path to emphasize the trend. It loads data from a remote CSV file via `d3.csv`, parses the Revenue column as numbers, and renders an SVG with `d3.area`. The chart uses `d3.scaleBand` for the categorical month axis and `d3.scaleLinear` for the revenue scale, with `d3.axisBottom` and `d3.axisLeft` providing labeled axes for Month and Revenue.

YYeruva Snehith Reddy

Trial

This example visualizes monthly revenue and profit from a JSON dataset as grouped bar charts, with revenue in tomato-colored bars and profit in green. It uses D3 v5 scales (scaleBand, scaleLinear) to position and size rectangles within an SVG. Axis labels and a legend are manually added. Data is loaded asynchronously and parsed from strings to numbers.