Skip to main content
Log in
S

ssmadha@hotmail.com

@ssmadha·14 public vizzes

Loading thumbnail…

Network Graph with D3 Packs on Zoom

This interactive network graph visualizes gene expression and alternative splicing (ASIF) across different tissues. Users select a tissue from the body map on the left, and filter by a minimum expression value with the slider. The graph supports zooming, panning, and dragging; zooming in reveals gene names and individual transcript structures. A legend allows filtering by cluster, and the body map supports organ highlighting and selection. The visualization is implemented with D3 and animates transitions smoothly.

Feb 11, 2026
Loading thumbnail…

Multi Scatter Plot of ASIF between Tissues

This multi-scatter plot visualizes the ASIF dataset, displaying gene expression across six tissue-type combinations. The grid layout arranges three columns (stomach, bone marrow, skeletal muscle) against two rows (small intestine, choroid plexus), with each cell rendering a scatter plot of gene expression values. The visualization uses D3 with a paired color scheme to represent gene clusters, and includes interactive features such as hover tooltips that display gene names and a linked legend for filtering clusters by mouseover. Axes are labeled for each tissue pair, and the small multiples design allows for easy comparison across the tissue pairs.

May 24, 2024
Loading thumbnail…

Scatter with Body Selector

This scatterplot-style interactive body map uses D3.js to render SVG paths of human organs loaded from an external path dataset. Users can select two organs via a custom legend, triggering a dimming effect that highlights only the selected body parts while fading the rest, with hover interactions providing additional focus. The body outline and organs are drawn as SVG paths, with transformations for positioning and rotation, and the legend enables multi-select comparison across anatomical regions.

Apr 23, 2024
Loading thumbnail…

ASIF Heatmap

This visualization displays ASIF, a gene-tissue expression heatmap with hierarchical annotations on both axes. Rendered as an animated d3 visualization using `scaleBand`, `scaleOrdinal`, and `scaleSequential` with the Inferno color scheme, it supports filtering through clickable y-axis annotation bars that trigger `setState`. A tooltip, built with `d3.pointer` and HTML elements, shows the gene and tissue for each cell. Data comes from the ASIF dataset, with a color legend generated from the `colorScale`.

Apr 23, 2024
Loading thumbnail…

ASIF Data

This visualization explores the ASIF dataset, which measures the DNA-binding affinity of transcription factors across various tissues. It presents a heatmap of ASIF and gene expression values, organized by gene and tissue clustering, alongside network graphs of protein-protein interactions and co-occurrence. The code uses `d3.csv` to load multiple CSV files, including the melted transcript data from a remote GitHub URL, and employs `d3.forceSimulation`-ready edge lists for network visualization. The dataset is preprocessed for numeric values and sorted based on cluster orderings.

Apr 23, 2024
Loading thumbnail…

Body with Organs

This interactive visualization displays a human body silhouette with clickable and hoverable internal organs. Using D3.js, the body outline and individual organs are drawn as SVG paths from the provided bodyData, with organ opacity responding to user selection and hovering. A custom legend component supports toggling organs on and off, while clicked organs remain highlighted and non-selected organs fade to 20% opacity. The data paths are sourced from SVG Viewer, and the chart is implemented in a reusable JavaScript module under the MIT license.

Apr 21, 2024
Loading thumbnail…

Scatter Plot of ASIF between Tissues

This scatter plot visualizes the ASIF dataset, comparing gene expression between the small intestine and stomach tissues. The D3 chart displays points colored by gene cluster, with interactive hover highlighting that dims non-matching points and reveals gene labels. Label placement uses a simulated annealing labeler algorithm that minimizes leader line intersections and overlaps. The visualization includes a legend for cluster identification and uses D3 scales, axes, and the d3.scaleOrdinal color scheme.

Apr 19, 2024
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the Iris dataset, enabling multidimensional exploration through brushing and filtering. Users can brush along any axis to highlight data subsets across all dimensions, with the brushed intervals updating dynamically. Built with React and D3, the visualization leverages `scaleLinear`, `scalePoint`, and `scaleOrdinal` to map continuous and categorical dimensions, while a `line` generator renders each observation as a polyline. Brushing is implemented via D3's `brushY` for each axis, and the visualization responds to container resizing. The color encoding uses a shifted categorical palette for visual distinction, and the code is structured as a reusable component that can be exported from VizHub to a Vite project, as demonstrated by the linked export template.

Mar 19, 2024
Loading thumbnail…

Fork of Responsive Axes with Extra Options

This example demonstrates a responsive D3 v7 chart with customizable axes, including rotated tick labels on both the X and Y axes. It shows how to adjust tick density, outer ticks, tick sizes, and axis label offsets through the exported `axes` and `viz` functions. The visualization uses `d3.axisBottom` and `d3.axisLeft` with `scaleLinear` scales, and automatically resizes via a `ResizeObserver` that updates the chart dimensions. A gray inner rectangle highlights the plotting area, with separate modules handling axis rendering, labels, and resize observation.

Mar 13, 2024
Loading thumbnail…

Non-Investor Owned Electric Utility Rates

This visualization displays the first record from a dataset of non-investor owned electric utility rates, sourced from the OpenEI data portal. It shows the raw JSON structure containing fields for zip code, utility name, state, service type, ownership, and rates for commercial, industrial, and residential customers. The code loads the CSV data, converts numeric fields to numbers, and uses JavaScript's `JSON.stringify` to display the first data entry in a formatted `<pre>` element within the container.

Jan 23, 2024
Loading thumbnail…

Supply Chain GHG Emission Factors

This example displays the first row of the Supply Chain GHG Emission Factors dataset, which includes details such as the 2017 NAICS code, industry title, and emission factor values in kilograms of CO2e per 2021 USD. The code imports the CSV data, converts numeric fields to numbers, and renders the first data object as formatted JSON in a pre element using JavaScript and template literals. The visualization highlights the dataset structure and units without additional charting libraries.

Jan 23, 2024
Loading thumbnail…

RNA Tissue expression

This example displays a single row of tabular RNA tissue expression data as a formatted JSON object. The code loads a CSV file containing gene expression values measured in nTPM across various human tissues, then converts the numeric field to a number type. Using the Vega dataset import and a simple container assignment, it renders the first record’s fields and values in a monospaced preformatted block. The visualization highlights the raw data structure rather than aggregating or plotting the expression levels.

Jan 23, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the Solar System with their relative sizes drawn to scale, while distances between them are not accurate. Planets are rendered using SVG gradients, with Earth and Neptune using radial gradients, while Venus, Mars, Jupiter, and Saturn have custom linear gradients with multiple color stops to create a textured, planet-like appearance. The scene is set against a black background. The code uses the d3 library, specifically the `select`, `transition`, and `easeLinear` functions, and dynamically constructs SVG elements based on data sourced from Wikipedia’s list of gravitationally rounded objects.

Jan 20, 2024
Loading thumbnail…

Fork of Circles with D3

This visualization uses D3 to draw a four-leaf clover from basic SVG shapes, with a green circle and stem on a pale green background. The code constructs the clover from four large circles, a center circle, a rectangular stem, and triangular fill areas, all positioned mathematically relative to the container’s center. Black lines extend outward from the center to give each leaf a defined vein, and the entire composition is rendered by selecting SVG elements using D3’s data-join pattern.

Jan 13, 2024