Skip to main content
SimilarExport ZIP
100%

Fork of Line chart

✓ Published0🌍 Public
Vvidhyanamini
Last edited Mar 26, 2022
Created on Mar 26, 2022

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

AI-generated description

https://raw.githubusercontent.com/teohangxanh/5320/main/ICE-7/Fake%20temperature.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature readings in Celsius for multiple cities, with lines sorted by their final value and distinguished by color from a categorical scale. The visualization includes a title, labeled axes, a color legend, and a grid created by axis tick marks. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line` with `curveBasis`, and `nest` to group data by city, rendering as SVG. Temperature data originates from the Data Canvas - Sense Your City dataset.

Ppurplemaestro
86% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a D3 v5 line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas – Sense Your City. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are generated via `d3.line` with `d3.curveBasis`, while a custom `colorLegend` function handles the categorical legend. Data is loaded from a CSV, parsed with timestamps converted to `Date` objects, and nested by city using `d3.nest`.

Aabhimanyu-dhar
86% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart displays a week of temperature data from cities around the world, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render multiple lines in SVG, with each line representing a city. The code constructs time and linear scales for the axes, and applies a curve basis smoothing to the line paths. It also includes a custom color legend component and sorts the city lines in descending order based on their final temperature value.

DDaniel Tkach
85% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line plotted against time and temperature axes. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10 to map data values, while d3.line with curveBasis generates the smoothed paths. A custom colorLegend displays the city names, and the data comes from the Data Canvas - Sense Your City project, loaded from a CSV file. The SVG rendering includes axis labels, grid lines, and a title, with the line paths styled using mix-blend-mode for visual distinction.

Bbindhureddy98
85% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart visualizes daily temperatures in Celsius across multiple cities over one week, with each city represented by a distinct colored line. The data originates from the Data Canvas - Sense Your City project, loaded via `d3.csv`. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping, with `d3.line` and `curveBasis` to generate smooth paths. A legend, built using a custom `colorLegend` function, identifies city names, while axis labels and a title are added as SVG text.

SSampras Dsouza
85% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

PPiotr Paszek
85% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature data for cities around the world, with each city represented by a colored line across a time axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map timestamps, temperature values, and city names to visual channels. Lines are drawn with `d3.line` and `curveBasis`, while an axis with gridlines and a custom `colorLegend` function display scales and labels. The data, sourced from Data Canvas - Sense Your City, is loaded via `d3.csv` and rendered as SVG.

PPiotr Paszek
85% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.scaleTime and d3.scaleLinear axes with a d3.line generator and curveBasis to draw smooth paths, colored by city via d3.scaleOrdinal. A custom colorLegend component renders the categorical legend. The SVG is rendered with d3.nest to group data by city, and axes include tick marks and labels.

DDino
85% match