Capacity Constrained Point Distribution on Data (line chart)

Fork of D3 Area Chart - 11641166

This visualization presents Apple Inc.'s average stock price from 2000 to 2023 using a combined line and area chart. The SVG rendering uses D3 v7 to load CSV data, which is parsed and scaled with `scaleTime` for the X-axis and `scaleLinear` for the Y-axis. Grid lines are generated via `axisBottom` and `axisLeft`, while the data is drawn using `d3.line()` and `d3.area()` generators. The area chart is filled with a light blue color, and the line appears as a thick dark stroke, with axis labels and rotated Y-axis text enhancing readability.

JJasvitha Allamsetty

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

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

Capacity Constrained Point Distributions

Animated Voronoi diagrams partition a canvas into colored cells, each containing a cluster of small points. The algorithm iteratively balances point distributions by swapping points between neighboring cells until a capacity constraint is met. This implementation uses `d3.voronoi` for cell computation, `d3.scan` for efficient candidate selection, and `d3.transition` to fade cell fills once stabilized. The process shows how points redistribute across regions over time.

PPhilippe Rivière

D3 Area Chart - 11641166

This area chart displays Apple Inc.'s average stock price from 2000 to 2023, with a line overlaid on a light blue filled area to emphasize the trend over time. The visualization is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` and `d3.line` for the shapes, and `d3.csv` to load historical stock data from a GitHub gist. Grid lines and axis labels enhance readability, while the SVG rendering shows a bold black line and a horizontal bottom line.

SSuresh John Wesly

Yyellahemalatha@gmail.com

Area chart Assignment2

This area chart visualizes stock price predictions for Apple over time, with the month on the x-axis and the opening dollar price on the y-axis. The chart combines a smooth line and a semi-transparent filled area beneath it, both generated using d3.line() and d3.area() with curveBasis interpolation. The SVG rendering uses d3.scaleTime and d3.scaleLinear for axes, with axis labels styled via CSS. Data is loaded from a CSV file using d3.csv, and the chart includes custom tick formatting for the time and value axes.

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

Line Chart

This line chart visualizes the daily closing price of AAPL stock from late 2011 to mid-2012 using a clean SVG line plot. The data is loaded from a TSV file via `d3.tsv`, with dates parsed by `d3.time.format` and encoded along a time-scaled x-axis, while a linear scale maps price on the y-axis. The chart computes its domains with `d3.extent` and renders axes with `d3.svg.axis`. The single line is drawn using `d3.svg.line`, with smooth transitions between points. Standard margins frame the visualization, and the axis labels and tick marks provide clear context. Animated transitions emphasize the line’s trajectory over time, demonstrating core D3 patterns for time-series data.

CConorAspell