Fork of Assignment 7 Multi-Line Time Series Plot

100%

Fork of Assignment 7 Multi-Line Time Series Plot

✓ Published0🌍 Public

Last edited Apr 9, 2024

Created on Apr 9, 2024

Forked from Assignment 7 Multi-Line Time Series Plot

This example shows a multi-line time series of average prices for four gourd varieties (bottle, bitter, smooth, and snake gourd) in Nepal, with each commodity rendered as a distinct colored line over time. The chart uses d3.csv to load data from a GitHub raw CSV file, d3.group to organize the data by commodity, and d3.legendColor to display a color legend. Axes are drawn with d3.axisBottom and d3.axisLeft, while the lines are generated using d3.line within an SVG rendering.

AI-generated description

CS 360 Assignment 7 Time Series With

Annie Huynh

CSV URL:https://raw.githubusercontent.com/Ahuynh111/gist-practice/main/fvPrices.csv

Note: Different data set from previous assignments

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 7 Multi-Line Time Series Plot

This multi-line time series plot shows the average prices of four gourd varieties—bottle, bitter, smooth, and snake gourd—in Nepal over time, with each commodity distinguished by color. The visualization first filters the CSV data to these four categories, then groups the records by commodity using `d3.group`. It renders separate SVG paths via the `d3.line` generator, with a time-scaled x-axis and a linear y-axis for price in NPR. A color legend, created with the `d3-legend` library’s `legendColor` function, identifies each line, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data comes from a remote CSV file, and the chart is drawn entirely with SVG.

Aahuynh8@dons.usfca.edu

93% match

Loading thumbnail…

ice 7 Line Chart For covid

This line chart shows the average prices of four gourd varieties—bottle gourd, bitter gourd, smooth gourd, and snake gourd—over time in Nepal, with each commodity represented by a distinct colored line. The visualization uses a time-series layout with a date-based x-axis and a price axis in NPR, rendered as an SVG via D3 v6. The code loads JSON data, filters it to include only the four gourd types, and groups it by commodity using `d3.group`. It employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with the `schemeTableau10` color scheme, while the `d3.legendColor` API generates a vertical legend.

MM Hema

85% match

Loading thumbnail…

Fork of Assignment 7 Multi-Line Time Series Plot

This fork of Assignment 7 displays a multi-line time series plot using D3 v6 with SVG rendering. The visualization plots fruit and vegetable price data from an external CSV URL over time, with each line representing a different product category. The code sets up a 600x600 SVG canvas with specified margins, uses `d3.csv` to load the dataset from a GitHub raw URL, and incorporates the d3-legend library for potential legend functionality. The implementation translates the main graph group within the SVG and positions it with explicit coordinates.

NNita

80% match

Loading thumbnail…

Final Project Time Scatter Plot

This scatter plot visualizes the weighted average price of barley, corn, oats, and sorghum over time, with each crop colored using a Tableau10 ordinal scale and a d3-legend legend. The visualization loads CSV data from a GitHub repository, groups it by crop type, and uses d3.scaleTime and d3.scaleLinear for the x- and y-axes. Circles are rendered via SVG with d3.csv, d3.group, and d3.extent, while axes and legends are generated using d3.axisBottom, d3.axisLeft, and d3.legendColor.

Aahuynh8@dons.usfca.edu

73% match

Loading thumbnail…

Multi-line graph 2 with v5: Colours

This example displays monthly stock prices for Microsoft, Amazon, and IBM as a multi-line graph, with each line assigned a distinct color from the d3.schemeCategory10 scale. The code uses d3.csv to load the data, d3.nest to group entries by symbol, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths. The SVG canvas is built with D3 v5, and axes are added via d3.axisBottom and d3.axisLeft. It is the second in a series demonstrating multi-line graph techniques.

Dd3noob

72% match

Loading thumbnail…

Multi-line graph 3 with v4: Legend

This example displays multiple stock price time series in a single SVG line chart, using D3 v4 to plot data for Microsoft, Amazon, and IBM from January 2000 through March 2010. The visualization distinguishes each company’s line with a categorical color from `d3.schemeCategory10` and adds an automatically generated legend, positioning text labels evenly across the chart’s width. The data, loaded from a CSV file, is parsed with `d3.timeParse` and nested by symbol using `d3.nest` to create separate lines. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`.

Dd3noob

72% match

Loading thumbnail…

Assignment 7 Heat Map with Tooltips

This heat map visualizes average monthly prices for four leafy greens—spinach, cress, mustard, and fennel—using a sequential green color scale to encode price levels, with a d3-legend color bar and interactive tooltips that display exact prices on hover. The visualization is built with D3 v6, using SVG rendering and scales such as `d3.scaleBand` for the x (date) and y (commodity) axes, while `d3.scaleSequential` with `d3.interpolateBuGn` drives the color encoding. Data is loaded from a CSV file via `d3.csv`, filtered to include only the specified commodities, and rendered as rects with hover events for tooltip feedback.

Aahuynh8@dons.usfca.edu

72% match

Loading thumbnail…

[A7] (Small Multiples of Lines Chart with a Color Legend)

This example uses small multiples to display the Consumer Price Index (CPI) of four grains—Corn, Rice, Rye, and Wheat—from 2000 to 2015, with each grain in its own line chart. A color legend identifies each grain’s stroke color. The code loads CSV data via `d3.csv`, renders SVG line charts using `d3.line` and `d3.axisBottom`, and builds the legend with `d3.legendColor` from the d3-legend library.

Cctan13@dons.usfca.edu

72% match