Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published0🌍 Public
KKen Charles
Last edited Jun 11, 2021
Created on Jun 11, 2021

This chart shows daily temperature readings (in degrees Celsius) over one week for multiple cities around the world, with each city represented by a distinct colored line from the categorical color scale. The y-axis is labeled "Temperature" and the x-axis "Time," with cities ordered by their final temperature value. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `nest` to group data by city, and `line` with `curveBasis` to generate smooth paths rendered as SVG. Data originates from the Data Canvas - Sense Your City project, loaded as CSV.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data (in degrees Celsius) for cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a distinct colored line, with time on the x-axis and temperature on the y-axis, sorted by each city's final temperature reading. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line, d3.curveBasis, d3.nest, and d3.axisBottom/axisLeft to render the chart and its axes. A custom colorLegend function draws the categorical legend, and the SVG output includes styled grid lines and labels.

Jjwadh
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays the temperature in cities around the world over one week, using data from the Data Canvas - Sense Your City initiative. The visualization plots each city as a separate line, colored using a categorical color scale, with the x-axis representing time and the y-axis representing temperature in degrees Celsius. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the paths, and a custom `colorLegend` function for the legend. A title and axis labels are included, with the lines sorted by their final temperature value.

KKinjal-Goyani
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart shows one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City. Each city is represented by a smooth curved line, colored via an ordinal scale, with a legend positioned on the right. Built with D3 v5 in SVG, it uses `scaleTime`, `scaleLinear`, `line` with `curveBasis`, `nest` to group data by city, and `axisBottom`/`axisLeft` for axes. The chart sorts cities by their final temperature value, with axis gridlines and a title.

JJosh2903
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city color, respectively, while d3.line and d3.curveBasis generate smooth paths for each city's temperature trend. The chart includes axes with tick marks, a color legend, and a title, with the SVG rendered directly on the page.

Ddasari234
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart shows one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and cities to visual channels. Multiple city lines are rendered as SVG paths via d3.line with a curveBasis interpolation, sorted by their last temperature value, and accompanied by a custom color legend. Axes are drawn with d3.axisBottom and d3.axisLeft, with gridlines and labels styled through CSS.

Aangelathacker123
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature readings in Celsius for cities worldwide, using data from the Data Canvas - Sense Your City dataset. The chart plots timestamps on the x-axis against temperatures on the y-axis, with each city represented by a distinct colored line from the d3.schemeCategory10 palette. Built with d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, and a custom colorLegend module, it renders smooth curves via d3.line with curveBasis. A sorted legend and gridlined axes, created with d3.axisLeft and d3.axisBottom, complete the SVG output.

Rrpadron8
95% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented by a colored line, with a legend showing city names and a title above the chart. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city colors, while d3.line with curveBasis generates smooth paths. Nesting via d3.nest groups data by city, and the code includes custom axis labels and a reusable color legend component, all rendered as SVG.

Cchandanagandla
95% match
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
94% match