Multiline

100%

✓ Published1🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

Forked from Sequential Color Scale bar chart

This interactive multi-line chart shows annual average temperatures across four continents (North America, Europe, Asia, Africa) from 2010 to 2019. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` to generate the SVG paths. A `d3.schemeSet2` color palette distinguishes each series, with a legend rendered as colored circles and labels. Data comes from the local `global_temperature.csv` file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-line chart

This multi-line chart displays a week of global temperature readings across multiple cities, using color-coded lines to distinguish each location. The visualization is built with React and D3 v5, rendering SVG paths with smooth curves via `d3.line` and `curveBasis`. The data, loaded from a CSV file, is processed with `d3.nest`, while axes and scales are created using `d3.axisLeft`, `d3.axisBottom`, `scaleTime`, and `scaleLinear`. A custom color legend, driven by `scaleOrdinal` and `schemeCategory10`, animates with `transition().duration(1000)`.

TTural Novruzov

78% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart shows the daily average temperatures in New York, San Francisco, and Austin over one year, with each city’s values plotted as a separate colored line and labeled with its name. The data is loaded from a TSV file using `d3.tsv`, parsed with `d3.timeParse`, and encoded with `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` using `d3.schemeCategory10`. Lines are drawn with `d3.line`, while axes are rendered via `d3.axisBottom` and `d3.axisRight`, and the SVG also includes small circles for each data point plus text annotations showing the temperature extremes.

GGoomble

78% match

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays city temperature trends over time as a multi-series line chart titled “Temp Around the World.” It plots temperature readings (y-axis) against timestamps (x-axis) for multiple cities, with each city distinguished by color from a categorical color scale. Built with D3 v5, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.lineGenerator` with `d3.curveBasis` for smoothed paths, `d3.nest` to group data by city, and a custom legend component. The interactive SVG renders the data from a CSV file sourced from data-canvas-sense-your-city-one-week.

CCarloGato

78% match

Loading thumbnail…

MULTILINE CHART

This multiline chart displays one week of temperature data across multiple global cities, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and city colors, while d3.nest groups readings by city and d3.line with curveBasis draws smoothed paths. An interactive color legend, built with a custom colorLegend function, identifies each city. The SVG rendering includes responsive axes with grid lines, and stroke blending via mix-blend-mode: multiply enhances line overlap.

Ccocktaildata

77% match

Loading thumbnail…

Global Temperature

This visualization shows the change in global, Northern Hemisphere, and Southern Hemisphere temperatures from 1880 to 2014, with each time series as a separate line. A color legend identifies the three regions. Built with D3 v5, it loads CSV data and uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` with `curveBasis` generates the paths. The chart renders as SVG, with axes and line styling defined in CSS.

Gglitched-potato

77% match

Loading thumbnail…

Multi-line chart

A multi-line chart displays a week of worldwide temperature readings per city, with each city’s time series drawn as a smooth basis curve. The visualization uses React to render SVG elements, while D3 v5 handles scales, axes, and the `d3.nest()` grouping of data by city. Animated color legend circles appear via a custom `colourLegend` component, and the chart applies a categorical color scale with semi-transparent paths for overlapping lines. Temperature data is loaded from a remote CSV file.

AAnkit

77% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over the course of a year, with each city encoded as a colored line. The x-axis represents time using d3.time.scale, while the y-axis uses a linear scale for temperature values. Colors are assigned via d3.scale.category10, and the data is loaded from a TSV file using d3.tsv. The chart applies conventional margins, computes domains with d3.extent, d3.min, and d3.max, and renders axes and lines using d3.svg.axis and d3.svg.line. The visualization compares seasonal temperature patterns across the three cities, highlighting relative warmth and variation throughout the year.

EEleonore9

77% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, using color to distinguish each city's trend. The visualization encodes dates on the x-axis via `d3.time.scale` and temperatures on the y-axis via `d3.scale.linear`, with `d3.svg.axis` rendering the axes. Data is loaded from a TSV file using `d3.tsv`, and each city’s line is drawn with `d3.svg.line`, colored by `d3.scale.category10`. The chart uses conventional margins and an SVG rendering approach, with city labels placed at the final data point.

CCdcole

77% match