Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart multiple lines | interractive Legend

✓ Published0🌍 Public
Jjydu359
Last edited Mar 19, 2022
Created on Mar 19, 2022

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.

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 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.

Xxuhuihui
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…

Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data from cities worldwide as multiple smooth, overlapping lines, with a color legend identifying each city. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and a custom `colorLegend` component. The SVG rendering includes gridlines, labeled axes, and a title. Data originates from the Data Canvas - Sense Your City dataset, loaded via `csv` and processed into JavaScript `Date` and numeric values.

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

Fork of Line Chart with Multiple Lines

This line chart visualizes a week of temperature data from cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses D3 v5 to render multiple smoothed lines, one per city, with a color-coded legend. It employs `scaleTime` and `scaleLinear` for axes, `nest` to group data by city, and `curveBasis` for line smoothing. The SVG rendering includes a title, axis labels, and a custom color legend, with city lines sorted by their final temperature values.

JJspring42
90% match
Loading thumbnail…

Fork of Fork of Fork of Line Chart with Multiple Lines

This visualization displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis to draw smoothed temperature trends, and d3.scaleOrdinal with schemeCategory10 to color each city. A custom colorLegend function renders interactive circles and labels, while d3.nest groups data by city and sorting orders lines by final temperature. SVG rendering and d3.axisBottom/axisLeft provide a complete multi-line comparison.

Jjwadh
90% match