Skip to main content
Log in
S

sxtnxy

@sxtnxy·13 public vizzes

Loading thumbnail…

Fork of Fork of 112 Multiple Views

This interactive visualization presents a choropleth map of the Netherlands showing emergency calls (112), with a linked time-series histogram below for brushing. The map displays individual incident locations as circles, while the histogram aggregates calls by date. Users can brush over the histogram to filter the map to a specific time range. The visualization uses React for the interface, with D3.js APIs including `d3.geoMercator`, `d3.geoPath`, `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of 112 emergency calls, with Netherlands municipal boundaries from TopoJSON, rendered as SVG.

Feb 10, 2022
Loading thumbnail…

Loading data with fetch

This example demonstrates how to load and parse a CSV file asynchronously in D3, displaying the file size and row count. Using the Fetch API, it retrieves a raw CSV from a GitHub gist, then leverages d3.csv and d3.csvFormat to parse and measure the data. The code also includes commented alternatives using async/await and the d3-fetch module. A large pre element presents the resulting statistics, with the page built on D3 v5 and vanilla JavaScript.

Jan 27, 2022
Loading thumbnail…

Working with time

This visualization shows how temperature varies over time, plotting weekly temperature measurements as a connected line with individual data points. The chart uses D3 scaleTime and scaleLinear to map timestamps and temperatures to SVG coordinates, with tooltips revealing the day of the week for each point. React manages the component state and rendering, while D3’s csv loader fetches the San Francisco temperature dataset. The marks component applies D3’s curveNatural interpolation to create a smooth line between observations, and the custom axis components generate the time-based tick labels.

Jan 5, 2022
Loading thumbnail…

Fork of Stylized scatter chart

This scatter chart displays iris flower measurements, plotting sepal length against sepal width. Each flower is represented by a fixed-size circular mark, with a native SVG `<title>` element providing tooltips on hover. The visualization uses React to manage component structure, while D3 v5’s `scaleLinear` and `extent` functions handle axis scaling and domain calculation. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are rendered as custom React components that generate SVG ticks and gridlines.

Jan 5, 2022
Loading thumbnail…

Axes with React and D3

A horizontal bar chart displays population data for ten countries from a UN 2019 dataset. React components render SVG marks and axes, with D3 scales (scaleBand, scaleLinear) and tick generation driving the layout. AxisBottom and AxisLeft build tick marks and labels, while Marks draws rectangles sized by population values. The chart shows population rankings with labeled bars on a clean white background.

Jan 5, 2022
Loading thumbnail…

Stylized bar chart

A stylized bar chart displays the top ten countries by 2020 population, using teal rectangular marks scaled by linear population values. Built with React and D3 v5, the SVG visualization incorporates custom axis components and a Poppins typeface. Data originates from the UN's 2019 population estimates, with D3's `scaleBand` and `scaleLinear` handling layout while `format` converts tick labels from gigabytes to billions.

Jan 4, 2022
Loading thumbnail…

Bar chart Load data with react d3 ark

This example shows a horizontal bar chart displaying the top 10 countries by population for 2020, with each bar’s length proportional to population values. The chart loads CSV data from a GitHub gist using D3’s `csv` method within a custom `useData` React hook, which manages the asynchronous data fetching via `useState` and `useEffect`. The visualization then maps the data using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering the bars as SVG `<rect>` elements within a React component.

Jan 4, 2022
Loading thumbnail…

Fork of Fork of Load data with react d3 ark

This example displays a color wheel made from CSS named colors, arranged as a pie chart that fills the entire SVG canvas. The code uses React hooks (`useState`, `useEffect`) to fetch CSV data from a GitHub gist via `d3.csv`, then renders the visualization using `d3.pie` and `d3.arc` with SVG paths. Each slice’s fill is set to the hex value from the loaded data. The loading state shows a large "Loading..." text while data is being fetched.

Dec 31, 2021
Loading thumbnail…

Fork of Load data with react d3

This example renders a grid of colored squares from a CSV file containing CSS named colors and their RGB hex values. Using React’s `useState` and `useEffect` hooks, the code fetches the data via `d3.csv` from a GitHub gist, then maps each row to a `<div>` styled with the corresponding background color. The visualization initially displays a loading message until the asynchronous data request completes. The work leverages the D3.js v5 library for data parsing and React v16.9 for component state and rendering.

Dec 30, 2021
Loading thumbnail…

Vega lite visualization

This example uses Vega-Lite API within React and D3 to create a bar chart of population by country, colored by religion. The visualization loads CSV data from a GitHub gist and renders an interactive bar chart with tooltips showing population values. It uses `vl.markBar`, `vl.x().fieldN('country')`, `vl.y().fieldQ('population')`, and a color encoding for religion. The chart fits to the window size and applies custom axis styling from a config object, with a Vega Tooltip handler for interactivity.

Dec 29, 2021
Loading thumbnail…

Load data with react

This example demonstrates loading a CSV file in a React component and displaying basic statistics about the dataset. It uses the D3 `csv` function to fetch data from a GitHub Gist containing named CSS colors, then shows the file size in kilobytes and the row count. The React hooks `useState` and `useEffect` manage the asynchronous data loading, and the `message.js` module formats the output using `d3.csvFormat`. While data is being fetched, the interface displays a "Loading..." message.

Dec 29, 2021
Loading thumbnail…

mouse movement

A single black circle tracks the user's mouse position across an SVG canvas, creating a simple interactive visualization. The application is built with React and D3 v7, using React's `useState` hook to store and update the mouse coordinates on every `mousemove` event. The circle's center (`cx` and `cy`) is bound directly to the state, and its radius is fixed at 30 pixels. The rendering is handled entirely through React's declarative SVG elements, with no D3 components used beyond the library's inclusion in the script tags.

Dec 22, 2021
Loading thumbnail…

Fork of Smiley Face Part II new

A grid of eighteen randomly generated smiley faces appears, each rendered with distinct proportions and stroke weights. The faces are built using React components that compose SVG circles for the background and eyes, and a D3-generated arc path for the mouth. The `d3.arc` API creates the curved mouth shape, while the `d3.range` function generates the count of faces. Each face positions its eyes and mouth at randomized offsets and radii, producing a varied, playful collection.

Dec 21, 2021