Line Chart multiple lines | interractive Legend

100%

Line Chart multiple lines | interractive Legend

✓ Published4🌍 Public

Last edited Sep 10, 2019

Created on Sep 10, 2019

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.

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

94% 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

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

94% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line over time. The visualization includes axes with labels, a legend showing city names, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest` to group data by city, and a `line` generator with `curveBasis` for smooth paths. Data comes from Data Canvas - Sense Your City, rendered as SVG with custom axis styling and a color legend component.

Rrintisch

90% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities, with each city represented by a colored, smoothed line. The visualization uses D3 v5's `nest()` to group data by city and `scaleTime`/`scaleLinear` for axes. A custom `colorLegend` component renders the categorical color scale, while `axisBottom` and `axisLeft` include gridlines. Data comes from a CSV file loaded via `csv()`, and the SVG rendering applies a multiply blend mode to overlapping lines.

Aannadehtiarova

89% 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

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a colored line and a corresponding color legend. The visualization uses D3 v5’s scaleTime, scaleLinear, and line generators with a curveBasis to create smooth paths, while nest() groups data by city and sorts lines by their final temperature value. SVG rendering handles the axes, gridlines, and labels, with the data loaded from a CSV file via d3.csv.

Vvic126

89% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov

89% match