1

1Cr18Ni9

@1Cr18Ni9·47 public vizzes

Loading thumbnail…

PackTree(logical Tree)

This example demonstrates an interactive pack layout for managing logical search queries. Users build a tree of data nodes representing query criteria, which can be merged into AND or OR logical groups using drag-and-drop or keyboard shortcuts. The visualization uses D3.js v4's pack layout algorithms, including `d3.packSiblings` and `d3.packEnclose`, to arrange circles representing criteria and logical containers. Built with Vue.js, it renders as animated SVG elements and fetches initial collection and document data from JSON files via axios, with the query-building interface provided by a Vue-based dialog form.

Loading thumbnail…

Canvas Animation Using D3.js II

This example demonstrates an interactive canvas visualization using D3.js, where moving the mouse highlights circles that are generated and animated on a canvas. It uses an offscreen canvas with the same dimensions as the main one, rendered ahead of time, so that the code can detect hovered circles via `ctx.getImageData(mouseX, mouseY, 1, 1)`. The interface includes a dat.GUI control to adjust the circle count, which regenerates the data and redraws the canvas, alongside a stats.js monitor for rendering frequency. Clicking a button reveals the offscreen canvas as an image via `toDataURL()`.

Loading thumbnail…

Canvas Animation Using D3.js

This example demonstrates how to apply D3.js’s enter-update-exit pattern and transitions to custom DOM elements, then render their positions and radii onto an HTML5 canvas. A dat.GUI control regenerates randomized circle data, triggering smooth positional and size animations on custom `<c>` nodes. A `MutationObserver` watches attribute changes on a custom element container and redraws the canvas whenever those animated attributes update, bridging the gap between D3’s DOM-centric data joins and canvas-based rendering. The code uses `d3.select`, `transition.attr`, and the Canvas 2D `arc` API.

Loading thumbnail…

svg & canvas & brush

This example overlays a canvas-rendered scatterplot of 1,000 randomly generated points with an SVG layer containing axes and a d3.brush selection rectangle. The canvas continuously redraws each frame using `requestAnimationFrame`, highlighting points under the mouse cursor via `ctx.isPointInPath` and filling those inside the brush area. The SVG brush, configured with `d3.brush()`, updates the selection bounds, demonstrating a hybrid approach that combines canvas performance with SVG’s interactive brush capabilities.

Loading thumbnail…

svg canvas clip-path

A side-by-side demonstration compares SVG and Canvas clipping in real time. Both render 80 randomly positioned circles and the text “SVG Clip Path” inside a circular clip region that follows the mouse. The SVG view uses a `<clipPath>` with a `<circle>` element, while the Canvas view applies the same path via `ctx.clip()`. D3 v5 handles mouse events and element selection, updating the clip circle’s `cx` and `cy` attributes and redrawing the canvas on each move.

Loading thumbnail…

canvas globalCompositeOperation

A visualization gallery shows 26 small canvas panels, each demonstrating a different Canvas globalCompositeOperation mode. Three static colored circles (red, blue, green) form the background, while a single yellow circle bounces around each panel using d3.v4’s data binding and requestAnimationFrame. Users can drag the moving circle with their mouse, pausing its animation. The code defines each circle’s initial position and velocity via JavaScript, then applies the composite operation from the `types` array to control how yellow blends with the background.

Loading thumbnail…

dynamic pack

This interactive pack layout uses a circle-packing algorithm from D3 v4 to represent a hierarchical tree. Users can drag nodes to merge them, right-click on the canvas to add new nodes, or right-click on a node to delete it along with its descendants. The underlying `rData` tree object updates dynamically, and all changes are rendered as animated SVG elements. The implementation relies on custom `d3.drag` behaviors and the `d3.pack` layout.

Loading thumbnail…

Intersections of two circles

Two draggable circles show the geometric intersection points between them. As either circle moves, the two intersection points, rendered as red dots, update in real time. When the circles do not overlap, the dots disappear. The example uses D3 v4 with SVG elements, applying the `d3.drag` behavior to handle mouse interaction and a custom JavaScript function to calculate the circle intersections, based on a Stack Overflow solution.

Loading thumbnail…

Understanding of Zoom behavior

This example demonstrates a zoom behavior on a map populated with 500 randomly placed symbols, each rendered as a distinct path. When the user zooms, the symbols scale their area by the square of the zoom factor, while the stroke width is adjusted to remain visually constant. The code uses d3.zoom to manage the zoom transform, accessing the `d3.event.transform` to read the scale factor `k`. It redraws the `d` attribute of each path to adjust symbol size and sets `stroke-width` to `1/t.k` to maintain consistent border width.

Loading thumbnail…

Matrix3 Manipulation

A live interactive demo of 2D affine transformations implemented with a custom 3×3 matrix class. The page shows a gray box containing a dark square with a photo background and the label “F__Q”, which users can translate, scale, and rotate in real time using the dat.GUI control panel. The underlying JavaScript builds transformation matrices for translation, rotation, and scale, multiplies them in sequence, and converts the result to a CSS `matrix()` string applied to the element’s `transform` property.

Loading thumbnail…

Maiden Webgl Work

This WebGL example demonstrates real-time interactive 2D shape manipulation, showing a rectangle that users can translate, rotate, and scale through a dat.GUI control panel. The code builds a custom vertex and fragment shader pair that handles position transformation, converting pixel coordinates to clip space, while WebGL renders the colored rectangle on a canvas. It references WebGL Fundamentals' scaling lesson and uses the webgl-utils helper library to compile shaders, with all geometry defined as raw vertex data in a buffer.

Loading thumbnail…

Map - I

Clicking the SVG canvas toggles between a map of Wenzhou districts and a pie chart of their GDP values. Each shape morphs between its geographic boundary and pie slice using `transition.attrTween` with a custom `pathTween` interpolator. The code builds both geometries with `d3.geoPath` and `d3.pie`, coloring regions via a linear scale. Data comes from a local GeoJSON file and an inline GDP array, with SVG and animation rendering.

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

Loading thumbnail…

Gene structure display

This visualization displays a linear genome map as a series of tiers, with colored segments representing genes along a specified range. Segments are automatically arranged into rows to avoid collisions, and hovering reveals a tooltip with details. The code uses D3 v3 with SVG rendering, custom collision detection, and underscore.js for data grouping, with data sourced from KEGG and a custom `d3.svg.geneStructure` function.

Loading thumbnail…

chrod

A bio chord diagram visualizes relationships between genetic components and biological process categories, with ribbons connecting left-side gene IDs to right-side functional annotations. The matrix is built from binary presence data in the JSON table, and ribbon thickness reflects association values. Using D3 v3’s `d3.layout.chord` and `d3.svg.chord`, the SVG rendering applies an arc generator and linear color scale for fold-change gradients, with underscores managing data transformations and layout calculations.

Loading thumbnail…

complicate table + heatmap

This visualization combines a gene expression table with a heatmap. The left side displays a sortable table listing genes with their log expression values, names, and Ensemble IDs, while the right side renders a corresponding heatmap using SVG and Canvas. The heatmap uses a linear color scale to represent expression intensities across different samples. Users can click on "Plot" links to open a popup dialog that generates dynamic jitter plots, which are created using d3.v3 and loaded from separate JSON files based on grouping options like pathologic stage or race. The interface includes tooltips and download options for exporting the charts as SVG or PNG files.

Loading thumbnail…

co-expression

This example visualizes co-expression relationships between two genes as a scatterplot, where each circle represents a sample with coordinates for gene expression levels. Users can drag to select a region of interest, highlighting those circles, and upon release the chart redraws to focus on the selected subset. The visualization uses D3 v3 with SVG rendering, employing `d3.svg.brush` for the selection interaction, `d3.scale.linear` for axes, and animated transitions for the redraw. Tooltips display sample IDs and expression values on hover, with data generated randomly as a fallback.

Loading thumbnail…

Protein Mutation

This visualization displays protein mutations along the APC protein sequence, mapping each mutation to its amino acid position and type. Mutations are rendered as colored circles, with colors distinguishing mutation types like missense, frameshift, and splice site, while colored rectangles represent Pfam domains. The SVG chart, built with D3.js version 3, includes an interactive tooltip for inspecting mutation details and sample identifiers. Data comes from TCGA tumor samples, and mutation and domain information is loaded from a JSON file. The code also animates the visualization using D3's data binding and transition methods.

Loading thumbnail…

contribution analysis

This contribution analysis visualization uses a stacked bar chart to display the relative contribution of various microbial species (rows) across different samples (columns). The data is grouped by functional categories (COG identifiers), with each group rendered as a separate panel. The chart uses D3.v3 to render SVG, with color encoding for species and a legend labeled “Function.” Axes are labeled “Samples” and “Relative contribution,” and the chart is sized at 500x500 pixels. The layout supports multiple groups, each containing a series of stacked layers, enabling comparison of species contributions across samples within and between functional groups.

Loading thumbnail…

networks

This interactive network visualization uses a force-directed layout to display relationships between functional categories, with nodes representing biological functions and links indicating correlations. Users can switch between six pre-loaded datasets and drag nodes after the simulation stabilizes. Built with D3 v3 (d3.layout.force) and rendered as SVG with zoom and pan support, it encodes node size via radius scale and link strength through stroke width, with optional color coding by category or monochrome themes.

Loading thumbnail…

About Drag and its Origin Position

A drag interaction demonstrates how to maintain a shape's position without noticeable jumps by accounting for its existing translation. Three points form a black triangular path with a thick gray stroke on an SVG canvas, using D3 v3's drag behavior. The `getOrigin` function parses the current `translate` value from the `transform` attribute as the drag origin, with a fallback to `{x:0, y:0}` on the first drag, and updates the position within the 500×300 viewport bounds.

Loading thumbnail…

D3 + Leaflet: Pie

This example shows six pie charts overlaid on a Leaflet map, each encoded at a geographic coordinate and sized with a red-and-gray split representing an `achieve` value between 0 and 1. The code uses Leaflet’s `latLngToLayerPoint` to convert geographic positions into SVG screen coordinates, and d3.v3’s `d3.svg.arc` and `d3.layout.pie` to generate the pie paths. The SVG layer is attached to the map via `map._initPathRoot()`, and the chart positions update on the map’s `viewreset` event. The source data is a hardcoded array of lat/lng pairs with achievement ratios.

Loading thumbnail…

D3 + Leaflet

This example combines D3 v3 and Leaflet to show interactive pie charts on a map. Hovering over a Leaflet marker creates a D3-generated donut chart in a tooltip div, displaying the percentage bound to that marker’s options via `L.marker(latlng, { achieve: d.achieve })`. The map offers OSM, Thunderforest, and USGS tile layers, with marker data accessed through `event.target.options`. D3’s `d3.svg.arc` and `d3.layout.pie` render the SVG chart.

Loading thumbnail…

leafletjs location

This example demonstrates browser geolocation using the Leaflet.js mapping library, showing a map that automatically centers on the user’s detected position with a marker and popup. If location lookup fails, it falls back to a predefined point in China, displaying an alert and a marker labeled “Some where.” The map uses OpenStreetMap tile layers via `L.tileLayer`, and the geolocation logic relies on Leaflet’s `map.locate` method with `setView:true` and a max zoom of 10. Location success and error events are handled through `map.on("locationfound")` and `map.on("locationerror")`.

Loading thumbnail…

Leaflet - markercluster

This example demonstrates how Leaflet.markercluster groups hundreds of nearby map points into cluster icons, with each marker’s label bound as a popup. The map loads geographic coordinates from a `clusterPoints.json` file and renders them as clustered markers using the `L.markerClusterGroup` API and its configurable options like `maxClusterRadius` and `spiderfyOnMaxZoom`. Tile layers come from OpenStreetMap, and the Leaflet 0.7 library handles the base map interaction for zooming and panning.

Loading thumbnail…

Leaflet - heatmap

A grid of manually collected coordinates animates into a Leaflet heatmap, gradually revealing clusters of activity around a metro station. The example demonstrates the `addLatLng` method of the Leaflet.heat plugin, which adds points one by one every 200 milliseconds. A styled gradient from blue to red encodes intensity, while the map uses OpenStreetMap tiles. The static dataset, defined as a JavaScript array, is fed incrementally into the plugin’s heat layer, showcasing its redraw behavior without explicit calls.

Loading thumbnail…

Bio survival chart

This chart visualizes survival rates over time for multiple groups, with each colored line representing a different dataset and cross markers indicating censored data points. The SVG rendering is based on a custom `d3.svg.survivalLineChart` function built with D3 v3, using scales, axes, and line generators to plot the data. Animated transitions and an interactive legend enhance the display, while the axes are labeled for survival rate and months. The source data structure and rendering code are visible within the HTML file.

Loading thumbnail…

Canvas - Pie

A grid of twelve small pie charts renders on table cells using the Canvas API, with each chart displaying a percentage value from a hardcoded data attribute. The code creates each chart via the `pie` function, which draws a light blue background circle and a tomato-colored wedge proportional to the ratio, then labels it with the percentage. All charts are generated in pure JavaScript without any frameworks, using `document.createElement`, `canvas.getContext("2d")`, and the `arc` and `fillText` methods.

Loading thumbnail…

Pointer

This example shows a single arrow-like pointer shape that can rotate in four directions—down, up, left, or right—selected from a dropdown menu. The shape is drawn as an SVG path using a hardcoded path string built from the `nonius` variable. The code uses D3 v3 to append the path to an SVG element and updates its `d` attribute on the dropdown’s `change` event. The pointer is centered via a `transform` translate and filled with a steel blue color.

Loading thumbnail…

fresh block

A single text label orbits a circular guide path in a continuous loop. A rotating line and the label itself move together, with the text flipping its anchor point and read direction at the halfway mark. The example uses D3 v4's `select` and `attr` methods within a recurring `setInterval` timer, updating an SVG group's `transform` to rotate around the circle’s center. The static SVG contains the circle, line, and text elements, and the animation demonstrates manual rotation and text-orientation handling without any data source.

Loading thumbnail…

histogram and violin plotbox

This example combines histograms and violin plots to visualize gene expression distributions across multiple samples. The chart displays each gene as a rotated, mirrored histogram with a step-after interpolation, alongside a box plot showing quantiles and the mean. Built with D3 v3 and SVG, it uses `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.quantile` for statistical summaries. The data comes from a JavaScript file containing sample expression values for each gene.

Loading thumbnail…

Tree Radial Layout

This radial tree layout visualizes a family hierarchy, showing Mike and Marcia’s children and pets branching outward from a central root. The example demonstrates how d3.layout.tree creates a circular arrangement, with links drawn as diagonals using d3.svg.diagonal’s projection function to convert angle and radius into Cartesian coordinates. Node positions are translated to the computed radial points, while text labels rotate to maintain readability. The data comes from a local JSON file, and the visualization renders in SVG.

Loading thumbnail…

stacked Cuve Line

A stacked area chart displays U.S. state population by age group, with each layer representing an age cohort and the x-axis ordered by state. The chart is rendered in SVG using D3 v3, with `d3.layout.stack()` to compute cumulative values and `d3.svg.area()` to draw the layers. A draggable legend, built with the `d3-svg-legend` plugin, allows interactive repositioning. Axis labels are rotated via a custom `axisStyle` function, and data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Network Force Layout

A network force layout visualizes relationships in a sample dataset through an interactive SVG graph. Nodes appear as distinct geometric symbols (circles, diamonds, triangles) colored steelblue, connected by thin gray links on a white canvas. The D3 v3 layout positions elements using `d3.layout.force` with configurable link distance and charge, while pan-and-zoom via `d3.behavior.zoom` enables exploration. The interface offers client-side download buttons for saving the visualization as SVG or PNG, with data and chart options supplied externally via JSON.

Loading thumbnail…

Customization of bush handler

This example shows an interactive scatterplot of 800 random data points, where a brush control selects a range along the x-axis and highlights the corresponding circles in red. The brush’s resize handles are customized with triangular SVG paths, generated by a `triangleData` function that computes relative path coordinates for the `d` attribute, using D3 v3’s `d3.svg.brush`, `d3.scale.linear`, and `d3.svg.axis`. The static SVG rendering relies on a fixed viewport with margins and translucent styling for the brush extent and selected circles.

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

Loading thumbnail…

TnT Tree

This interactive phylogenetic tree visualization renders a Newick-format dataset using the TnT tree API and D3 v3. It displays a collapsible tree where nodes toggle between circular and triangular markers via a click handler, and hover events highlight the path from a selected leaf back to the root by adding a `marked` class to corresponding `path.tnt_tree_link` elements. A button switches the layout between vertical and radial modes using the `tnt.tree.layout` API.

Loading thumbnail…

Towards Reusable Charts

This example demonstrates a reusable bar chart component built with D3.js (v3) following Mike Bostock's "Reusable Charts" philosophy. The chart renders income data for five countries from an embedded CSV file, using SVG for output. The code defines `d3.svg.myBarchart` as a modular function with configurable properties like margins, scales, and axis settings, allowing the same chart to be instantiated multiple times without global variable contamination. It implements ordinal and linear scales, along with D3's axis components and a custom grid-line generator, all drawn within a fixed 600×400 viewport.

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

Loading thumbnail…

Chart Controls III

This chart animates four dimensions of global development data—life expectancy, fertility rate, population, and time—using a bubble chart. Each circle represents a country, positioned by life expectancy and fertility rate, with size encoding population via a power scale. The animation steps through years, transitioning all circles simultaneously. A dropdown menu filters the display by region. The visualization is built with D3 v3, using `d3.scale.pow` for sizing, `d3.nest` to group data by year, and the `d3.timer` function to drive transitions. Data comes from the included `lfp_all.csv` file.

Loading thumbnail…

Grouped BarChart

A grouped bar chart compares three industrial sectors—Electronics, Software, and Mechanics—across five European countries using data loaded from a CSV file. Each country displays three color-coded bars, with values labeled above and a legend on the right. Built with D3 v3, the chart uses ordinal scales for positioning, nested data rolls up values per country, and SVG transitions animate bars upward from the baseline upon load. Mouseover highlights bars in yellow, while hover-out delays the restoration of the original color.

Loading thumbnail…

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

Loading thumbnail…

Pie Chart II

A pie chart animates its slices outward on hover. The example uses D3 v3 with SVG and animation. Each slice’s path is drawn with `d3.svg.arc`, and hovering triggers a transition via `transition.attrTween`, interpolating the slice’s `outerRadius` to expand it. The dataset is a simple array of five values, with percentages displayed as rotated text labels. The code is adapted from Mike Bostock’s “Extending Arcs” block and was built with Blockbuilder.

Loading thumbnail…

Chart Controls II

Three line charts compare monthly values for Europe, Asia, and America, with users selecting a region via radio buttons to highlight one series while the others remain visible. Dashed grid lines and labeled axes provide reference points, and the selected path updates in place through a transition animation rather than fading in and out. The visualization uses D3 v3 APIs including `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and the `transition` method, with data loaded from a TSV file.

Loading thumbnail…

Chart Controls I

This example demonstrates an interactive multi-series line chart where users can toggle the visibility of data for Europe, Asia, and America using radio buttons. The chart renders three time-series lines from a TSV file, with each line colored via a categorical scale. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` for scaling and axes. Radio button changes apply a CSS class to hide or show entire paths within the SVG group.

Loading thumbnail…

BarChart with ToolTip

A D3 bar chart displays country income percentages with colored bars and value labels, using data from a local CSV file loaded via d3.csv. Ordinal and linear scales position the bars, while d3.svg.axis renders the axes in an SVG container. The chart implements mouseover, mousemove, and mouseout event handlers to show a black tooltip div that displays the country name and income value on hover.

Loading thumbnail…

Chart with Gradient

A minimal D3.js line-area chart displays nine data points of arbitrary x-y values, with the area fill transitioning from dark gray to red via an SVG linearGradient. The chart includes labeled axes with tick marks, axis arrows, and a title. The code uses d3.scale.linear for scaling, d3.svg.area to generate the filled path, and d3.svg.axis for the axes, all rendered as SVG elements.