S

Seekerzero

@Seekerzero·24 public vizzes

Loading thumbnail…

Load Covid Vaccination Data

This interactive visualization shows global COVID-19 vaccination data on a choropleth world map, with a toggleable bar chart displaying the top 10 countries by a selected metric. Users can hover over countries to see their vaccination rates. The visualization uses d3.geoPath for map rendering, d3.scaleQuantile with a YlGnBu color scheme, and d3.scaleBand for the bar chart. Data comes from the WHO vaccination dataset, loaded via fetch and parsed with d3.csvParse.

Loading thumbnail…

vaccination dataviz Apr 13th d3_v4

This interactive D3.js visualization maps global COVID-19 vaccination totals onto a rotatable globe using `d3.geo.projection` and `d3.geo.zoom`. Country landmasses are colored by vaccination counts, with a color legend and hover tooltips via `d3.tip` providing details. The interface includes menu buttons and a select dropdown for additional control. The visualization relies on TopoJSON geographic data, rendered as SVG with graticules and striped patterns for missing data, and uses color schemes from ColorBrewer.

Loading thumbnail…

Fork of Fork of Choropleth Map 2

This choropleth map displays COVID-19 vaccination data from a CSV dataset, allowing users to toggle between three metrics via a dropdown menu: fully vaccinated counts, fully vaccinated per 100 people, and total vaccinations. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render world country outlines, with d3.scaleQuantile and d3.schemeYlGnBu assigning color fills based on the selected metric. Data loads asynchronously via fetch and Promise.all, while the topojson-client library converts the world atlas TopoJSON into GeoJSON features. Missing values appear gray, and the map responds to window resizing.

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes global COVID-19 vaccination rates, specifically the fully vaccinated population portion per country, using color intensity to show geographic disparities. The map renders countries as filled paths via `d3.geoPath` with a Natural Earth projection, while a `d3.scaleQuantile` maps data values to the `schemeYlGnBu` color scale, with gray for missing data. Data comes from a CSV file of vaccination statistics, parsed with `d3.csvParse`, and country boundaries use TopoJSON data processed through `topojson.feature`. The visualization updates asynchronously with `Promise.all` and `setState`.

Loading thumbnail…

Fork of Spinning Globe

This example presents a continuously rotating orthographic projection of the world, with country boundaries rendered in white over a graticule. The sphere tilts at a fixed -20 degree latitude while spinning on its y-axis using `requestAnimationFrame`. The visualization relies on `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the map, fetching country data from a visionscarto TopoJSON atlas via `topojson-client`. A black outline is drawn using a `Sphere` geometry path.

Loading thumbnail…

Bar Chart Of World Vaccination Data

This bar chart displays the cumulative number of fully vaccinated persons for the top ten countries worldwide, using World Health Organization vaccination data. The chart encodes country on the x-axis, sorted descending by vaccination count, with vaccinated persons on the y-axis and color-mapped to the same quantity. The visualization is built with Vega-Lite API, registering vega and vegaLite, and includes tooltips via vega-tooltip. Data is loaded asynchronously using d3.csv, filtered to the top ten countries by total vaccinations, and rendered as a full-window SVG with custom axis styling.

Loading thumbnail…

Loading Vaccination population into globe

This example displays nuclear explosion locations as points on an interactive globe using a Mercator projection. The visualization combines world map data with nuclear event coordinates, rendering land masses in brown, graticules, and country borders via `geoPath` from d3.v3. Each explosion site appears as a circle with a tooltip showing its name and coordinates. The React-based implementation loads TopoJSON world atlas data and CSV nuclear records, then projects longitude and latitude pairs through `geoMercator` to position the SVG marks and sphere.

Loading thumbnail…

Loading US GDP Data with Interactive Color Legend and Line Chart

This interactive visualization displays US GDP data, showing annual levels and percentage changes over time with a line chart. A scatter plot uses color-coded circles to represent each year, grouped into decades via an interactive color legend that highlights or fades data points on hover. The code relies on D3 v7's `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `axisLeft/axisBottom/axisRight` modules to render the axes and chart. Data is fetched as CSV from the BEA via a GitHub raw URL and parsed with `csvParse` and `timeParse`.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It displays continents as light green polygons with faint black borders on a blue sphere, using a natural Earth projection. The code constructs the graticule and land masses via `d3.geoPath` with `d3.geoNaturalEarth1`, and loads country boundaries from the world-atlas GeoJSON. Countries are drawn as SVG paths, with the sphere background filled separately.

Loading thumbnail…

Fork of Keeling Curve

This example reproduces the Keeling Curve, showing the steady rise in atmospheric CO2 concentration from 1958 to the present, with the characteristic seasonal zigzag pattern. The line chart uses d3.line to render the data, with d3.scaleTime and d3.scaleLinear mapping dates and CO2 values. Data is loaded from a NOAA CSV file and parsed with d3.csvParse and d3.timeParse. The visualization is built with D3 v7, including custom axis labels and a responsive SVG that fills the viewport.

Loading thumbnail…

Scatter Plot of Loading US GDP Data with axes

This example uses a D3.js scatter plot to visualize annual US GDP data, plotting the year on the x-axis against GDP in current dollars on the y-axis. The visualization loads data from a GitHub-hosted CSV file sourced from the Bureau of Economic Analysis. The code leverages D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs to build scales and axes, with data parsed via `csvParse` and rendered as circles. A title labels the chart, and axes are annotated with descriptive text.

Loading thumbnail…

Bar Chart Of World Vaccination Data

This bar chart displays COVID-19 vaccination data from the World Health Organization, showing the number of vaccine doses administered across countries. The visualization summarizes cumulative vaccination totals, per-capita rates, and the number of vaccine types used per country. It loads data from a CSV file using `d3.csvParse`, converts numeric fields, and groups records by country with `d3.flatGroup`. The chart renders a textual summary of the grouped data using D3’s `select` and `join` methods, displaying the results as structured output rather than graphical bars.

Loading thumbnail…

Scatter Plot of Loading US GDP Data

This scatter plot visualizes annual US GDP data, showing the relationship between year and GDP in current dollars. It uses D3 v7 to load data from a CSV file, parsing values for date and level-current, then draws circles positioned by linear scales for x and y axes. The visualization demonstrates asynchronous data fetching and SVG rendering.

Loading thumbnail…

Fork of Scatter Plot Simple

This scatter plot displays the classic Iris dataset, mapping sepal length along the x-axis and petal length along the y-axis. Each flower specimen is rendered as a circle, with all 150 data points plotted without axes or gridlines. The visualization uses D3 v7, loading data via a CSV fetch and parsing it with `csvParse`. The `scatterPlot` module constructs linear scales using `scaleLinear` and `extent`, then positions circles using the `join` API based on the selected measurement columns.

Loading thumbnail…

Pseudo viz for symbol filled in blocks

This visualization uses filled SVG symbols to represent employment data across three categories. Red rectangles mark unemployment, blue marks non-agriculture employment, and green marks agriculture, with each symbol standing for 5,000 people. The code employs d3.symbol with d3.symbolsFill to generate the symbols, d3.range for population distribution, and d3.select with .join to create the rectangles and symbols. The layout uses window.innerWidth and innerHeight to size the SVG dynamically.

Loading thumbnail…

Transforming World Vaccination Data

This example transforms World Health Organization COVID-19 vaccination data from a CSV file into a structured summary of vaccine types used per country. It loads the dataset via a fetch request, parses the comma-separated values with `d3.csvParse`, and converts numeric string fields into numbers. The visualization then groups records by country using `d3.flatGroup`, extracts vaccine names from each entry’s `VACCINES_USED` field, and counts distinct vaccines per nation. The resulting aggregated list—showing country, vaccine names, and totals—is rendered as a formatted JSON string inside a `<pre>` element, offering a concise textual overview of global vaccination strategies from the WHO data source.

Loading thumbnail…

Try Transforming Data

This example demonstrates how to transform the Iris Dataset using D3’s data analysis functions. It loads a CSV file and extracts summary statistics, computing averages per species with `d3.flatRollup` and creating histograms of sepal lengths with `d3.bin`. Results are displayed as raw JSON in a `<pre>` element, updating via a state-driven render cycle. The visualization uses D3 v7 and highlights practical data wrangling techniques for exploratory analysis.

Loading thumbnail…

Transforming Data

This visualization demonstrates how to use D3.js data transformation techniques to summarize the classic Iris flower dataset. It computes the average sepal length for each iris species using `d3.flatRollup` and `d3.sum`, then displays the resulting summary as formatted JSON text in a `<pre>` element. The code loads data from a local CSV file with `d3.csvParse` and showcases commented-out examples of other transformations like `d3.bin`, `d3.extent`, and `d3.group`.

Loading thumbnail…

Loading US GDP Data

This example demonstrates the asynchronous loading and parsing of a CSV file containing US GDP data, displaying the resulting data structure as JSON in a `<pre>` element. Initially showing "LOADING" and then the parsed array of objects, it fetches the dataset from a Gist URL, uses `d3.csvParse` to parse the CSV, and converts numeric fields like `date`, `level_current`, and `change_chained` to numbers. The visualization relies on the `d3` library for DOM selection and CSV parsing, with the data structured according to the BEA-sourced fields from datahub.io.

Loading thumbnail…

Loading World Vaccination Data

This example demonstrates the initial stage of loading and parsing World Health Organization COVID-19 vaccination data from a CSV file. It displays the raw parsed data as a JSON-formatted string within a `<pre>` element, showing the dataset's structure and fields. The page uses a state-management pattern where the data transitions from `undefined` to `'LOADING'` and finally to an array of parsed objects. The code relies on D3 v7's `select` and `csvParse` functions, fetching the CSV from a GitHub Gist and converting numeric string fields into JavaScript numbers, with special handling to set zero-value booster dose fields to `null`.

Loading thumbnail…

Loading US Employment/Unemployment Data

This example demonstrates loading and displaying US employment and unemployment data from a CSV file. It first shows a raw JSON representation of the data, initially indicating a "LOADING" state before fetching the dataset from a GitHub Gist. Once retrieved, it parses the CSV string using D3's `csvParse` method, converting numerical fields from strings to numbers and handling footnotes. The visualization uses the D3 v7 library to manage the asynchronous data-fetching workflow, updating the displayed content via a state management system. The data originates from the USA Bureau of Labor Statistics, covering civilian noninstitutional population employment status since 1940.

Loading thumbnail…

Mouse Finder

A mouse tracker renders a single circle that follows the cursor, with its radius scaling dynamically based on movement speed. The visualization uses D3 v7’s selection and event handling, attaching a `mousemove` listener to an SVG that spans the full window. Movement deltas (`event.movementX` and `event.movementY`) drive a formula calculating radius, clamping it between 5 and 100 pixels. The circle uses transparent fill with a black stroke, and state updates trigger re-renders through a custom `setState` pattern, while `selectAll().join()` manages the SVG and circle elements.

Loading thumbnail…

Mouse Follower Simple

A simple interactive visualization renders a circle that follows the mouse cursor. The circle grows in radius as the user moves the mouse faster, measured via the `event.movementX` and `event.movementY` properties, with its size capped at 100 pixels. The example uses D3 v7's selection and data join methods (`select`, `selectAll`, `join`) to bind SVG elements, updating position and radius on each `mousemove` event. The circle is styled with a transparent fill and a black stroke, demonstrating dynamic SVG updates with D3.

Loading thumbnail…

Fork of D3 Starter

This example renders a nearly blank page that logs D3’s `select` function to the console, demonstrating a minimal setup with D3 v7.6.1 loaded from a CDN and a separate `bundle.js` script. It shows the basic structure of importing a D3 utility via the `select` function in `index.js` and running it in an HTML document with no visible visual output. The code relies on the D3 library’s exported `select` API, but does not perform any data processing or drawing.