Skip to main content
SimilarExport ZIP
100%

Temperature in multiple cities Line Chart

✓ Published1🌍 Public
HHasideluxe
Last edited Aug 3, 2020
Created on Aug 3, 2020

A line chart displays a week of temperature readings across multiple cities, with each city rendered as a distinct colored path sorted by its final temperature. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.nest to group by city, and d3.line with curveBasis for smooth paths. A custom colorLegend component generates the ordinal color scale legend, while SVG rendering includes labeled axes and a title.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This example shows a week of temperature readings for multiple cities, with each city represented as a separate colored line plotted over time. The chart includes a color legend, labeled axes, and a title, with lines sorted by their final temperature values. It uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `line` with `curveBasis` for path generation, and `nest` to group data by city. Temperature data is loaded from a CSV file and rendered as an SVG with axis and legend components.

Ssameer1986
92% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, using color to distinguish each city's time series. The visualization is rendered as an SVG using D3 v5, with a time-based x-axis and linear temperature scale. The code applies a basis curve to smooth the lines, nests the data by city, and includes a categorical color legend. Data is loaded from a CSV of global temperature measurements.

KKarkG
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line from the d3.schemeCategory10 scale. The visualization uses d3.nest() to group data by city and d3.line() with curveBasis to create smooth paths, while d3.scaleTime() and d3.scaleLinear() map timestamps and temperatures to the SVG canvas. A custom colorLegend module renders the city labels, and the chart includes gridlines from axisBottom and axisLeft with tick marks. The data comes from a CSV file containing hourly temperature observations.

MMounikaBeerelly
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings in degrees Celsius across multiple global cities, with each city represented by a colored line. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature axes, while d3.nest groups the data by city for individual line paths generated with d3.line and curveBasis. A custom colorLegend component renders the categorical color scale using d3.scaleOrdinal. The data comes from Data Canvas - Sense Your City, and the SVG rendering includes gridlines, axis labels, and a title.

Aajaykumar2014
91% match
Loading thumbnail…

Line chart with multiple lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line. The visualization uses D3 v5 with SVG rendering to draw the lines, employing `d3.csv` for data loading, `d3.nest` to group readings by city, and `d3.line` with `curveBasis` for smooth paths. Temperature values are converted from Celsius to Fahrenheit before plotting. A color legend, axis labels, and a title accompany the chart, with gridlines and semi-transparent blended line strokes enhancing readability.

Jjlongwellchc
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis generates the smoothed paths. Data is nested by city using d3.nest and sorted by final value. The chart includes labeled axes and a title, rendered as SVG with elements created via d3 selections.

BBhojarajHG
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature readings for multiple cities, with each city represented by a colored line that conveys its temperature trend over time. A legend identifies the color associated with each city. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group the CSV data by city. d3.scaleOrdinal with schemeCategory10 assigns colors, while custom legend and axis components are built using SVG.

ZZ-Richard
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding color legend. The visualization uses d3.csv to load the dataset, d3.nest to group records by city, and d3.line with curveBasis to generate smooth paths. Axes are created with d3.axisBottom and d3.axisLeft, while the ordinal color scale uses d3.schemeCategory10. The chart renders as SVG with grid lines and a simplified custom legend.

Zzhangfa
91% match