line chart

100%

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This line chart shows the relationship between population and electricity consumption across major global cities, with each point representing a city and a smooth curve connecting them by ascending population. The visualization uses D3 v7 with SVG rendering and includes interactive hover tooltips displaying detailed city statistics. Data is loaded from a remote text file, parsed in-browser using `d3.csvParse`, then sorted and scaled with `d3.scaleLinear`. The chart applies `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveMonotoneX` for the path, and gridlines generated from the axis scales.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This area chart visualizes electricity consumption against population for major cities, with the data sorted by population to show a clear upward trend. The chart uses blue filled areas beneath a yellow line, with orange points providing interactive tooltips that display additional city metrics. Built with D3 v7, the visualization loads CSV data from a GitHub gist, applies data-cleaning regex operations, and uses `d3.area`, `d3.line`, and `d3.curveMonotoneX` for smooth rendering. It also features grid lines, axis labels, and SVG animation for tooltip transitions.

Sshreelasya.bezawada@gmail.com

88% match

Loading thumbnail…

line chart

This line chart visualizes global population trends from 1970 to 2022 by summing yearly population figures across all countries in the world_population.csv dataset. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` and `d3.autoType` for data loading, `d3.scaleLinear` for both axes, and `d3.line` with `curveMonotoneX` for the smoothed line path. Orange circles mark individual data points, with tooltips showing exact year and population values via appended `<title>` elements.

MMd Fahimul Kabir Chowdhury

78% match

Loading thumbnail…

Line Chart

This line chart visualizes world population over time by region, with each region drawn as a distinct colored line on an SVG canvas. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curveBasis, and `d3.nest` to group data. Population estimates from 1950–2014 and medium-variant projections from 2015–2100 come from UN datasets loaded via `d3.csv`. A color legend using `d3.scaleOrdinal` maps regions, and a vertical line marks the year 2021, with mouse interaction logging hovered years to the console.

BBKirst3

77% match

Loading thumbnail…

Electricity Consumption

This visualization displays electricity consumption over time as a line chart. The code loads CSV data from a GitHub repository, parses the year and consumption columns, and renders a time-series line using d3.scaleTime, d3.scaleLinear, and d3.line. The chart includes axes generated with d3.axisBottom and d3.axisLeft, styled with a steelblue stroke on an SVG element embedded directly in the body.

Aamulyareddykondru01@gmail.com

77% match

Loading thumbnail…

Temperature in multiple cities

This visualization shows population trends over time for multiple cities. A line chart displays each city’s population as a colored line, with a color legend identifying them. A vertical line marks the currently selected year, and moving the mouse across the chart updates that selection. The code builds the SVG using D3 v5, employing `d3.scaleOrdinal` with `schemeCategory10` for colors, `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveBasis` for smoothing, and `d3.mouse` for interaction. Data is loaded from a CSV file using `d3.csv`.

Ssafdarawan

76% match

Loading thumbnail…

linechart

This line chart visualizes world population trends from 2010 to 2020, with time on the x-axis and population count on the y-axis. The chart is rendered as an SVG using D3 v5, with the line path styled in violet and grid lines in green. The code imports components like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, and parses CSV data from a GitHub gist. Data values are formatted and axis labels are customized through D3’s `axis` and `text` APIs.

Vvaddepallinaveen

76% match

Loading thumbnail…

Population in Different Countries

This line chart shows one week of temperatures in cities around the world, using a multi-line layout where each city is a colored path. The visualization orders the lines by their final temperature value and includes a color legend for city identification. The code uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis, d3.nest, and d3.axisBottom/axisLeft, rendering SVG with a custom colorLegend function. Data originates from the Data Canvas - Sense Your City dataset.

Cceltic660

76% match

Loading thumbnail…

Temperature in multiple cities

This interactive line chart displays population trends for multiple countries over time, with a color-coded legend identifying each nation and a vertical line marking a user-selectable year. Built using D3 v5, it leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render smoothed paths. Data is loaded from UN population CSV files, and hovering over the chart updates the selected year to show values at that point.

JJacob van Lingen

76% match