Temperature Visualization

100%

Temperature Visualization

✓ Published0🌍 Public

Last edited Sep 19, 2017

Created on Sep 18, 2017

This visualization plots Apple’s daily stock price as a line chart over time, using data loaded from a local CSV file. The SVG path encodes the closing price series across the sampled trading days, with axes for date and price. The example demonstrates a minimal D3 v4 data join and scale mapping, showing how raw tabular data can be transformed into a clean, readable time-series graphic.

AI-generated description

Part of the video course: D3.js in Motion.

This scatter plot shows scatter plot with time axis of volume of AAPL stock from Aug 13, 2012 to Aug 11, 2017 for every trading day. The data was collected from S&P 500 Stock Data of Kaggle and Yahoo Finance.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/3f2ff2e32652397de94d406460e240ce'>Scatter Plot with Time Axis</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Temperature Visualization

This visualization shows Apple’s daily stock price over roughly four months as a line chart, with the close price tracked across time from mid-August to late November 2012. The line captures both the overall upward trend in early September and the sharp decline in late October, illustrating volatility over the period. The chart is rendered with D3 v4 using SVG, reading data from a CSV file that includes date, open, high, low, close, and volume fields. While titled "Temperature Visualization," the visualization actually plots the closing price of AAPL stock, encoding time along the x-axis and price along the y-axis.

FFanYang715

89% 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

82% 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

80% match

Loading thumbnail…

Gist 6285771

This simple line chart tracks the daily closing price of AAPL stock from January 2012 to May 2012, with a data file storing date–price pairs. It uses D3’s SVG rendering, applying conventional margins, a time scale for the x-axis, a linear scale for the y-axis, and axis components. The line is drawn with d3.svg.line, while domains are computed with d3.extent. The chart demonstrates loading and parsing TSV data with d3.tsv and formatting dates with d3.time.format, offering a clean, compact example of D3’s core data-join and scales.

11wheel

79% match

Loading thumbnail…

D3.chart Boilerplate Example

A D3.chart boilerplate example displays Apple's stock price and 30-day average as two smooth lines over a time series, with a context area chart and a linked brush for zooming and panning the main chart. A bar chart of trading volume sits below, and the interface includes a legend with the date range. The code uses d3.scaleTime, d3.line with curveMonotoneX, d3.area, d3.brushX, and d3.axisBottom/axisLeft to render the SVG visualization, loading data from a local aapl.csv file.

深深度碎片

79% match

Loading thumbnail…

Stock price display - Apple

This example shows the historical stock price of Apple as a line chart, with a vertical gradient stroke transitioning from red (low values) to green (high values). It includes interactive hover functionality: moving the mouse over the chart reveals a black circle marker and a text label displaying the exact price at the nearest data point. The visualization is built using D3.js v4, leverages SVG for rendering, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for axes. Data is loaded from a CSV file containing date and price columns, and the chart uses a bisector for efficient nearest-point lookup during mouse movement.

TToly

79% match

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`.

AAdvait Maduskar

78% match

Loading thumbnail…

Apple Daily Price- Customizing Axes

This horizontal bar chart displays Apple Inc.’s daily stock price for selected days in 2019, using a bar length to represent price and a band scale for dates. Built with D3 v5, the SVG chart applies `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for ticks. The x-axis labels use `format('.3s')` to abbreviate numbers, rendering price values in thousands. Data is loaded from a CSV file, and the chart is drawn using SVG `rect` elements with a pink background and steelblue bars.

Rrangitit

78% match