D

Daniel Zsido

@Z-Daniel·17 public vizzes

Loading thumbnail…

Temperature line chart

This line chart displays weekly temperature readings from San Francisco, plotting time on the x-axis and temperature on the y-axis. The visualization uses React with d3.v7 scales (scaleTime and scaleLinear) and the d3.line path generator with curveNatural to render a smooth curve, while circles mark each data point. Native SVG titles provide simple hover tooltips showing the weekday. Axes are built using custom React components that leverage d3’s tick generation with formatted time labels and grid lines.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis maps time using a time scale, while the y-axis uses a log scale to show the total number of dead and missing, compressing large values. The React application renders SVG circles, axes, and labels, with D3 v5 handling data loading via `csv()`, scaling through `scaleTime()` and `scaleLog()`, and axis tick generation.

Loading thumbnail…

Fork of Worldmap with missing migrants

This interactive visualization combines a world map with a time-series histogram to explore missing migrant incidents. The map displays circles scaled by the total number of dead and missing using a d3-geoNaturalEarth1 projection and geoPath, while the histogram aggregates monthly totals. A d3.brushX selection on the histogram filters the map’s displayed data. The code uses React, d3.v7, and topojson for world atlas features, with data from a CSV of global missing migrants.

Loading thumbnail…

Migrant deaths

This visualization displays the number of migrant deaths over time, using a bar chart where each bar represents the sum of deaths per month. Built with React and D3 v7, it loads CSV data on missing migrants, creates time-binned aggregates via `bin` and `thresholds`, and renders SVG rectangles using `scaleTime`, `scaleLinear`, and custom axes. The bars show the temporal distribution of fatalities, with tooltips revealing precise monthly totals.

Loading thumbnail…

Worldmap with cities

This example displays a world map using a Natural Earth projection, with the landmasses rendered as gray polygons and graticules overlaid. City locations are plotted as semi-transparent circles, with their radius scaled by the square root of each city's population. Built with React, the visualization uses D3.js modules `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map projections and graticule, while `scaleSqrt` maps population values to circle sizes. City data is loaded from a CSV file, and world atlas geometries are fetched as TopoJSON, which is processed through `topojson` functions.

Loading thumbnail…

Color legend

This scatter plot of the Iris dataset maps sepal length and width, with points colored by species. A color legend on the right side filters the visualization, dimming non-matching species and highlighting the selected one on hover. The example uses React with d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and SVG circles rendered via ReactDOM. Data is loaded from a CSV using d3.csv.

Loading thumbnail…

Scatter plot with menus

Two dropdown menus let viewers choose which Iris flower measurements appear on the x and y axes of an SVG scatter plot. The React app loads the Iris dataset via `d3.csv` and uses `d3.scaleLinear` and `d3.extent` to set domains, while custom React components render axes and circles. As the menu selections change, the axes rescale and the scatter plot updates with the newly selected attributes, using `d3.format` for tick labels.

Loading thumbnail…

Select

This example demonstrates a simple interactive dropdown menu for selecting a pet type, where the current selection is logged to the console. The interface displays a large label and select element, with six pet options (e.g., Goldfish, Cat, Dog) defined as an array of objects. Built with React and ReactDOM, the component `Dropdown` maps over the options to render `<option>` elements, using `useState` to manage the selected value and an `onChange` handler to update it. The styling is applied via plain CSS in the HTML, with no D3 APIs used in this visualization.

Loading thumbnail…

Worldmap

This map displays the world's landmasses filled in teal, with interiors outlined in silver, all set within a light gray sphere and graticule. It uses d3.geoNaturalEarth1 and d3.geoPath to project and render geographic features from the world-atlas TopoJSON source. The React application imports data via d3.json and topojson.feature to draw the geographic shapes as SVG paths.

Loading thumbnail…

Stylized scatter plot

This stylized scatter plot visualizes the iris dataset, showing sepal length on the x-axis and sepal width on the y-axis, with each flower represented by a teal circle. The visualization uses React components to render SVG elements, with D3 v7’s `scaleLinear` and `extent` functions managing the axes and data scaling. Axis ticks are generated via D3’s scale methods, and tooltips display formatted x-values using D3’s `format` function. The design features large, bold axis labels and tick text, with a clean, minimal aesthetic.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of population data for ten countries in 2020, with a formatted x-axis and categorical y-axis labels. The visualization is built with React components that leverage D3 scales (`scaleBand`, `scaleLinear`) to compute positions, while the axes and marks are rendered as SVG elements generated through JSX. Data is loaded via `d3.csv` from a GitHub-hosted dataset, and tick labels use `d3.format` to abbreviate large population numbers. Styling is applied through CSS classes targeting the SVG elements.

Loading thumbnail…

Simley Face Part I

This example shows a smiling face built from a yellow background circle, two black eyes, and a curved mouth, rendered as SVG in a React component hierarchy. The face is centered on an 960×500 canvas using a `FaceContainer` that translates an SVG group to the midpoint. Individual components like `BackgroundCircle`, `Eyes`, and `Mouth` accept geometric props for positions and sizes. The mouth’s arc is generated with the `d3.arc` API, specifying inner/outer radii and start/end angles. All shapes are drawn with SVG primitives inside a React tree, using hard-coded dimensions.

Loading thumbnail…

The Margin convention

This example demonstrates how D3’s margin convention works by rendering a horizontal bar chart of the top ten countries by 2020 population estimates from the UN World Population Prospects 2019 dataset. The chart uses a React component with `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the x-axis. An outer SVG with fixed width and height contains a translated group element (`g`) that positions the bars inside the margin-defined inner area, which is computed by subtracting the top, right, bottom, and left margin values from the outer dimensions.

Loading thumbnail…

D3 piechart

This example shows a pie chart where each slice represents one named CSS color, loaded from a CSV file via `d3.csv`. The chart uses `d3.pie` to compute angles and `d3.arc` to generate SVG path strings, with each slice filled by its corresponding RGB hex value from the data. React manages the component state and renders the SVG, while D3 v7 handles the data loading and layout calculations, creating a colorful full-circle visualization of all named colors.

Loading thumbnail…

Loading data

A loading screen displays the message “Rendering data with react” in large type until a CSV file of CSS named colors is fetched. Once loaded, the app maps each row to a horizontal div strip, using the color’s RGB hex value as its background. The example demonstrates asynchronous CSV loading via `d3.csv` and state-driven rendering with React’s `useState` and `useEffect`, producing a stacked color swatch visualization in SVG.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3.js library in a React-ready starter project. It fetches a remote CSV file containing CSS named colors, then displays basic statistics about the dataset, including its file size in kilobytes, the number of rows, and the number of columns. The visualization uses the `d3.csv` and `d3.csvParse` methods alongside the Fetch API, with `d3.csvFormat` calculating the data size. The parsed content is rendered as plain text in an HTML `<pre>` element.

Loading thumbnail…

Mouse follower

A black circle follows the mouse cursor across an SVG canvas, serving as a playful interactive pointer. The example is built with React and D3 v7, using React state to track mouse coordinates via an `onMouseMove` event handler. The `useState` hook stores the current `clientX` and `clientY` positions, and a `<circle>` element updates its `cx` and `cy` attributes accordingly. The SVG's width and height are fixed, and the circle has a constant radius of 30 pixels.