Fork of Scatter Plot Simple

100%

Fork of Scatter Plot Simple

✓ Published1🌍 Public

Last edited Feb 14, 2023

Created on Feb 13, 2023

This scatter plot displays daily closing prices for Apple and Google stocks from November and December 2022, with dates on the x-axis and closing prices on the y-axis. The axes are hidden, and the plot uses color-coded points to distinguish between the two companies. The visualization is built with d3.v7, using `scaleLinear` for position scales and `scaleOrdinal` with `schemeSet1` for coloring, while data is fetched from a CSV file and rendered in full-screen SVG.

AI-generated description

A scatter plot of 2022 Daily S&P 500 Stocks Data with Date on the X Axis and Closing Price on Y axis. Here axes are not displayed. A subset of stocks data consisiting of Apple and Google stocks for the month of November and December were considered for the plot - https://gist.githubusercontent.com/kratikashetty/ce2fc2c3b5797665339317ce85d582b1/raw/8e538b683be93c18541a2872fe879857341660dd/sp500_stocks_2022_subset.csv

Referred https://vizhub.com/surferla25/9d00028e08e84f9190bbcf8421151eef?edit=files&file=index.html to handle margins and for the color fill.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot Iteration 2

This scatter plot shows daily closing prices for Apple and Google stocks from November and December 2022, with date on the x-axis and closing price on the y-axis. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeSet1 to color-code points by stock symbol. The data comes from a CSV file of S&P 500 stock data, parsed with d3.csvParse. Axes and labels are rendered using d3.axisBottom, d3.axisLeft, and custom utility functions.

Kkratikashetty1102@gmail.com

92% match

Loading thumbnail…

Scatter Plot Iteration 3

This scatter plot displays closing prices for Apple and Google stocks from November–December 2022, with date on the x-axis and closing price on the y-axis. It uses d3.scaleTime and d3.scaleLinear for the axes, while d3.scaleOrdinal assigns distinct colors to each company. A color legend, implemented via the custom colorLegend function, identifies the two stocks. Data is loaded from a CSV subset of S&P 500 daily records and rendered as circles using D3 v7 selections.

Kkratikashetty1102@gmail.com

91% match

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart tracking the daily closing price of Google stock over time. The visualization uses a smooth natural curve to connect price points, with circular markers at each data value and interactive tooltips that display the date when hovered. Built with React and D3 v5, the chart renders as SVG and uses `scaleTime` and `scaleLinear` for axes, while `d3.line` with `curveNatural` generates the path. Data is loaded from a CSV file via `d3.csv` and styled with a teal color scheme and Poppins font.

Nnghosh319

74% match

Loading thumbnail…

Fork of Apple stock price display

This fork of the Apple stock price display visualizes historical stock values over time using an SVG line chart. A green-to-red linear gradient colors the line based on price range, and a hover interaction reveals a labeled circle showing the exact price at the cursor position. The visualization uses d3.v4 with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.bisector for mouse tracking. Data is loaded from a CSV file hosted on GitHub, and the chart updates dynamically via d3’s event handlers.

AAndrej38995

73% match

Loading thumbnail…

Fork of D3 Line Chart - 11641166

This example visualizes Apple Inc.’s average annual stock price from 2000 to 2023 as a single line chart. It uses d3.line, d3.scaleTime, and d3.scaleLinear to map years and prices, with axes generated via d3.axisBottom and d3.axisLeft. The SVG renders gridlines, labeled axes, and a purple stroke path. Data is loaded from a CSV using d3.csv, and styled with custom CSS classes.

JJasvitha Allamsetty

72% match

Loading thumbnail…

Gist 6285682

This simple line chart shows the daily closing price of Apple (AAPL) stock from late 2011 to mid-2012, with each trading day plotted in chronological order. The visualization uses a conventional margin layout with axes rendered via SVG, leveraging D3's time scale for the x-axis and a linear scale for price on the y-axis. The line is drawn using d3.svg.line, with the data loaded from a TSV file and parsed using d3.tsv and d3.time.format. The chart uses d3.extent to automatically compute the domain from the date and price values, and displays axes with d3.svg.axis for clear temporal and price reference. The result is a clean, minimal line chart showing the stock's trajectory over the period, demonstrating D3's data-joining and scalable vector graphics capabilities in a straightforward time-series context.

11wheel

72% match

Loading thumbnail…

Fork of Fork of Stock price display

This interactive line chart displays Apple stock prices over time, spanning from 1977 through 1982. The visualization uses a green-to-red vertical gradient to encode price levels, with higher values appearing greener and lower values redder. Users can hover over the chart to see a tooltip with the exact price at any date, indicated by a black circular marker that tracks the cursor along the line. The chart is built with D3.js v4 and React, reading data from a remote CSV file, and renders as an SVG with a bisector-based search to find the closest data point to the mouse position.

Ssitaramchallapalli

72% match