D3-izzle

100%

✓ Published0🌍 Public

Last edited Mar 28, 2021

Created on Mar 27, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 20 countries by total deaths from a CSV dataset, rendered as a horizontal bar chart using React and D3. The code leverages `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent each bar, with axes drawn manually via `d3.axisBottom` and tick marks, all positioned using React's declarative JSX markup within an SVG container.

99176371431

75% 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…

Untitled

This visualization displays the global distribution of COVID-19 deaths by country, using a Mercator-projected world map with a threshold color scale to differentiate mortality levels. A tooltip reveals the country name and total death count on hover. The map is rendered with D3 v4, using `d3.geoPath` and `d3.geoMercator` for geographic projection, while loading country geometries from a TopoJSON file and death data from a TSV file. Zooming is enabled via `d3.zoom`.

MMizanur55

74% match

Loading thumbnail…

Fork of Fork of D3: GeoEarth

This example visualizes global deaths from brain and central nervous system cancer in 2019, coloring each country on a natural Earth projection map using a sequential yellow-orange-red scale based on total mortality counts. The visualization uses React to manage state and render the SVG, with D3 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSequential`, and `d3.csv` for loading the cancer mortality data. Country boundaries come from TopoJSON world-atlas data, and hovering over a country displays its name and death count in a tooltip div. A legend on the left provides a color reference, with data sourced from a CSV file containing all cancer types by country.

BBajiSharifPatan@my.unt.edu

74% match

Loading thumbnail…

Fork of D3: GeoEarth

This interactive SVG map displays global brain and central nervous system cancer deaths for 2019, using a YlOrRd sequential color scale to encode mortality counts per country. Built with React, it loads country boundaries via `d3.json`, converts them with TopoJSON’s `feature`, and projects them using `geoNaturalEarth1` and `d3.geoPath`. A hover-triggered tooltip appends country names and death totals, while a legend provides color reference. Data comes from a WHO-style cancer mortality CSV joined to ISO country codes.

NNikkko1

74% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 countries by death cases in 2021 using a horizontal bar chart. The chart maps country names on the y-axis and population values on the x-axis, with blue bars representing each country's population. The React application uses d3.scaleBand and d3.scaleLinear to position bars and axes, while d3.csv loads the data from a GitHub-hosted CSV file. The visualization is rendered as an SVG element, with the code demonstrating how React manages state and D3 handles data processing and scaling.

74% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes mortality rates across ten countries, with each slice's arc length proportional to the death count from a CSV file. The chart displays country labels and uses a categorical color scale from `d3-scale-chromatic`. On hover, a tooltip appears showing the percentage of total deaths, calculated from the data. The visualization is built with D3.js using `select`, `pie`, `arc`, and `sum` from the D3 module, rendering as an SVG with custom styling for hover effects.

Aamiralitah

73% match