Fork of A7 Line Chart

100%

Fork of A7 Line Chart

✓ Published0🌍 Public

Last edited Mar 19, 2024

Created on Mar 19, 2024

This example visualizes monthly wind speed measurements across multiple cities, with each city represented by a distinct colored line. The chart uses an ordinal color scale with a legend to distinguish the ten city categories. Built with D3 v6 and rendered as SVG, the visualization includes both lines connecting data points and circular markers for each measurement. The code employs `d3.group` to structure the data by city, `d3.scaleOrdinal` for color mapping, and `d3.line` for path generation. A hover effect changes the dot color to red, and axis labels identify the months and wind speed units.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

A7 Line Chart

This line chart displays the monthly average wind speeds for various cities in 2016, with each city represented by a distinct colored line and a circle marker at each data point. The visualization uses D3.js (v6) to load CSV data, group it by city with `d3.group`, and render lines with `d3.line` and scales from `d3.scaleLinear`. A color legend is created using the `d3-legend` library, and the SVG output includes axis labels for months and wind speed.

AAllen Ho

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

81% match

Loading thumbnail…

Line Chart

This line chart displays wind speed measurements across the months of 2016, with each data point marked by a red circle that turns blue on hover. The chart uses D3.js v6 with an SVG rendering approach, loading CSV data from a GitHub gist. It applies d3.scaleLinear for both axes, d3.line to generate the path, and d3.csv for data ingestion, while axis ticks are built with d3.axisBottom and d3.axisLeft.

AAllen Ho

81% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization shows a week of temperature readings across multiple global cities, using smooth curved lines to compare trends over time and a color legend to distinguish each city. The data comes from Data Canvas - Sense Your City, plotted on an SVG canvas with D3 v7. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.line` with `curveBasis` to generate the paths. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while a custom `colorLegend` function maps city names to colors.

DDhanraj Bhosale

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

79% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a D3 v5 line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas – Sense Your City. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are generated via `d3.line` with `d3.curveBasis`, while a custom `colorLegend` function handles the categorical legend. Data is loaded from a CSV, parsed with timestamps converted to `Date` objects, and nested by city using `d3.nest`.

Aabhimanyu-dhar

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

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

79% match