Skip to main content
SimilarExport ZIP
100%

Task_9_Question_2

✓ Published0🌍 Public
Jjordanwolfe2@my.untdallas.edu
Last edited Apr 24, 2024
Created on Apr 24, 2024
Forked from Task_9_Question_1

This area chart displays the closing price of Google stock (GOOGL) over time, with the area under the line filled in steel blue. The visualization uses D3 v7 with an SVG rendering approach. The code loads CSV data from a GitHub repository using `d3.csv`, parses dates with `d3.timeParse`, and constructs the area with `d3.area()`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while scales are set with `d3.scaleTime` and `d3.scaleLinear`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Area Chart

This area chart visualizes Google's monthly closing stock prices. The D3.js v7 code loads data from a CSV file via UNPKG and uses the `csv()` function to parse it. The visualization employs `scaleTime` and `scaleLinear` for the axes, and the `area()` generator with a `curveBasis` curve to create the smooth, filled area path. The SVG rendering includes styled tick marks, axis labels, and a title, all formatted with `timeFormat` and CSS.

SSanchay
81% match
Loading thumbnail…

Line Chart with label

A step-shaped line chart displays Google stock closing prices (GOOGL) from March 2016 to March 2021, with a hover tooltip showing the exact price and date. The visualization uses React with SVG rendering, relying on d3.scaleTime and d3.scaleLinear for axes, d3.line with curveStep for the path, and d3.bisector for nearest-point lookup. Interactive tooltips are implemented through React state and mouse events, while the multiFormat time axis adapts its tick labels based on date granularity. Data loads asynchronously via d3.csv from a remote gist.

RRajat Dangat
80% match
Loading thumbnail…

Task9_Q2

This area chart displays stock prices over time, with the x-axis representing years and the y-axis representing stock price values. The visualization uses a filled area path with a light purple fill and a green stroke to encode the data trend. The code relies on D3 v4’s `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and axis functions to render the SVG. Data is loaded from a CSV file hosted on GitHub, and the chart is drawn within an SVG container.

Jjyothirmai318@gmail.com
78% match
Loading thumbnail…

area_chart_activity_9

This area chart shows the daily closing price of a stock over time, with a light green filled region beneath a green line, both scaled to fit the SVG canvas. The chart includes a labeled x-axis for dates and y-axis for price in dollars, plus a bold title. The visualization uses D3 v4 with `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, reading tab-separated time-series data from a remote CSV file. The line uses `d3.curveLinear` to connect data points without smoothing.

Vvishnupriyapalagiri@gmail.com
76% match
Loading thumbnail…

Question2 Area Chart

This example visualizes stock price trends over time using a filled area chart. The area is drawn in a semi-transparent steel blue, with price on the vertical axis and date on the horizontal axis, where the x-axis labels are rotated for readability. The chart is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is fetched asynchronously from a remote JSON file containing stock price records.

VVijay Sheru
75% match
Loading thumbnail…

Ice 7 area chart

This area chart visualizes 10 years of Google stock prices, with the x-axis encoding years and the y-axis encoding stock values. The chart uses D3 v5 within a React framework, rendering as an SVG. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `curveBasis` to draw the filled region beneath a smoothed line. Data is loaded from a CSV via `d3.csv`, with axes labeled and ticks formatted using `d3.format`.

Llikith1266
75% match
Loading thumbnail…

Line Chart with Axis Tooltips

This example shows a line chart of Google stock data, tracking daily closing prices over time. It uses a React-based SVG visualization with D3 scales for mapping data to coordinates. The chart features interactive axis tooltips that appear on mouse movement, displaying detailed date and price information. The code implements custom tooltip paths for both axes, uses d3.bisector for data lookup, and includes a multi-format time formatter for adaptive tick labels. The data source is a CSV file containing five years of historical stock data for GOOGL.

RRajat Dangat
75% match
Loading thumbnail…

Assignment 7 - Question 2

This example shows a time-series area chart of a stock’s closing price, with a shaded region beneath a line plot to emphasize price levels over time. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and uses `d3.area` and `d3.line` generators to produce SVG paths. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while scales (`d3.scaleTime`, `d3.scaleLinear`) map data to chart dimensions. The chart includes a title and axis labels, with an error message displayed if data loading fails.

MMohammed Abdul Mannan
74% match