zenoalive

@zenoalive·14 public vizzes

Fork of Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using the UN Population 2019 dataset loaded via `d3.csv`. React state and hooks manage the fetched data, while `d3.scaleBand` maps countries to vertical positions and `d3.scaleLinear` maps population values to bar widths. The bars render as SVG `rect` elements within a React component, with a loading state shown before data arrives.

Jul 7, 2023

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economy category using a spectral color scale. The map is rendered with SVG paths generated by `d3.geoPath` and the Natural Earth projection, with country names and values shown as tooltips. The visualization includes a custom color legend built with `d3.scaleOrdinal`, and users can pan and zoom via the `d3.zoom` event handler. Data is loaded from the World Atlas TopoJSON and TSV files.

Apr 29, 2023

Loading thumbnail…

Fork of World Map Simple

This example shows a basic interactive world map using D3.js and TopoJSON. It renders country outlines, a graticule grid, and a map outline using d3.geoPath with a geoNaturalEarth1 projection. Country boundaries are loaded from the visionscarto-world-atlas TopoJSON dataset via fetch and converted to GeoJSON with topojson.feature. The React-based rendering uses a small state machine to handle asynchronous data loading, then calls the map function to draw paths into an SVG.

Apr 29, 2023

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays over 100,000 cities as circles sized by population, with hover tooltips showing names and population counts. Users can pan by dragging and zoom via scroll or pinch gestures, swapping between 110m and 50m resolution land boundaries during motion for performance. The visualization uses d3.geoOrthographic for projection, d3.geoPath for rendering, d3.drag and d3.zoom for interaction, and d3-tip for tooltips. City data comes from a preprocessed GeoNames CSV, while geographic shapes use TopoJSON world-atlas data.

Apr 23, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of temperature measurements over time, using data from the Data Canvas Sense Your City Dataset. The visualization features a smooth, natural curve rendered as an SVG path, with labeled axes for time and temperature. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the scales, `line()` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components for ticks and labels. The data is loaded asynchronously via `useEffect` and `json`.

Apr 22, 2023

Loading thumbnail…

Stylized Scatter Plot

Using React and D3.js, this visualization renders a scatter plot of Fisher’s Iris dataset, plotting sepal length against sepal width. D3’s `scaleLinear` and `extent` functions map the data to SVG coordinates, while the `AxisBottom` and `AxisLeft` components draw tick marks and labels. Each point is a circle with a native SVG `<title>` tooltip. The styling—teal marks and gray axes—comes from CSS classes defined in `index.html` to create a clean, minimalist look.

Apr 21, 2023

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each flower’s measurements appear as a circle, with the plot providing a clear overview of the dataset’s distribution. The visualization is built with React and D3, using `scaleLinear` for continuous axes, `extent` to set domains, and `csv` from D3 to load and parse the data from a remote GitHub source. Custom `AxisBottom` and `AxisLeft` components render SVG gridlines and ticks, while `Marks` draws the data points.

Apr 20, 2023

Loading thumbnail…

Pie Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load UN World Population Prospects 2019 data. Hovering over each bar reveals a tooltip via the native SVG `<title>` element, while d3.format shortens population labels like "1.4B".

Apr 20, 2023

Loading thumbnail…

D3 with React

This example demonstrates how to combine D3 utilities with React’s state management. It loads a CSV dataset of CSS named colors using D3’s `csv` function, then displays a message showing the data’s size in kilobytes, row count, and column count. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while conditional rendering shows a loading state until the data arrives. The visualization is minimal—a single heading—but effectively illustrates the integration pattern.

Feb 7, 2023

Loading thumbnail…

Loading data with D3 and React

This example demonstrates a grid of colored squares, one for each CSS named color, rendered as React divs. It fetches a CSV file of color data from a GitHub gist using D3’s `csv` utility, then stores the parsed rows in React state via `useState` and `useEffect`. The background color of each square is set from the `'RGB hex value'` column. The visualization highlights the integration of D3’s data-loading functions with React’s state management for dynamic rendering.

Feb 7, 2023

Loading thumbnail…

Fork of React Starter1

A circle follows the mouse cursor inside an SVG canvas, with its position updating in real time. The example demonstrates React state management, using the `useState` hook to store mouse coordinates and `useCallback` to handle mouse movement events. The circle’s center is set to the tracked `clientX` and `clientY` values, and it is rendered with a fixed radius of 30 pixels within a 960 by 500 viewport. The SVG element captures the `onMouseMove` event, and no external data is loaded.

Feb 5, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive line chart visualizes temperature trends from the Auto MPG Data Set, plotting temperature against timestamp. The visualization uses the Vega-Lite API to construct a specification, which is then rendered using the D3.js library. The temperature data is loaded from an external CSV source, with styling options defined in a separate configuration file. The implementation leverages dynamic sizing and tooltip features, with a dark color scheme applied to axis labels and titles for improved readability.

Feb 5, 2023

Loading thumbnail…

Fork of React Starter

A yellow circle with a black outline and a black semicircular mouth compose a smiley face, with two black eyes positioned symmetrically above the mouth. The face is assembled from React components, including a `Face` that groups a `Background`, `Eyes`, and `Mouth` inside an SVG `FaceContainer`. The `Mouth` uses D3’s `arc` generator to define a path with specified inner and outer radii and angles, while the `Background` and `Eyes` are plain SVG circles. React renders the SVG, and D3’s `arc` API determines the mouth’s shape.

Jan 11, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with two smaller black circles inside it, creating the beginning of a smiley face. The visualization is rendered as static SVG directly in the HTML, using primitive shapes rather than a data-driven approach. The code defines an SVG canvas of 960 by 500 pixels and draws three circles with explicit `cx`, `cy`, and `r` attributes: one large yellow circle with a thick black stroke, and two black circles positioned as eyes. No interaction or animation is present; the markup relies solely on standard SVG elements and inline CSS to set the page margin and overflow.

Jan 8, 2023