Skip to main content
SimilarExport ZIP
100%

Line Chart multiple lines | interractive Legend

✓ Published0🌍 Public
Ggoldluck
Last edited Apr 6, 2020
Created on Apr 6, 2020

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.

AI-generated description

Click on Legend or paths to isolate the data!

MIT Licensed

Similar vizzes

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

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

Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over a week, with each city represented by a colored line and a corresponding legend. The chart uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map time, temperature, and city names, while d3.line with curveBasis smooths the paths. Data is loaded via d3.csv from an external dataset, and the SVG is rendered with axes, grid lines, and labels styled through CSS.

NNkwachi Abel
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays one week of temperature readings for cities worldwide, with each city represented by a smooth, semi-transparent line. The chart uses d3.line with curveBasis to generate paths, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal with schemeCategory10 for colors. A custom color legend uses exported functions from colorLegend.js. Data comes from the Data Canvas - Sense Your City dataset, loaded via d3.csv, with nested grouping via d3.nest to separate city series.

Hhuankoh
90% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays temperature readings from multiple cities over a one-week period, with each city represented by a distinct colored line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. A custom `colorLegend` component renders ordinal color categories, while axis labels and a title annotate the SVG output. The data is loaded from a CSV hosted on VizHub.

Ffahmijaafar
90% match