Skip to main content
SimilarExport ZIP
100%

Time Series Visualization - Search by Country

✓ Published0🌍 Public
Ssrikkanth05
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This interactive visualization displays life expectancy trends from 1960 to 2016 for a user-selected country. The code loads CSV data from a GitHub gist via `d3.csv`, filters rows by matching the entered country name against the 'Country Name' column, and renders a line chart using `d3.line` with `d3.scaleLinear` for the x and y axes. A custom tooltip built with D3 pointer events reveals the precise year and life expectancy value as the user moves over the SVG path.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Spiral Graph

This interactive example generates a spiral graph comparing population and life expectancy trends for a user-selected country. After entering a country name, the code fetches World Bank CSV data from two GitHub gists using `d3.csv` and `Promise.all`. It renders two smoothed cardinal curves over time, with population in steel blue and life expectancy in orange, using distinct left and right y-axes. The visualization is built with D3 v7 and SVG, demonstrating data loading, merging, and custom chart construction.

Ssrikkanth05
81% match
Loading thumbnail…

7q3

This example visualizes life expectancy across countries as a line chart, with each country plotted along the horizontal axis and life expectancy on the vertical axis, which is fixed between 60 and 90 years. The chart is rendered as an SVG using D3 v7, fetching CSV data from a GitHub gist. The code uses `d3.csvParse` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.line` to draw the path. Axis labels are rotated for readability, and the line is styled in steelblue.

Kktvgs25@gmail.com
77% match
Loading thumbnail…

Combined Bar Chart

This sample presents a dynamic, user-driven combined bar chart visualization of life expectancy and population data for ten selectable countries. Users input country names via an HTML form, and the visualization fetches data from external CSV URLs using `d3.csv`, merging the datasets by country. The chart is rendered as an animated SVG using D3 v7, with a dual y-axis scale to accommodate the different measurement units. Selecting a country updates the visualization, which draws each country's data as bar glyphs that animate over time to show changes across multiple years.

Ssrikkanth05
77% match
Loading thumbnail…

Loading CSV Data with D3

This example loads a CSV dataset of country statistics and renders a bar chart of life expectancy using D3. The bars are sorted in descending order by life expectancy, with each rectangle’s width proportional to the value from the `Lifeexpectancyatbirth` column. The visualization uses `d3.csv` for data parsing, `d3.select` to build the SVG, and `.data()` with `rects` to create the graphical marks. The CSV file includes country names and numerical indicators, and a tooltip on each bar shows the country and its life expectancy.

LLTymn
77% match
Loading thumbnail…

No6

A horizontal bar chart displays life expectancy for each country, sorted in descending order, using a turquoise background and white SVG canvas. The bars are drawn as rectangles, with width proportional to the life expectancy value from the CSV data. Built with D3 v3, the code uses `d3.csv` to load `Countries3(OLD).csv` and `d3.descending` to sort rows before appending rects to the SVG via `selectAll` and `enter`. Each bar includes a `title` tooltip showing the country name and its life expectancy.

LLTymn
74% match
Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones
74% match
Loading thumbnail…

Scatterplot

A scatterplot shows the relationship between life expectancy at birth and unemployment rate for countries, with each circle representing a country and a tooltip revealing its name and exact values. The visualization animates circles from off-screen to their x-axis positions sorted by life expectancy, using d3.csv to load data from Countries.csv. It employs d3.svg.axis for labeled axes, d3.scale.linear for coordinate mapping, and transition with delay and duration to produce the staggered animation effect. Circle color changes on hover via CSS.

LLTymn
74% match
Loading thumbnail…

Area Chart

This area chart displays the life expectancy of the USA over time, with a blue line tracing the trend and an orange filled area beneath it, using a smooth curve. The visualization loads CSV data from a GitHub gist and renders as SVG via D3 v5, employing `scaleTime`, `scaleLinear`, `csv`, `area`, and `line` generators with `curveBasis`. It includes labeled axes for year and life expectancy, gridlines via tick sizes, and formatted tick labels.

SSonuSriN
74% match