E

e-ines

@e-ines·48 public vizzes

Loading thumbnail…

Organization Graph Diagram part 6 (drag)

This example shows an organizational network of four main nodes connected to numerous child and leaf nodes, with drag interactions repositions the nodes in real time. The graph uses a force-directed layout via `d3.forceSimulation` with `forceManyBody` and `forceLink`. Custom drag behavior is implemented with `d3.drag` to set fixed node positions (`fx`, `fy`) and restart the simulation. Nodes and links are rendered as SVG circles and lines, styled with colors from a generated palette. The data structure defines node sizes and link distances, with labels shown as SVG text.

Loading thumbnail…

Organization Graph Diagram part 5 (colors +)

This example visualizes an organizational network as a force-directed graph with colored clusters. Four main nodes, each in a distinct color from a paletton.com-generated palette, connect to child nodes and numerous leaf nodes; links between main nodes share the source node’s color. The SVG rendering uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position circles and lines, with labels displayed at each node. The `colors.js` and `data.js` modules define node sizes, link distances, and the hierarchical structure.

Loading thumbnail…

Organization Graph Diagram part 5 (colors)

This example visualizes an organizational network as a force-directed graph, using color to distinguish four main clusters. The graph shows nodes of varying sizes connected by links, with text labels identifying each organization. Built with D3 v6, it uses the `d3.forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while rendering is done with SVG circles, lines, and text elements. Node colors are defined in a separate palette file, and the data structure is generated programmatically in `data.js`.

Loading thumbnail…

Organization Graph Diagram part 4

This example visualizes a network of organizations and their sub-entities using a force-directed graph rendered in SVG. It shows numerous small leaf nodes clustered around child nodes, which connect to larger main nodes such as "Arts Web" and "Social Impact Commons", with links between main nodes indicating relationships. The code uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions, while circles and lines are drawn with SVG elements. Node sizes and link distances vary based on data constants, creating a hierarchical, tree-like structure.

Loading thumbnail…

Organization Graph Diagram part 3

This example shows a force-directed organizational graph with two main nodes, each branching into child nodes that further split into clusters of tiny leaf nodes. The visualization uses d3.forceSimulation with a negative many-body force, link distance constraints, and a center force to position the nodes. Data is defined in a separate JavaScript module, and the SVG rendering updates circles, labels, and connecting lines during each simulation tick.

Loading thumbnail…

Organization Graph Diagram part 2

This example shows a force-directed organization graph with a single parent node, two child nodes, and a cluster of leaf nodes, rendered as gray circles with text labels and black connecting lines in an SVG. Using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`, the layout is computed on each tick, updating circle and line positions. The data is defined in a separate JavaScript module with nodes and links arrays. The parent node is larger, while child and leaf nodes shrink progressively in size.

Loading thumbnail…

Organization Graph Diagram part 1

A force-directed organization graph displays three nodes—Arts Web, Community Vision, and Silicon Valley Creates—connected by two links, rendered as gray circles with labels on an SVG canvas. The code uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, drawing circles, text, and lines dynamically on each tick. Data comes from a local JavaScript array, with the simulation updating coordinates for all visual elements.

Loading thumbnail…

Force Directed Graph Starter

A force-directed graph renders three nodes as circles and two links as lines in an SVG container. The example uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute positions, then updates circle and line attributes on each simulation tick. The data is a hardcoded array of node objects and link indexes. The simulation runs continuously without user interaction, demonstrating a minimal starter template for force layouts.

Loading thumbnail…

Organization Network Graph

This example shows a minimal organization network with three nodes (Alice, Bob, Carol) and two directed links connecting them in a chain. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute the layout, then renders the nodes as circles in an SVG container. The simulation has a tick event handler that logs each update to the console, but no visual positions are explicitly set on the circles, so the graph remains static. The example relies on D3 v6 and React, though the React integration is not visible in the provided files.

Loading thumbnail…

Voronoi Overlay with Labels

This example visualizes cumulative COVID-19 death counts over time for multiple countries using a line chart with a logarithmic y-axis. It renders the paths in SVG and overlays a Voronoi diagram created with `d3.Delaunay` to enable precise mouse hovering on any line segment, highlighting the corresponding country’s path and displaying a tooltip with the country name, death total, and date. Data comes from a CSV file of global time-series deaths, processed with `csv` and `timeParse`. Interactions are managed via React state, while axes are drawn with `axisBottom` and `axisLeft`.

Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

A multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis to accommodate disparate magnitudes. A Voronoi overlay, computed with `d3.Delaunay`, maps the nearest data point to mouse coordinates, so hovering highlights that country's trajectory in black. The visualization uses React, D3 v5's `scaleTime` and `scaleLog`, and renders SVG paths from the Johns Hopkins CSSE dataset.

Loading thumbnail…

Coronavirus Deaths Over Time by Country

This visualization tracks cumulative COVID-19 deaths over time for multiple countries, with each country represented as a colored line on a logarithmic scale. The chart uses React with D3 v5, employing `scaleTime` and `scaleLog` for axes and `d3.line` to generate SVG paths from the Johns Hopkins CSSE time-series data. Axis components utilize `axisBottom` and `axisLeft` with interactive tick formatting.

Loading thumbnail…

Visualization Labels

A line chart visualizes global cumulative COVID-19 deaths over time. The visualization uses a log-scaled y-axis to accommodate the wide range of death totals. It includes red marker lines for the current date and the 3,000,000 death threshold. Built with React and D3 v5 within an SVG, the chart uses D3's scaleTime, scaleLog, and line for plotting, with axisBottom and axisLeft for gridlines and tick labels. Data comes from the COVID-19 Data Repository by Johns Hopkins CSSE.

Loading thumbnail…

Coronavirus Log Y Axis - no mark lines

This example shows the cumulative global death toll from COVID-19 over time on a logarithmic y-axis, with no marker lines to indicate specific values. The chart uses a React component with D3 v5 to render an SVG line chart, scaling time on the x-axis and logarithmic deaths on the y-axis. Data is loaded from a CSV file provided by the JHU CSSE repository. The D3 `scaleLog`, `scaleTime`, and `line` functions generate the plot, while custom X and Y axis components use `axisBottom` and `axisLeft` with grid lines to create a clean, minimal visualization.

Loading thumbnail…

Coronavirus Linear Y Axis - no mark lines

This chart visualizes the cumulative death toll of the COVID-19 pandemic over time using a linear y-axis. It shows the steady increase of global deaths from the start of the pandemic to the present, with the data sourced from a CSV file provided by the CSSE at Johns Hopkins University. The visualization is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, `line`, and `axisBottom`/`axisLeft` to render the axes and the thick black data path. The code includes commented-out marker line components, which are not actively used in the final rendering.

Loading thumbnail…

Coronavirus Linear Y Axis

A line chart plots cumulative global COVID-19 deaths over time on a linear y-axis, with red reference lines marking the current date and the three-million-death threshold. The visualization uses D3 v5 axes and scales within a React component, rendering an SVG with labeled gridlines. Data is loaded from the CSSEGISandData COVID-19 time series CSV, and the chart updates dynamically as the dataset grows.

Loading thumbnail…

React + D3 axis (Coronavirus Deaths)

This example shows a line chart of cumulative global coronavirus deaths over time, drawn with D3 scales and a React-generated SVG. The chart highlights the most recent date with a vertical marker line labeled “now” and a horizontal reference line at 3,000,000 deaths. React components manage the SVG structure, while D3’s `scaleTime`, `scaleLinear`, and `line` generator compute positions and the path. Axes are rendered using `d3.axisBottom` within a React effect. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`.

Loading thumbnail…

Coronavirus Line Chart with 3,000,000 Marker Line and Margin Convention

This chart shows the global cumulative death toll from COVID-19 over time, highlighting the moment it reaches three million with a red horizontal marker line and a labeled "now" vertical marker at the most recent date. The line path is generated with `d3.line`, using `scaleTime` and `scaleLinear` for axes, and rendered as SVG within a React component. Data is fetched from the CSSE COVID-19 time series CSV via `d3.csv`, while the margin convention is applied by translating the main group.

Loading thumbnail…

Summarizing Coronavirus Data

A plain-text visualization summarizes the global death toll from the John Hopkins Coronavirus Dataset by loading the time-series CSV with `d3.csv` and parsing the most recent date column. It calculates the total deaths using the array `reduce` method with a custom `sum` accumulator function, then formats the number with the `format` function from the d3 library. The result, displaying the death count and the latest date, is rendered as large red text inside a `<pre>` element using the DOM `textContent` property.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse the John Hopkins Coronavirus dataset. It uses the `d3.csv` API to fetch the CSV file, then calculates and displays the dataset's size in kilobytes, row count, and column count. The final message is rendered in a large `pre` element. The code also includes commented-out alternatives using `fetch` with async/await and nested promises, but the active implementation relies on D3's built-in parsing.

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for 2017, using color intensity to convey prevalence across countries. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules from World Atlas TopoJSON data. The color scale, a sequential YlOrRd scheme, maps each country’s infection rate to a fill color, while missing data is shown in gray. Data comes from the IHME HIV/AIDS prevalence dataset, loaded via `d3.csv`.

Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrant incidents, with bubbles sized by the total number of dead and missing. A time-series histogram below the map displays the same data binned by month. Brushing the histogram filters the map’s bubbles in real time. The visualization uses React for the component structure and `d3.geoNaturalEarth1` with `d3.geoPath` for the map, alongside `d3.brushX` and `d3.scaleTime` for the interactive filtering.

Loading thumbnail…

Missed Migrants on a Map and Date Histogram

This visualization combines a proportional-symbol world map with a time-series histogram to explore migrant deaths and disappearances. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to project circular marks scaled by the square root of the “Total Dead and Missing” count, overlaid on land and graticule outlines. A date histogram below aggregates these counts by month, using `d3.bin` and `d3.timeMonths`, with bars colored to match the map’s teal palette. Data is loaded via `d3.csv` from a Missing Migrants Project subset.

Loading thumbnail…

Missed Migrants on a Map

A world map visualizes the locations and magnitudes of migrant deaths and disappearances, with circles sized by the “Total Dead and Missing” count. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, overlaid with graticules and country boundaries from TopoJSON. Data comes from a CSV of Missing Migrants events, rendered as semi-transparent SVG circles scaled with `d3.scaleSqrt`. The visualization is built with React and D3 v5, distributing proportional symbols across the globe.

Loading thumbnail…

Missing Migrants

This histogram displays the total number of dead and missing migrants per month over time, with each bar’s height representing the monthly sum. The chart uses React to render SVG elements and d3.js APIs including `scaleTime`, `scaleLinear`, `histogram`, and `timeMonths` to bin the data. The data comes from the “Missing Migrants” global subset CSV, and the axes are customized with formatted date labels.

Loading thumbnail…

Points on a Map

A world map displays the geographic distribution of cities, with circles sized by population. The visualization uses a natural Earth projection with graticules, land masses, and country borders. Built with React and D3 v6, it employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the SVG. City data comes from a CSV of world cities, while country boundaries derive from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Loading thumbnail…

World Map

This interactive world map visualizes the Earth’s countries using a natural Earth projection, displaying the globe’s sphere, graticules, and landmasses with custom styling. Built with React and D3 v6, the visualization loads TopoJSON data from the `world-atlas` package and processes it using `topojson`'s `feature` and `mesh` APIs to extract country boundaries and interiors. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render all geographic elements as SVG paths, while CSS classes define teal and gray color schemes for a polished aesthetic.

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements like petal length and sepal width as colored points. Users can explore the data by selecting different attributes from dropdown menus to change the x and y axes, while hovering over the color legend highlights points of a selected species and fades the rest. Built with React and D3 v5, the visualization uses scales and SVG rendering to create the chart, with React state managing attribute selections and hover interactions.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, enabling users to explore relationships between sepal and petal measurements across three species. The visualization uses d3.scaleLinear for x and y positioning, d3.scaleOrdinal for color encoding by species, and renders marks as SVG circles. React state management updates dropdown selections for axes, while d3.csv loads the external dataset. A color legend using d3.scaleOrdinal domain values identifies species, with axes built through custom React components.

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between flower measurements and species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while the three Iris species are distinguished by color. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles for data points. Button controls update the chart state, re-scaling axes and repositioning marks in response to user selections.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses the classic Iris Dataset, rendered as an SVG in React, to explore relationships between four numeric measurements. Menus built with React-Dropdown let users dynamically select which attributes map to the x and y axes, while d3.scaleLinear and d3.extent compute the scales for each new selection. Axis components and data marks are custom React components that use D3 for tick generation, and a `<title>` element provides a tooltip. The chart deliberately sets `height` shorter than the container to reserve space for the dropdown controls.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the “v3” gallery uses D3’s `scaleLinear` and `extent` to map the Iris Dataset’s numeric attributes, rendered as SVG circles. React’s `useState` updates the x and y axes based on dropdown selections, which filter among five attribute options. Axis ticks are drawn via custom components, and tooltips display values using D3’s `format` function.

Loading thumbnail…

Menus with React

This example demonstrates a dropdown menu for selecting a pet, with the chosen value displayed in the browser’s console. The interface shows six options (Dog, Cat, Hamster, Parrot, Spider, Goldfish) with Hamster preselected. Built with React, it uses the `useState` hook to manage the selected value and a custom `Dropdown` component that renders a native `<select>` element. The component receives options, an id, and callbacks for selection changes, updating the state whenever the user picks a different option.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” on a blank page. The code uses React and ReactDOM to create a functional component, `App`, and mount it to a DOM element with the ID `root`. The page is styled with CSS to remove margins and hide overflow, and the bundle is loaded via a separate script file. The visualization serves as a baseline starter template for integrating React with other data-visualization libraries.

Loading thumbnail…

Stylized Line Chart - working with time

This stylized line chart visualizes temperature readings over time from the Sense Your City dataset. Built with React and D3 v6, it uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering an SVG path with natural curve smoothing via `curveNatural`. The minimal design includes custom axes from `AxisBottom` and `AxisLeft`, Poppins typography, and a muted color palette, with x-axis labels formatted as abbreviated weekday names using `timeFormat`.

Loading thumbnail…

Iris Scatter Plot

A scatter plot of the Iris dataset displays sepal length against sepal width, with each flower represented as a circle. The visualization uses React and D3 v6, with scales created via `scaleLinear` and axes rendered as SVG components. The code loads CSV data with `d3.csv`, formats tick values using `format`, and includes simple tooltips through SVG `<title>` elements.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart ranks the ten most populous countries, using horizontal bars to compare population counts. Built with React and rendered as SVG, it employs D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Axes, marks, and labels are composed from reusable components, with data sourced from the UN’s 2019 World Population Prospects. The chart omits gridlines on the left, using light tick marks and Poppins typography for a clean, modern aesthetic.

Loading thumbnail…

Refactored Bar Chart

This example shows the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019. The React app renders SVG elements, with d3.scaleBand mapping countries to the y-axis and d3.scaleLinear mapping population to bar widths. Axes are drawn as React components that generate SVG lines and text elements from the scales, with a load state indicated while the CSV data is fetched.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using population data from a CSV file loaded via D3’s `csv` utility. React renders the SVG elements, while D3’s `scaleBand` and `scaleLinear` position the bars and axes, and `xScale.ticks()` generates the gridline values. The chart displays country labels on the left and tick marks with numeric population values along the bottom, with styles set through inline React props and attributes.

Loading thumbnail…

Axes with React & D3

This example displays the ten most populous countries for 2020 as a horizontal bar chart, using United Nations population data fetched as CSV. The visualization is built by combining React for declarative SVG rendering with D3 utilities for data processing and layout. The code uses `d3.csv` to load and parse the data, `d3.scaleBand` to position each country along the y-axis, and `d3.scaleLinear` with `d3.max` to map population values to bar widths. The chart renders inside a React component that manages the loading state and constructs the SVG output.

Loading thumbnail…

The Margin Convention

This example demonstrates the common “margin convention” in D3, where a chart’s inner plotting area is offset from the SVG edges by specified margins. It renders a horizontal bar chart of population data for the top ten countries from a CSV file, using `d3.csv` to load and parse the data, `scaleBand` and `scaleLinear` to map country names and population values to pixel positions, and React to generate the SVG rects. The visualization uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously and update the display.

Loading thumbnail…

Rendering data with React & D3 => Population Prospects

This example visualizes the distribution of CSS named colors as a radial burst, where each color occupies an equal slice of a pie chart. The visualization loads a CSV file of color names and hex values using D3’s `csv` utility, then renders paths with React components. Each slice is generated by D3’s `pie` and `arc` functions, with the fill color directly pulled from the data’s hex value. React manages the component state and lifecycle, while SVG elements define the final graphic on a 960×500 canvas.

Loading thumbnail…

Rendering data with React & D3 => CSS named colors

This example displays all 147 CSS named colors as a vertical stack of thin horizontal bars, with each bar’s background color set from its hex value in the loaded CSV data. The visualization uses D3’s `csv` utility to fetch and parse the remote data, then React’s `useState` and `useEffect` hooks manage the asynchronous loading and rendering. The resulting SVG-free output is plain HTML elements, with React’s `map` function generating one div per color record.

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load a CSV dataset of CSS named colors using D3’s `d3.csv` utility within a React application, displaying a summary of the data’s size, row count, and column count via a formatted text message. The React component uses the `useState` and `useEffect` hooks to fetch the data asynchronously and manage its state, showing a “Loading…” placeholder until the promise resolves. The visualization renders as SVG but outputs only a text report, generated by a custom `message` function that formats the CSV metadata.

Loading thumbnail…

Vega-Lite API

This example uses the Vega-Lite API to render a bubble chart of religious demographics by country, showing the relative population sizes of the top five religions per nation. The visualization encodes country on the x-axis, religion on the y-axis, and population as the size of each circle, with tooltips displaying the exact population values. The code loads CSV data from a remote URL using d3.csv, then constructs the chart through the Vega-Lite API’s markCircle and encode methods. It integrates Vega, Vega-Lite, and the vega-tooltip handler, with appearance customized via a config object that adjusts axis labels and title fonts.

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a remote CSV file using D3.js. It renders a summary of the parsed dataset as large text, showing the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv()` with a promise to fetch the CSS named colors dataset from a GitHub gist, then applies `d3.csvFormat()` to measure the data size and accesses `data.length` and `data.columns` for the row and column counts. The result is displayed in a `<pre>` element via `document.getElementById()`.

Loading thumbnail…

Mouse Follower

A React component renders a 960-by-500 SVG containing a single circle that follows the mouse cursor across the viewport. The circle’s center coordinates are tracked via React’s `useState` hook, updated on every `mousemove` event through a `useCallback` handler that reads `clientX` and `clientY`. The SVG element listens for the mouse movement, and the circle’s `cx` and `cy` attributes are bound to the current position state. The code uses React 16.9 and `ReactDOM.render` to display the interactive graphic.

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of 18 cartoon faces using React components, each with randomized facial features such as eye offset, eye radius, mouth radius, and stroke width. The faces are composed of SVG circles and a D3 arc path for the mouth, assembled via reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. D3’s `arc` API generates the mouth shape, while `range` from D3 creates the array of faces. The SVG output is positioned using a centered `<g>` transform, with all styling handled through inline SVG attributes.