d3 in vanilla javascript

100%

d3 in vanilla javascript

✓ Published1🌍 Public

Last edited Jul 2, 2023

Created on Jul 1, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

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

76% match

Loading thumbnail…

Loading CSV Data

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.

AAlfsig

75% match

Loading thumbnail…

Fork of pie chart

This example displays the top 10 countries by malaria deaths in 1965 as a pie chart, with each segment labeled with the corresponding death count in thousands. It uses D3 v5’s `pie()` generator, `arc()` for segment paths, and `scaleOrdinal` for color assignment. Data is fetched from a CSV via `d3.csv`, and the chart is rendered as SVG. A legend to the right lists each country with a color swatch and its death total, formatted using `d3.format`.

Ppavan0828

75% match

Loading thumbnail…

test

This scatter plot displays the number of deaths for various countries, using a red dot for each nation along a vertical country axis and a horizontal death-count axis. Built with D3 v7, it loads data from a local CSV file, which is also drawn from the UCI Auto MPG dataset, and renders as an SVG. The code uses `d3.csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the visualization, with custom formatting and a data join to append circles.

RRobindj2000

75% match

Loading thumbnail…

Basic Scatter Plot with Time Scale

This scatter plot displays the number of deaths reported across all countries from 2015 to 2021, with each circle representing a country in a given year. The x-axis uses a time scale (d3.scaleTime) for years, while the y-axis uses a linear scale (d3.scaleLinear) for death counts. Data comes from the World Mortality Dataset, loaded via d3.csv. The visualization is rendered as SVG circles with opacity, axes generated using d3.axisBottom and d3.axisLeft.

SSiddhi Patil

73% match

Loading thumbnail…

Fork of Deaths Scatter plot

This scatter plot presents death tolls for ten countries, with each circle’s vertical position encoding the number of deaths per country. The visualization uses D3 v7’s `scaleLinear` for the y-axis and `scalePoint` for the categorical x-axis, rendering circles as SVG elements. Data from the CSV file is loaded via `d3.csv`, with death values multiplied by 1,000. Axes are generated using `axisLeft` and `axisBottom`, while styling is applied through CSS, including semi-transparent red circles.

Aansofie123

73% match

Loading thumbnail…

Bubble Chart in D3

This bubble chart visualizes the prevalence of AIDS in six African countries, plotting the number of individuals living with the disease on the y-axis against the year on the x-axis. The bubble size encodes the number of new diagnoses, while color distinguishes countries. The visualization uses D3.js v7 with SVG rendering and d3.csv for data loading, d3.scaleLinear for scales, and custom legends for size and color. It includes axes with formatted tick labels and a title, requiring side scrolling due to the chart's dimensions.

AAndrew Blakeslee Moore

73% match

Loading thumbnail…

D3-izzle

This example maps country-level mortality statistics into a vertical text listing, grouping rows by nation via `d3.group` and appending SVG `<g>` elements for each entity. The visualization currently logs each row’s values to the console, with placeholder text intended to display yearly terrorism-related deaths from the CSV. It uses D3 v6 for data loading (`d3.csv`) and selection/joining, rendering to an SVG container with fixed dimensions. The data source is an Amnesty International and Global Burden of Disease dataset covering multiple causes of death across years.

AAlbert

73% match