Z

zeeeeem

@zeeeeem·22 public vizzes

Loading thumbnail…

Timeline

A horizontal timeline charts patient flow through stages like Waiting, Vital, and Doctor, with colored bars and labels showing durations. The chart uses a custom `d3.timeline` function built with D3 v3, rendering SVG elements. It stacks rows, applies a 15-minute time axis with `d3.time.format`, and supports custom tick formatting and interactive navigation. Colors are mapped to each stage, and the example demonstrates how to configure margins, stacking, and axis labels for a clear temporal sequence.

Loading thumbnail…

Scatter Plot 4: Menus,Colors, Interactive Legend

This interactive scatter plot visualizes the Iris dataset, letting users choose which attributes appear on the X and Y axes via dropdown menus. A color legend categorizes points by species, and hovering over a legend entry highlights only the matching points while fading others. Built with React and D3 v5, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering for marks and interactive legend controls.

Loading thumbnail…

testingTer

This example demonstrates a choropleth-style map of US state boundaries projected using the `geo-albers-usa-territories` projection from the `geo-albers-usa-territories` library. State outlines are rendered as SVG paths via `d3.geoPath`, with interior borders highlighted in a contrasting stroke color. The underlying data comes from US Atlas TopoJSON (states-10m.json), fetched and processed with `topojson.feature` and `topojson.mesh`. The React app loads the data asynchronously using a custom `useData` hook and displays a loading message until the map is ready.

Loading thumbnail…

Fork of Geo Albers with Territories Demo

This demo displays U.S. state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include Alaska, Hawaii, and U.S. territories. The SVG rendering uses `d3.geoPath` with `geoPath(projection)` to draw land features and interior state borders, sourced from the US Atlas TopoJSON. React manages the component tree while `useData` loads the topology via `d3.json` and converts it with `topojson.feature` and `topojson.mesh`. The visualization shows land in teal with lighter interior strokes against a light gray background.

Loading thumbnail…

Missing Migrants: Part 5 - Brushing

This interactive visualization combines a world map with a time-series histogram to explore global migrant deaths and disappearances. The map displays circles scaled by the total number of dead and missing, using a natural Earth projection with `geoPath` and `geoNaturalEarth1`. A brushable histogram below, implemented with `brushX` and `scaleTime`, allows the user to filter the map by date range. The data comes from the Missing Migrants dataset, with React hooks managing state and D3 v5 handling rendering.

Loading thumbnail…

Scatter Plots: Part 3 - Colors and Legend

This interactive scatter plot of the Iris dataset displays sepal and petal measurements, with points colored by species using a d3.scaleOrdinal. Users can change the x and y axes via dropdown menus built with the react-dropdown library. The visualization uses React with D3 scales for positioning, includes axes rendered as SVG elements, and shows a native browser tooltip via SVG `<title>` elements when hovering over points.

Loading thumbnail…

Missing Migrants: Part 4 - Multiple Views

This visualization combines a bubble map and a date histogram to explore missing migrant incidents. The map projects incident locations as circles sized by the total dead and missing count using `d3.geoNaturalEarth1` and `d3.geoPath`, while the histogram aggregates counts by month using `d3.histogram` and `d3.scaleTime`. Both views render as SVG within a React app, using the Missing Migrants dataset and world atlas topology.

Loading thumbnail…

Mapping Part 3: Cities and Pop.

This example visualizes the populations of cities on a world map, using circles sized proportionally to population data. It shows a geographic context with landmasses, graticules, and sphere outlines, layered with semi-transparent teal points. Built with React and d3.v5, the map uses `geoNaturalEarth1` for projection and `geoPath` for rendering. City data is loaded from a CSV, while geographic boundaries come from the world-atlas TopoJSON dataset. Circle radii are scaled using `scaleSqrt`.

Loading thumbnail…

Mapping : Part 2 - Cities

This example visualizes worldwide cities as semi-transparent teal dots layered over a natural Earth projection map. It uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and interior boundaries from the world-atlas TopoJSON dataset, while city coordinates are plotted via d3.csv from a cleaned world cities dataset. The React component fetches both data sources asynchronously using useEffect, then projects each city’s longitude and latitude into SVG circles with fixed pixel radii.

Loading thumbnail…

Mapping: Part 1

This example displays a world map using the Natural Earth projection, with landmasses shown in teal, country borders in a lighter teal, graticules in gray, and the globe’s sphere in a light background. It focuses on the fundamental process of converting geographic data into visual form. The code uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to generate SVG paths from TopoJSON data loaded via the `world-atlas` dataset. The project is built with React, rendering the map through reusable components, and applies styling through CSS classes.

Loading thumbnail…

Missing Migrants: Part 2

This visualization displays the number of dead and missing migrants over time, aggregating the dataset into monthly bins using d3.histogram and d3.timeMonths. The bars show total monthly counts, with axes rendered via custom React components using d3.scaleTime and d3.scaleLinear. Built with React and d3.v5, the SVG chart renders a scatter plot of the Missing Migrants subset, with tooltips revealing precise values on hover.

Loading thumbnail…

Missing Migrants : Part 1

This scatter plot visualizes the relationship between reported dates and the total number of dead and missing migrants from a Dataset on Missing Migrants. The x-axis displays time using a time scale, while the y-axis shows the count of missing individuals on a linear scale. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for axes, with circles rendered as SVG marks that include tooltips showing formatted dates. Data is loaded via `d3.csv` from a gist-hosted CSV file.

Loading thumbnail…

Scatter Plots: Part 2 - Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis labels updating to reflect the selected measurements. The code leverages `d3.scaleLinear` for continuous scales, `d3.extent` for domain calculation, and custom `AxisBottom` and `AxisLeft` components to generate tick marks. Dataset values are loaded asynchronously through a `useData` hook that parses CSV data using `d3.csv`.

Loading thumbnail…

Time Series: Part 3 - Line Chart Polished

This example shows a polished line chart of San Francisco weekly temperature data from the Data Canvas Sense Your City dataset. A smooth curve connects temperature measurements over time, with labeled axes for time and temperature, while tick marks and axis labels provide clear reference points. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for scales, `d3.line` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components to render SVG axes.

Loading thumbnail…

Scatter Plots: Part 1 - Stylized

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with teal circular marks. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `csv` to load and scale the data, while custom `AxisBottom` and `AxisLeft` components render tick marks and labels using SVG. The chart includes rotated axis labels, formatted tick values via the `format` function, and native SVG `<title>` tooltips on each circle, all styled with the Poppins font on a clean white background.

Loading thumbnail…

Time Series: Part 1 - Scatter Plot

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, displaying each observation as a circular mark positioned by a time-based x-scale and a linear y-scale. The React components render SVG axes with tick marks, while the Marks component generates circles with native tooltips showing the formatted date. Using d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.timeFormat for tick labels, the chart emphasizes temporal patterns in temperature data with clear axis labels and a minimalist design.

Loading thumbnail…

Time Series: Part 2 - Line Chart

This visualization displays a line chart of temperature readings over time, with the x-axis representing timestamp and the y-axis showing temperature values. The chart is built using React components that leverage d3.scaleTime and d3.scaleLinear for axis scaling, with a smooth line rendered via d3.line and curveNatural. The underlying data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv. Axis ticks are generated using d3's scale methods, while the SVG rendering employs custom AxisBottom and AxisLeft components for clean, labeled axes.

Loading thumbnail…

Bar Charts : Part 1 - Stylized

This example presents a horizontal bar chart of the 2020 populations for 11 countries, sorted by a pre-defined order. It is rendered as an SVG using React components, with D3.js (v5) handling the scale computations: `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. The visual styling uses a custom Poppins font, a teal color for bars, and grey for tick labels. D3’s CSV loader fetches the data from a gist, and tooltips display formatted values like “1.23B”.

Loading thumbnail…

Missing Migrants : Part 3 - on a Map

A world map displays the global distribution of missing migrants, with semi-transparent circles sized by the reported total dead and missing for each location. The visualization uses a natural Earth projection rendered with `d3.geoPath`, overlaid with graticules and country borders from the World Atlas TopoJSON dataset. Circle radii are scaled using `d3.scaleSqrt` based on data from the Missing Migrants CSV, and the React-based component structure relies on D3 v5 for data loading and geospatial calculations.

Loading thumbnail…

REACT STARTER CODE : 7.30.22

A minimal React application renders a static text message, displaying “hello React 7.30.22” inside a full-screen, margin-less body. The code imports `React` and `ReactDOM`, defines an `App` component as a simple arrow function, and mounts it to a `#root` div using `ReactDOM.render`. The example uses React 16.9.0 and ReactDOM 16.9.0 from unpkg CDN, loaded in a plain `index.html` with a separate bundled JavaScript file. It demonstrates the basic setup for a React visualization starter, with no charts, data, or interactive behavior included.

Loading thumbnail…

Loading + Parsing: d3

This example demonstrates loading and parsing CSV data with D3.js. It fetches a CSV file containing CSS named colors, then displays three summary metrics: the dataset size in kilobytes, the number of rows, and the number of columns. The primary implementation uses `d3.csv` with a Promise, while commented-out alternatives show `fetch` with `async/await` and `d3.csvParse`. Results appear as large text in an HTML `<pre>` element.

Loading thumbnail…

Loading Data: React + d3

This example demonstrates how to combine React state with D3 utilities to load and display metadata about a dataset. The app uses `d3.csv` to fetch a CSV file containing CSS named colors, then stores the parsed data in React's `useState` hook. While loading, it displays the word "Loading"; once the data arrives, it shows the file size in kilobytes, row count, and column count. The code leverages React hooks like `useEffect` and `useCallback`, along with D3's `csvFormat` to calculate the data size.