zyniax

Fork of Organization Graph Diagram

This network graph diagrams the connections among four main organizations in the Kenneth Rainin Foundation’s arts ecosystem, with colored child nodes and leaf nodes representing partner groups. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the layout positions nodes dynamically, while drag interaction lets users manually reposition them. Node size encodes hierarchy—main nodes are largest, leaves smallest—and link distances vary by relationship type. The visualization renders as an SVG with circles for nodes, lines for links, and text labels, with colors defined in a separate palette module.

Apr 22, 2021

Multiple Views with Brushing

A world map displays the locations and magnitudes of missing migrant incidents, sized by total dead and missing. A temporal bar chart below shows the corresponding monthly counts over time. Brushing a time range in the histogram filters the map’s circles to only incidents within that period. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas data, while the histogram uses `d3.bin`, `d3.scaleTime`, and `d3.brushX`, all rendered as SVG via React.

Apr 22, 2021

Smiley face part I

A grid of eighteen smiley faces is rendered, each with a randomized eye radius, creating subtle variation across the repeated motif. The visualization shows how reusable React components compose layered SVG shapes: a yellow background circle, two eyes, and a d3.arc-generated mouth path. The code imports React, ReactDOM, and d3 v5, using d3’s `arc` for the mouth and `range` for generating the array, all rendered through SVG elements within a `g` transform.

Apr 20, 2021

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Apr 20, 2021

Fork of Force Directed Graph Starter

This example shows a minimal force-directed graph with two linked nodes, “Arts Web” and “Community Vision,” rendered as gray circles with text labels on an SVG canvas. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes, while tick events update the circle, text, and line elements. Data is imported from a separate `data.js` file, and the graph appears as a simple static layout with no additional interaction.

Fork of Force Directed Graph Starter

This example shows a minimal force-directed graph with three nodes (Alice, Bob, Carol) and two links connecting them in a chain. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the graph runs a physical simulation to position the nodes. The SVG circles are added to a d3 selection bound to the node data, with a tick listener that updates their positions. The code demonstrates the basic setup for a force layout but does not yet implement the actual position updates in the tick handler.

Multiple Views Cleanup

A choropleth-style bubble map of missing migrant incidents overlays a natural Earth projection with graticules and country borders, sized by total dead and missing. A linked time-series histogram below uses a brush to filter the map’s circles. Built with React and D3 v5, it employs `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `bin`, `brushX`, and `timeMonths` on SVG, drawing from the Missing Migrants Project dataset.

missing migrants Points on a Map

This visualization combines a world map with a time series to show the locations and monthly totals of missing migrants. The map uses a natural Earth projection with `d3.geoPath` to render landmasses, graticules, and semi-transparent circles scaled by the square root of the reported dead and missing count. A linked histogram below, built with `d3.bin` and `scaleTime`, displays the aggregated monthly death toll. Data comes from the Missing Migrants Project, while country boundaries are sourced from World Atlas TopoJSON.

Fork of Working with Time

This visualization displays monthly totals of dead and missing migrants over time, binned from daily records in the Data Canvas Sense Your City Dataset. Bars show aggregate counts per month, with tooltips revealing exact values. Built with React and D3 v5, it uses `d3.bin` and `timeMonths` to group data, `scaleTime` and `scaleLinear` for axes, and SVG rectangles for rendering.

Points on a Map

This visualization displays a world map with circles marking cities whose population exceeds 50,000, using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. The map includes graticules and country boundaries from World Atlas TopoJSON, with city data sourced from Simplemaps. Circle radii are scaled by population using `scaleSqrt`, rendered as semi-transparent SVG elements in React. The implementation leverages React hooks for data loading and D3 v5 for geographic projections and CSV parsing.

Apr 13, 2021

Points on a World MAP

This visualization displays the world’s cities as small circles positioned on an equal Earth projection, with country boundaries drawn from TopoJSON and a plain gray sphere backdrop. The map itself is rendered using D3’s `geoEqualEarth` and `geoPath`, while city coordinates are projected into screen space and drawn as SVG circles. The data comes from a CSV of world cities, and the example intentionally mixes a polished geographic base with minimalist, unlabeled point marks.

Apr 13, 2021

Scatter Plot with Color Legend

This example visualizes the classic Iris dataset using a scatter plot of petal length versus sepal width, with points colored by species according to a color legend. Selecting a legend item dims all other points and restores full opacity to the matching species. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` to compute scales, while custom React components render axes, marks, and the interactive legend as SVG. The data loads as CSV via D3’s `csv` function.

Scatter plot with color legends

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while color-encoding points by species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color scale, and renders SVG circles through React components. The chart includes a custom color legend and axis components, with data loaded asynchronously from a CSV using D3's `csv` parser.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. Users can dynamically switch between four quantitative attributes for both the X and Y axes using ReactDropdown menus, while color encodes species via d3.scaleOrdinal. The visualization is built with React and d3.v5, rendering SVG circles and axes through custom components, with data loaded asynchronously using d3.csv.

scatter plot

This scatter plot explores the Iris flower dataset, showing the relationship between sepal width and a user-selected attribute. A dropdown menu lets viewers switch the x-axis between sepal length, petal length, petal width, and sepal width, while the y-axis remains fixed. The visualization uses React with D3 v5’s `scaleLinear` for axes and rendering points as SVG circles. Data is loaded from a CSV file via D3’s `csv` function, with formatted axis labels and tooltips displaying values.

Fork of Smiley Face Part II

A React application displays a pet-selection dropdown menu, allowing users to choose from six animal options. The selected value is captured through state management and reflected in the dropdown’s highlighted choice. The interface uses React’s `useState` hook and a custom `Dropdown` component for handling user input, while the overall structure is rendered as SVG via ReactDOM. The code includes a commented-out SVG smiley face, but the active visualization solely presents the form controls.

World MAP

This interactive world map visualizes country boundaries using the GeoEqualEarth projection, with a light gray sphere background and teal landmasses separated by thin gray borders. The map renders as SVG via React and D3 v5, using `d3.geoPath` to project TopoJSON data from the world-atlas dataset, while `mesh` from topojson draws the interior boundaries between adjacent countries.

Line chart with time

This line chart displays temperature readings over time, using a smooth curved path and circular markers for each data point. The visualization is built with React and rendered as SVG, employing d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and d3.csv to load the San Francisco weekly temperature dataset from a GitHub gist. Tooltips appear on hover via SVG title elements, showing the formatted timestamp for each point.

Apr 9, 2021

Fork of Refactored Bar Chart

This horizontal bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The visualization uses React with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, rendering bars as SVG rectangles. The code leverages `csv` from D3 to load data, and includes custom axis components for formatting tick labels with the `format` function. Tooltips provide formatted population values via the `<title>` element.

Apr 8, 2021

Fork of Pathetic Bar Chart

A fork of the Pathetic Bar Chart displays the top 10 most populous countries for 2020 as horizontal bars, using plain SVG rectangles with no axes. The chart renders React components that leverage D3 v5’s `scaleBand` for categorical positioning of countries and `scaleLinear` for population widths, while generating tick marks via `xScale.ticks()`. Data is loaded asynchronously from a United Nations World Population Prospects 2019 CSV, filtered to the first ten rows, and visualized with a left margin for country labels.

Apr 8, 2021

Fork of Fork of Loading Data with React & D3

This example displays a horizontal bar chart of UN population data for 2019, using React state to manage the asynchronous loading of CSV data via D3’s `csv` utility. The bars are rendered as SVG `<rect>` elements whose widths map to population values through `d3.scaleLinear`, while country names are positioned using `d3.scaleBand`. The visualization shows a loading message until the data arrives, then renders the chart with a fixed size of 960×500 pixels. D3 v5 and React 16.9 are loaded via CDN, and the data is fetched from a gist hosted by Curran Kelleher.

Fork of Loading Data with React & D3

A donut chart displays all CSS named colors as equal-width slices, colored by each color’s RGB hex value from a CSV dataset. The code uses React hooks (`useState`, `useEffect`) to fetch the data with `d3.csv`, then maps each row to an SVG `<path>` generated by `d3.arc`. The chart’s slices are arranged by row order, with a loading message shown before data arrives.

Loading data with react d3

This example demonstrates how to load external data in a React application using d3. It fetches a CSV file containing CSS named colors via `d3.csv` and displays a simple text status indicating whether the data has loaded. The visualization uses React’s `useState` hook to manage the loading state and updates the UI asynchronously once the data arrives. The code is built with React 16.9, D3 v6, and renders into the DOM via `ReactDOM.render`.

Fork of Smiley face part 1

This example renders a single interactive circle that follows the mouse cursor across an SVG canvas. The visualization uses React’s `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates from the `onMouseMove` event, updating the circle’s center position in real time. Rendered via ReactDOM and SVG, the circle’s radius is fixed at 30 pixels, and the initial position is set to the center of a 960×500 viewport. The underlying d3 library is loaded but not directly used in the interaction logic.

Loading and parsing CSV Data

This example demonstrates how to load and parse a CSV file in a web browser using D3 v6. It fetches a remote CSV file containing CSS named colors via the `fetch` API, then converts the raw text into a JavaScript array of objects with `d3.csvParse`. The parsed data is logged to the browser console, showing the structured result of the parsing operation. The visualization itself is minimal, focusing solely on the data-loading pipeline rather than rendering any graphical output.