Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart multiple lines | interractive Legend

✓ Published0🌍 Public
Xxuhuihui
Last edited Apr 6, 2022
Created on Apr 6, 2022

This visualization displays a week of temperature data for multiple cities, with each city represented as a distinct colored line on a time-series chart. A legend and the lines themselves are interactive; clicking on either isolates that city's data by dimming all other lines, while clicking again restores the full view. The chart is built using D3.js (v5) with SVG rendering, employing D3's `nest()` and `scaleOrdinal` for data grouping and color assignment, and the custom `colorLegend.js` component for the interactive legend.

AI-generated description

Click on Legend or paths to isolate the data!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart multiple lines | interractive Legend

This visualization displays a week of temperature readings for multiple cities, rendered as colored lines. The interactive legend allows users to click on a city name or the line itself to isolate that city’s data, while non-selected lines fade to 20% opacity. Built with D3 v5, the chart uses SVG for rendering, `nest()` to group data by city, `scaleTime()` and `scaleLinear()` for axes, and the provided `colorLegend` function to manage selection states via click handlers.

Jjydu359
97% match
Loading thumbnail…

Line Chart multiple lines | interractive Legend

This interactive visualization displays a week of temperature data for multiple cities using multiple lines. Users can click on legend items or line paths to isolate a specific city’s data, which reduces the opacity of other lines for focused comparison. Built with D3 v5, the code utilizes `scaleOrdinal` for color mapping, `nest` and `line` for path generation, and a custom `colorLegend` component with `setSelected` and `selected` for interactive state management. The SVG render includes axes with gridlines and hover effects on paths.

Vvladvaculin
94% match
Loading thumbnail…

Line Chart multiple lines | interractive Legend

This interactive visualization displays temperature readings for multiple cities over the course of a week as distinct colored line paths. Users can click either the color legend entries or the lines themselves to isolate or deselect a specific city, with non-selected paths dimming to 20% opacity. The line generator uses d3.curveBasis for smooth interpolation, while scaleTime and scaleLinear map timestamps and temperatures. The color legend is custom-built with circle and text elements, and the data comes from a CSV file loaded via d3.csv.

Ggoldluck
91% 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
91% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example displays one week of temperature data for cities worldwide, using a multi-line chart with a color legend. The visualization plots time on the x-axis and temperature on the y-axis for each city, with lines sorted by final value. It uses d3.csv to load data, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10 for color mapping, d3.line with curveBasis for smoothing, d3.nest for grouping, and d3.axisLeft/axisBottom for axes. Data comes from Data Canvas - Sense Your City, rendered as SVG with a multiply blend mode.

IIvan Ivanov
91% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This chart displays a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City, with each city represented by a differently colored line. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by city, and d3.line with curveBasis for smooth line generation. A custom colorLegend component renders the scale, while axis labels and a title complement the SVG rendering.

GGerasimos Katsagannis
90% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes one week of temperature data for cities worldwide, using D3 v5 to draw multiple smoothed line paths with a categorical color scale and an interactive color legend. The chart plots timestamp against temperature on linear and time-based axes, and sorts the city series by their final values using `d3.nest` and `d3.descending`. Data originates from the Data Canvas Sense Your City project, and the SVG rendering uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` APIs.

Bbstillword
90% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization plots temperature over time, using distinct colored lines for each city and a color legend for identification. It is rendered as an SVG using D3 v5, with the code employing `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.line`, and `d3.nest`. The `d3.axisLeft` and `d3.axisBottom` create labeled axes, while a custom `colorLegend` function generates the interactive legend.

AAremu Oluwagbamila (SMOG)
90% match