Loading CSV Data

100%

Loading CSV Data

✓ Published0🌍 Public

Last edited Apr 24, 2015

Created on Apr 24, 2015

This example visualizes tuberculosis death counts across multiple countries from 2007 to 2013, using data from the World Health Organization loaded via `d3.csv`. The SVG chart renders one line per country, mapping years on the x-axis and death counts on the y-axis with `d3.time.scale` and `d3.scale.linear`. It parses the WHO CSV directly, extracting numeric values from bracketed ranges, and uses `d3.svg.line` and `d3.svg.axis` to draw paths and axes. Hovering highlights a country’s line via CSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Loading CSV Data with D3

A visualization displays HIV/AIDS prevalence rates against other country statistics from a G7 CSV dataset, using D3.js v3 to load and parse the comma-separated values. The example renders an SVG path layer to illustrate data patterns, with each country contributing specific metrics like birth rate and life expectancy. The code demonstrates basic D3 CSV loading techniques within an SVG canvas, showing how raw tabular data can be transformed into visual form.

LLTymn

80% match

Loading thumbnail…

Loading CSV Data with D3

The visualization demonstrates how to load and inspect CSV data using D3, displaying a decorative SVG pattern of black bars above a text label. It uses `d3.csv` to asynchronously fetch the `Data_InfantMortalityRate.csv` file, which contains infant mortality rates for EU and EFTA countries from 1960 to 2012. The loaded data is parsed into an array of JSON objects and logged to the browser console, while the static SVG shapes serve as a visual placeholder.

CCatLeal

78% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 death counts over time for seven countries, with each country represented as a colored line and labeled at its final data point. The chart uses a linear time scale for days since the 10th death and a linear scale for death counts, with axes and a color legend rendered by custom D3 functions. The code loads CSV data, processes it, and uses `d3.nest` to group by country, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` for colors. The visualization is rendered as SVG with D3 v5.

Iinroadings

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…

Multiple Colored Lines

This example displays global COVID-19 cumulative death counts over time as multiple colored lines, one for each country. The visualization uses a logarithmic y-axis to accommodate the wide range of values, with grid lines extending across the chart from both axes. Built with React and D3 v7, the chart renders SVG paths using `d3.line`, `scaleTime`, and `scaleLog`, while axes are generated with `axisBottom` and `axisLeft`. Data comes from a CSV file processed with `d3.csv` and `timeParse`. Each country is assigned a random RGB stroke color.

AAlex Stulov

75% match

Loading thumbnail…

covid data viz

This example plots COVID-19 data from the Our World in Data CSV as a scatterplot, with new cases on the x-axis and deaths on the y-axis. It uses D3 v7 to load the CSV, slice the dataset to a manageable subset, and append circles to an SVG. The code samples the raw data by taking every thousandth row, and scales the plot area with fixed margins, though the scales are incomplete.

NNita

75% match

Loading thumbnail…

d3 in vanilla javascript

This example visualizes malaria deaths per 100,000 people across countries, comparing reported values from the years 2000 and 2001 on logarithmic scales. Circles representing countries are positioned by their death rates, with Angola and Kenya highlighted by larger radii. The code loads data from a CSV using d3.csv, employs scaleLog and extent for scaling, and renders an SVG with d3.select and join to create circle marks. Axes are added via axisLeft and axisBottom.

BBryan Baird

75% match

Loading thumbnail…

Melting Data for Multiple Lines

This example shows COVID-19 death counts for multiple countries over time, with each country represented as a colored line and labeled at its final value. The visualization uses a line generator with a basis curve, along with nested data grouping to separate countries. It displays the data on linear scales for both axes and includes a color legend in the corner. The code imports and processes data from two CSV files, filtering and merging them to build the dataset, and renders the chart as an SVG using D3 v5 APIs like `d3.nest`, `d3.line`, and `d3.axisLeft`.

Iinroadings

75% match