B

Boris Gomaz

@borisgomaz·16 public vizzes

Loading thumbnail…

D3.js Network Graph

This example visualizes a network graph using D3.js, displaying nodes as circles and links as weighted lines based on adjacency data from a JSON file. It employs `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to arrange the nodes. SVG elements are generated for rendering. Link thickness encodes the absolute weight from the input data, with positive and negative correlations represented distinctly. The code loads data via `d3.json` and positions nodes using the simulation’s `ticked` event handler.

Loading thumbnail…

D3.js Circle with Dots and Names

This example visualizes protein contact data by arranging 233 dots in a circular layout around a central point, representing residues from a PDB structure. Each dot is positioned using trigonometric calculations with fixed angle increments, and amino acid names are labeled when the dot index matches the residue number from the JSON input. The visualization uses D3.js v4 with SVG elements, appending circles and text nodes via the `d3.json` callback, `.selectAll()`, and `.enter()` patterns. Data originates from a `data.json` file containing interaction pairs with residue identifiers and symmetry operators.

Loading thumbnail…

Fork of Edge Bundling

This visualization shows a hierarchical edge bundling diagram of a dependency network with 16 nodes arranged radially around a circle. The code loads JSON data defining imports between nodes, then uses d3.cluster and d3.radialLine with curveBundle.beta(0.75) to draw curved paths connecting each node to its dependencies. Node labels are positioned around the circumference using SVG text with rotation transforms. The visualization uses an SVG rendering approach with the D3 v4 library, adapting a technique from the d3-graph-gallery.

Loading thumbnail…

Fork of Edge Bundling

This radial visualization displays hierarchical data and its interconnections using edge bundling. It shows a circular cluster of labeled leaf nodes, with curved paths representing connections between them, bundled via `d3.curveBundle.beta(0.85)`. The diagram is built with React and SVG, using D3 v4 APIs like `d3.cluster()`, `d3.radialLine()`, and `d3.scaleLinear()`. Data is loaded via `d3.json` from a remote source, with node size encoded by value and labels positioned responsively around the circle.

Loading thumbnail…

Observable Tree

This visualization displays a hierarchical tree layout created from a custom flare.json dataset, where each node is represented by a circle and connected by curved links. The implementation uses the `d3.tree` layout algorithm with `d3.stratify` for hierarchy construction and `d3.curveBumpX` for link interpolation. Node labels show names, and hovering reveals the full ancestor path as a tooltip via the `title` attribute. Links point to GitHub tree views for each file or directory, rendering in a new tab.

Loading thumbnail…

Fork of Smiley face part 1

A grid of randomized smiley faces renders in SVG via React, with each face composed of modular components for the background circle, eyes, and mouth. The faces vary in stroke width, eye offset and radius, and mouth dimensions, generated using D3's `range` and `Math.random()`. The mouth arc is drawn with D3's `arc` generator, while the `FaceContainer` handles SVG scaling and centering through a group transform.

Loading thumbnail…

Tree of Life

A phylogenetic tree visualization presents the evolutionary relationships among organisms, arranged radially with colored branches distinguishing major domains such as Bacteria, Eukaryota, and Archaea. The interactive chart allows users to toggle branch length display with a smooth animated transition. Built with D3.js, it uses hierarchical clustering to position nodes, SVG rendering for scalable graphics, and transition animations to update paths smoothly. Mouseover interactions highlight the lineage from a leaf back to the root. The data originates from a Newick-format phylogenetic tree file.

Loading thumbnail…

Multiple sequence alignment

A multiple sequence alignment heatmap displays amino acid residues across aligned protein sequences, with rows representing individual chains by PDB code and columns indicating alignment positions. Each cell is colored according to its amino acid type using a custom d3.scaleOrdinal palette. The visualization uses d3.csv to load data, d3.scaleBand for axes, and d3-tip to show tooltips detailing the residue number and chain information on hover. Rendered as SVG rectangles with mouseover interactions, the chart includes a title and axis labels.

Loading thumbnail…

Number of intermolecular contacts

This interactive histogram displays the number of intermolecular contacts for each amino acid position in a protein, using data from a CSV file containing contact details. The chart uses fixed bin widths along the x-axis, with bar heights representing contact counts. Hovering over a bar reveals a tooltip with the exact contact number, amino acid position, and a list of amino acids involved. The visualization is built with D3 v6, using `d3.histogram` to bin the data, `d3.scaleLinear` for axes, and SVG rectangles rendered via `join` with mouse event handlers for interaction.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center. Each bar shows a country’s total population segmented by religion, with tooltips revealing exact values on hover. The visualization uses D3 v3’s `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`. The color legend is built with `d3.legend`, and highlighting a religion in the legend dims other bars via a semi-transparent overlay while redrawing the selected layer in a foreground group. The SVG rendering includes a custom SI tick formatter that converts billions to “B.”

Loading thumbnail…

Rendering Data with React & D3

This example renders CSS named colors as a pie chart, with each slice filled by its corresponding hex value. The data loads asynchronously from a CSV file using D3’s `csv` utility, and React’s `useState` and `useEffect` manage the loading state. Once fetched, the `pie` layout partitions the data, and the `arc` generator produces the SVG paths. React maps each arc to a `<path>` element within an SVG container, combining D3’s data transforms with React’s declarative rendering.

Loading thumbnail…

Fork of Mouse Follower

This fork of the Mouse Follower example displays a text summary of a CSV dataset loaded from a GitHub gist. The React application uses D3’s `csv` function to fetch and parse the CSS named colors data, then renders a multi-line message showing the kilobyte size of the formatted CSV, the number of rows, and the number of columns. The visualization relies on React’s `useState` and `useEffect` hooks for managing state and asynchronous data loading, with D3’s `csvFormat` used to compute the data size.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3's `d3.csv` function. The program fetches a dataset of CSS named colors from a GitHub gist and then displays a summary containing the dataset's file size, number of rows, and number of columns. The summary is rendered in large text within a `<pre>` element using the `d3.csvFormat` API and basic JavaScript string concatenation. The code highlights the simplicity of asynchronous data loading in D3 v7.

Loading thumbnail…

Smiley face part 1

This example shows a grid of randomly generated smiley faces, each with varied eye positions, sizes, stroke widths, and mouth dimensions. It renders 18 distinct faces using React components such as `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with each face drawn as an SVG group centered via a `transform`. The code leverages d3’s `arc` generator to create the mouth path and `range` to produce the array of faces, with ReactDOM rendering the output to the page.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a static message, “Hello HTML!”, centered on the page and styled with large, bold text. The page is built with a minimal HTML structure that uses a CSS class to set the font size and alignment. It demonstrates a basic setup for a web page, with the styling contained within a `<style>` block and the content in a `<div>` element. The example shows how simple text presentation can be achieved using only standard HTML and CSS, without any JavaScript or data processing involved.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the message “Hello HTML!” in large, centered text using HTML and CSS. The page contains a single styled div element, with the font size and text alignment controlled by CSS rules. It uses no external libraries or data sources, serving purely as a static visual output. The JavaScript and React framework are mentioned, but the code itself relies only on native HTML and CSS for its rendering approach.