Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines

✓ Published2🌍 Public
AAkanksha
Last edited Mar 27, 2024
Created on Mar 19, 2024

This fork of a line chart with multiple lines visualizes yearly data across countries, using color-coded lines to show trends over time. The visualization displays the data through D3.js’s `scaleLinear`, `scaleOrdinal`, and `schemeDark2` for color mapping, with a custom `colorLegend` component. Lines are generated with the `line` function and `flatGroup` aggregates data by country. The chart includes axes via `axes` from `@curran/responsive-axes` and a semi-transparent inner rectangle background, with opacity applied to lines for readability.

AI-generated description

I referred to Corey's code to make few things work. His work - https://vizhub.com/python-monty/cyber-attacks-by-year-v3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, showing how temperature varies across the days of the year for multiple years. The chart uses multiple lines, one per year, with a color scale from the plasma interpolator to differentiate between years. The year 2024 is emphasized with a red, thicker line, while other years appear semi-transparent. The code leverages D3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` APIs, along with the `@curran/responsive-axes` library for axes, to render the visualization from the provided dataset.

Rreddysushma994@gmail.com
83% match
Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

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

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera
81% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, are rendered using SVG paths with a basis curve, mapping timestamps to a time scale and temperatures to a linear scale. The chart uses d3.nest, d3.scaleOrdinal, and d3.schemeCategory10, with axes generated by d3.axisBottom and d3.axisLeft. A color legend is added via a custom component, and lines are layered with mix-blend-mode for visual distinction.

HHanseul Lee
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 with Multiple Lines

A fork of a line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. The visualization uses d3.scaleTime and d3.scaleLinear axes with a d3.line generator and curveBasis to draw smooth paths, colored by city via d3.scaleOrdinal. A custom colorLegend component renders the categorical legend. The SVG is rendered with d3.nest to group data by city, and axes include tick marks and labels.

DDino
81% match
Loading thumbnail…

Fork of Fork of PIE CHART

This example visualizes country-level data over time as a multi-line chart, with each line representing a country’s values across a series of years. The chart is rendered in SVG using D3 v7, fetching data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with rotated x-axis labels for readability. Each country’s line is colored using `d3.schemeCategory10`.

Mmukundakrishna.r@gmail.com
80% match