Multi-Line Time Series Plot

100%

Multi-Line Time Series Plot

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from Assignment 7 Multi-Line Time Series Plot

A multi-line time series plot tracks crime rates over time, using a steelblue line to show the trend. The visualization is built with d3.v6 and rendered as SVG, mapping the `Year` and `Crimes` columns from a CSV file. It uses `d3.scaleTime` and `d3.scaleLinear` to create the x and y axes, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Axis labels and a title are added as SVG text elements.

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…

Line Chart

This line chart displays the daily number of crimes over a 31-day period, with the x-axis mapping days and the y-axis mapping crime counts. The SVG rendering uses D3 v4, specifically `d3.scaleTime` and `d3.scaleLinear` for position encodings, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to both fields. The line is drawn in steelblue with rounded joins and caps, and the y-axis is labeled "Price ($)".

GGoomble

79% match

Loading thumbnail…

ICE 7

This line chart displays crime rates over time, sourced from a CSV file loaded via d3.csv. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick rendering, and d3.line with d3.curveBasis to draw the smoothed temperature-style path. The SVG rendering includes labeled axes and a title, with data points mapped through x and y scales. The dataset is fetched from a GitHub gist and parsed as numeric values for year and crime rate.

Kkakumanusreya

77% match

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays country crime indices as a line chart, using a bar-chart-style categorical X axis for countries and a linear Y axis for crime scores. Built with D3 v7, it loads data from a CSV file using `d3.csv`, applies a `scaleBand` for country positioning and `scaleLinear` for the crime index range, and draws the line with `d3.line()`. The SVG chart includes axes, labels, and a thick steel-blue stroke, rendered within a fixed 960×400 pixel canvas and styled with external CSS.

Bbhanuprasadk19

76% match

Loading thumbnail…

ICE 7

This visualization shows the crime rate over time as a smooth orange area chart, with red titles and purple axis labels. It uses D3 v5 to load CSV data from a GitHub gist, parse the year and crime rate values, and render an SVG. The chart employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and an `area` generator with `curveBasis` to create the filled line. Axis labels and a centered title are added manually, with tick marks extending across the plot for gridlines.

Kkakumanusreya

75% match

Loading thumbnail…

ICE 7

A combined line and area chart displays CrimeRate from 2010 to 2019, with the line emphasizing the trend and the area filling beneath it. The visualization uses D3 v5 with SVG rendering, employing `d3.line`, `d3.area`, and `curveBasis` for smooth interpolation, alongside `scaleLinear`, `axisBottom`, and `axisLeft`. The data is loaded via `d3.csv` from a GitHub gist, with the year and crime rate parsed as numeric values. Axis labels and gridlines are styled through CSS, and the chart is centered within a fixed-width SVG container.

Kkakumanusreya

75% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays crime indices across different countries, with each country plotted along the x-axis based on a date-converted value and crime index on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path with gridlines, axis labels, and a title. Data is loaded as CSV from a GitHub gist, parsed, and converted so country names become date objects, while crime indices are parsed as numbers. The chart is drawn with red strokes and styled via an external stylesheet.

NNikitha123171

74% match

Loading thumbnail…

Fork of Fork of Fork of D3.js Line Chart

This line chart displays the Crime Index for ten countries, using a categorical x-axis and a linear y-axis scaled to the maximum value in the dataset. The visualization is built with D3.js v7, employing `d3.csv` for data loading and `d3.scaleBand` and `d3.scaleLinear` for coordinate mappings. A single SVG path is drawn with `d3.line`, with the line rendered in steel blue and a stroke width of six pixels. The chart includes labeled axes, with the data sourced from the embedded CSV file.

Bbhanuprasadk19

74% match

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes crime indices for ten countries, with each country plotted along a categorical x-axis and its index value on a linear y-axis. The visualization uses D3.js v7, loading data from a local CSV file via `d3.csv`. The chart is rendered as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path with a thick steelblue stroke. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`, while custom CSS styles the axes and line.

Bbhanuprasadk19

74% match