whiteswallow87

@whiteswallow87·13 public vizzes

Fork of Stylized Line Chart

This example displays a world map rendered with a natural Earth projection, using SVG paths to show land masses, country borders, graticules, and a sphere outline. The visualization is built with React and D3 v5, where the `geoNaturalEarth1` and `geoPath` functions generate geographic paths from the World Atlas TopoJSON dataset. Country interiors are separated via `mesh` from the topojson library, while the styling applies a teal land fill and gray graticules for a clean, minimalist aesthetic. The map appears static, with data loaded asynchronously through a custom `useData` hook.

May 12, 2021

Loading thumbnail…

Point on a Map

This example displays a world map with country boundaries and graticules, rendered using an SVG projection. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw landmasses and interior borders from World Atlas TopoJSON data, with a styled sphere and graticule overlay. React manages the component hierarchy, while `d3.json` loads the topology and `topojson.feature` and `topojson.mesh` extract the geographic features. The map presents a clean, polished cartographic style with distinct colors for land, borders, and graticules.

May 4, 2021

Loading thumbnail…

Fork of Points on a Map

This example shows a world map with over 50,000 cities plotted as semi-transparent points, using a Natural Earth projection. The visualization layers graticules, land masses, and country borders beneath the city data, with each city positioned via the `geoNaturalEarth1` projection and `geoPath`. Built with React and D3 v5, the code loads TopoJSON world atlas data and a CSV of city coordinates, rendering the map as SVG. City data comes from Simplemaps’ World Cities Database.

May 4, 2021

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width across three species. Hovering over a species in the color legend highlights points of that species while fading all others to 20% opacity. The visualization uses React components with d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, rendering as SVG. The color legend responds to mouse events via onMouseEnter and onMouseOut handlers, demonstrating a linked-highlight interaction pattern.

May 3, 2021

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes Fisher’s Iris dataset, allowing users to independently choose which numerical attribute (sepal or petal length/width) to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, the SVG chart renders scaled circles for each sample, with hover tooltips showing the x-axis value. The axes are drawn using D3’s `scaleLinear`, `extent`, and custom React-based `AxisBottom` and `AxisLeft` components, while the data is loaded asynchronously using D3’s CSV parser.

May 2, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements via dropdown menus that control the x and y axes. Built with React, D3 v5’s `scaleLinear` and `extent` manage the axes, while custom SVG `circle` elements render the data points. The `react-dropdown` library provides the menus, and CSV data is fetched and parsed asynchronously via `d3.csv`. Axis labels and tick marks are generated with D3’s scale API, and hover tooltips display values using a custom formatter.

May 2, 2021

Loading thumbnail…

Fork of Double Harmonic

A double pendulum is drawn as two black line segments connected by a dark circle, with a white ring tracing the path of the second mass against a full-screen SVG. The animation runs on a 50-millisecond timer, updating the pendulum’s position based on trigonometric functions of a time variable. It is rendered with D3 v6, using `select`, `range`, and `join` operations to create and update the `line` and `circle` elements. The pendulum’s motion follows a classic two-arm harmonic pattern with a fixed frequency ratio.

May 2, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

Apr 30, 2021

Loading thumbnail…

Scatter plot with Menus

This example shows a dropdown menu for selecting a pet, with the choice displayed in the console. It uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a native `<select>` element. The App component maps a predefined array of pet options into the dropdown, and each selection triggers an `onSelectedValueChange` callback, logging the updated value. The code includes React and ReactDOM from UMD builds, and the dropdown labels are styled with CSS for large text.

Apr 19, 2021

Loading thumbnail…

Stylized Bar Chart

This example shows a time-series line chart of San Francisco weekly temperatures, with a smooth curved line connecting data points and labeled axes for time and temperature. The visualization loads CSV data from a GitHub gist using D3’s `csv` utility and renders a React-based SVG, where scales (`scaleTime`, `scaleLinear`) map data to pixel coordinates. The line path is generated with D3’s `line` and `curveNatural` functions, while custom React components (`AxisBottom`, `AxisLeft`) render tick marks and labels with SVG lines and text.

Apr 15, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes global religious affiliations by country using a bubble chart, where bubble size encodes population and axes map countries against religions. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG view. The visualization loads CSV data from a Gist via D3’s `csv` function, configures axis and label styling, and auto-sizes to the window. A tooltip handler displays population values on hover, while the circle marks are encoded with categorical fields for country and religion.

Apr 1, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows the basic performance and structure of a CSV dataset by displaying its file size, row count, and column count as large text. It loads the data from a remote GitHub gist containing CSS named colors using the `d3.csv` method. The code then uses `d3.csvFormat` to calculate the data size in kilobytes and accesses the parsed array’s `length` and `columns` properties. The resulting summary is inserted into the page’s DOM via `textContent`.

Mar 31, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of randomly generated smiley faces renders in SVG via React. Each face uses D3’s `arc` generator to draw a mouth, while reusable React components compose the background circle, eyes, and face container. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions due to `Math.random()`. The code imports `range` from D3 to create the grid and leverages React’s `map` to render each face with unique parameters.

Mar 28, 2021