S

Shmuel Leider

@sammyl720·18 public vizzes

Loading thumbnail…

World Map

This example displays a world map with country land masses in teal, political borders in lighter strokes, and graticules over a gray sphere. It visualizes geographic boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3’s `geoNaturalEarth1` projection and `geoPath`. React manages the component state and data fetching via a custom hook, while TopoJSON’s `feature` and `mesh` methods prepare the land shapes and interior borders for display.

Loading thumbnail…

Working with Time: a line chart

A line chart visualizes temperature variation over time using San Francisco weekly weather data. The visualization employs D3 scales (scaleTime and scaleLinear) and SVG rendering through React components, with a natural curve smoothing the temperature readings. The chart displays x-axis timestamps formatted as abbreviated weekday names and a y-axis for temperature values, with explicit axis labels and tick marks defining the spatial mapping.

Loading thumbnail…

Working with Time

This visualization displays a week of temperature measurements from the Data Canvas Sense Your City dataset as a scatter plot. The code uses React components to render SVG circles representing individual temperature readings, with D3’s `scaleTime` and `scaleLinear` mapping timestamps and temperature values to screen positions. Axes are built using D3’s `timeFormat` for weekday labels, and the hover tooltip shows the formatted date via an SVG `<title>` element. The chart is rendered with React, using D3 utilities for data loading and scaling.

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris dataset, comparing petal length against sepal width. The visualization uses D3 scales (`scaleLinear`, `extent`, `format`) to map data to SVG coordinates, while React components render the axes and circular marks. Each data point is an SVG circle with a tooltip showing its petal length. The chart includes labeled axes, tick marks, and a clean design using the Poppins font.

Loading thumbnail…

Stylized bar Chart

This stylized bar chart displays the top 10 most populous countries, using horizontal bars to compare their 2020 population estimates from the UN Population dataset. The chart loads CSV data with the d3.csv utility and renders it through React, using d3.scaleBand and d3.scaleLinear for the axes and bar positioning. SVG elements comprise the visualization, with d3.format to abbreviate population values on the x-axis. The design employs a custom Poppins typeface and a teal color for the bars, while a native SVG tooltip shows precise population figures on hover.

Loading thumbnail…

Refactored bar Chart

This data visualization example shows a horizontal bar chart displaying the populations of the ten most populous countries, using data from the UN Population 2019 CSV file. The chart is constructed using React components to render SVG elements, with D3 utilities (d3.csv, scaleBand, scaleLinear, max) handling data loading and scales. The code separates concerns into distinct functional components—AxisBottom, AxisLeft, and Marks—each receiving scale and data props. The axes and rectangles are rendered as SVG elements based on the population values from the "2020" column.

Loading thumbnail…

Axis with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, as loaded from a CSV file. The React component manages the data state, while D3 utilities such as `scaleBand`, `scaleLinear`, and `d3.csv` handle data parsing and scaling. Axes are drawn manually using `.ticks()` and SVG elements, with both grid lines and labels rendered through React’s JSX syntax. The chart uses `max` to determine the domain and maps values from data to pixel coordinates via D3’s scale functions.

Loading thumbnail…

The Margin Convention

This example displays a horizontal bar chart of the top 10 countries by projected 2020 population, encoded as SVG rectangles. The chart uses D3's `scaleBand` and `scaleLinear` to map categorical country names and numerical population values to pixel coordinates. It loads data from a CSV file via `d3.csv` and renders the visualization with React, applying a margin convention to position the plot area within the SVG canvas. The bars are drawn using the `rect` SVG element, with dimensions derived from the scales.

Loading thumbnail…

Rendering Data with React

This example visualizes the top 10 countries by 2020 population as horizontal bars using React and D3. It loads CSV data via `d3.csv`, parses the population column, and slices the dataset before rendering. React’s `useState` and `useEffect` manage the asynchronous data fetch, while D3’s `scaleBand` and `scaleLinear` map countries and populations to SVG rectangles. The visualization demonstrates a clean integration of React’s component model with D3’s scaling utilities for data-driven SVG rendering.

Loading thumbnail…

Fork of Rendering Data with React

This example builds a pie chart of CSS named colors from a CSV dataset using React and D3 v6. It loads and parses the data with `d3.csv`, then uses the `pie()` layout and `arc()` generator to compute and render SVG paths. Each slice is filled with the color value from the `Keyword` column, and the chart is centered within an SVG container. React manages the loading state and renders the paths as components.

Loading thumbnail…

Rendering Data with React

This example displays CSS named colors as a vertical stack of horizontal color swatches, with each row’s background set to the corresponding RGB hex value from the dataset. React manages the component state and renders each swatch as a div, while D3’s `d3.csv` loads and parses the color data from a remote URL. The visualization uses React’s `useState` and `useEffect` hooks to fetch data asynchronously and conditionally render a loading message before the swatches appear.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and parsing CSS named color data with D3 utilities while managing application state through React hooks. The app uses `d3.csv` to fetch a remote CSV file containing color names, then displays file size, row count, and column count as large text. React's `useState` and `useEffect` hooks track the data loading lifecycle, showing a “Loading” message until the asynchronous request completes. The visualization combines React 16.9’s functional components with D3 v6’s data parsing and formatting APIs, including `d3.csvFormat` for calculating data size.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example shows a summary of the CSS named colors dataset, displaying the file size in kilobytes, row count, and column count in a large <pre> element. It loads the CSV from a GitHub gist using `d3.csv` and parses it into an array of objects. The code then formats the data back to CSV with `d3.csvFormat` to calculate its size, and reads the row and column counts directly from the parsed array and its `columns` property. The result is rendered as plain text into the DOM.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors from a GitHub gist. It uses D3’s `d3.csv` method to fetch and parse the data asynchronously, then calculates summary statistics such as file size in kilobytes, row count, and column count. The resulting information is displayed in a large `<pre>` element using React state to manage and update the rendered message. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse`.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a circular bubble chart of country populations by religion, using data from the UCI Machine Learning Repository Auto MPG dataset. Built with Vega-Lite API in a D3.js framework, the code registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive scatter plot. The visualization encodes country on the x-axis, religion on the y-axis, and population as bubble size, with custom configuration for axis styling and tooltips. It loads data asynchronously via `d3.csv` and renders to an SVG canvas with automatic viewport fitting.

Loading thumbnail…

Mouse Follower

A React application renders a single SVG circle that follows the mouse cursor across the full browser window. The component tracks pointer coordinates via React's `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes on every `onMouseMove` event. The viewport dimensions come from `window.innerWidth` and `window.innerHeight`, with the circle initially centered before the first mouse movement. The example demonstrates reactive state-driven SVG updates in a React 16.9 environment.

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of eighteen randomly generated smiley faces demonstrates the modularity of React components combined with D3’s arc generator for the mouth. Each face, rendered as an SVG within a fixed 160×160 viewport, varies its stroke width, eye position, eye radius, and mouth dimensions via `Math.random()` calls in `index.js`. The `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components receive props to define individual geometry, while `FaceContainer` sets the SVG canvas and translation transform. The example uses React 17, D3 v6, and the `d3.arc` API to draw the curved mouth path.

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face rendered in SVG uses React to build the markup and D3’s `arc` generator to draw a semicircular mouth. The face’s circle, two eyes, and mouth are positioned with absolute coordinates, with the mouth’s arc defined by inner and outer radii and start and end angles. React and D3 v6 are loaded via UMD builds, with React handling the component structure and D3 providing the path geometry for the mouth.