Advait Maduskar

@amaduskar·4 public vizzes

Stock price display

This interactive line chart displays Apple stock prices over time, with a color gradient from red to green indicating value changes. Users hover over the chart to see a tooltip showing the exact price at any point. The visualization uses D3.js v4 within a React framework, reading CSV data and rendering with SVG. It employs `d3.scaleTime`, `d3.line`, and a bisector for mouse interaction, with a transparent overlay rect capturing hover events to control the focus circle and text label.

Apr 25, 2022

Loading thumbnail…

Apple stock price display

A line chart displays Apple stock prices over time, using a red-to-green gradient to encode the value range from low to high. The chart includes axes for dates and price, plus an interactive tooltip that appears on mouseover, showing the precise price at the cursor position via a circle marker and text label. The visualization is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.bisector` for hover detection. Data comes from a CSV file loaded with `d3.csv`, and the SVG rendering includes a linear gradient defined with `linearGradient`.

Apr 24, 2022

Loading thumbnail…

Untitled

A dropdown menu lets the viewer select one of five technology companies—APPLE, IBM, MICROSOFT, SALESFORCE, or VISA—to draw a corresponding line chart of stock data over time. The chart uses an SVG path with a color from the `d3.schemeSet2` palette, and the line updates with a smooth transition animation when a new company is chosen. The data comes from a CSV file loaded via `d3.csv`. The implementation uses `d3.select`, `d3.scaleLinear`, `d3.line`, and the `transition` method for animation.

Apr 24, 2022

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

Apr 24, 2022