IMYin

@IMYin·4 public vizzes

SVG Fundamentals

This example demonstrates the foundational rendering of shapes in SVG, using two circles to illustrate basic positioning and styling. The first circle appears in the default black fill, while the second uses an inline `fill="red"` attribute to change its color. The code defines a static SVG canvas with a width of 960 and height of 500, placing circles via `cx` and `cy` coordinates. It relies purely on native SVG elements and CSS-like presentation attributes, without any JavaScript libraries or data binding.

Mar 22, 2023

Loading thumbnail…

fresh block

Four orange circles are drawn on a blank SVG canvas, each sized and positioned proportionally to its corresponding value in the static array `[10, 30, 50, 100]`. The example demonstrates a basic data join using d3.v5, where `selectAll("circle")` and `.data()` bind the array elements, and `.enter()` appends the shapes. Circle radii and y-coordinates reflect the data values directly, while x-coordinates increase with index. The visualization shows a simple, non-interactive mapping of numbers to visual attributes, with no axes or labels included.

Jul 25, 2018

Loading thumbnail…

heatmap

This heatmap visualizes a 50×6 matrix of log2-ratio gene expression values, where each cell is color-coded along a diverging scale (red for positive, blue for negative, white for zero) to reveal patterns of up- and down-regulation across conditions. Built with D3 v3 and rendered as an SVG, the chart supports interactive reordering: users can apply hierarchical clustering or sort rows and columns by probe/contrast names, and click on row or column labels to reorder by their cell values. Cells can be selected by dragging the mouse, with corresponding row and column labels highlighted; holding the Alt key allows multiple block selections. The visualization is inspired by the classic Les Misérables co-occurrence matrix and includes a hover-driven tooltip for inspecting individual log2-ratio values.

Jun 22, 2018

Loading thumbnail…

heatmap

This heatmap visualizes a co-occurrence matrix of 50 row items by 5 column contrasts, with cell colors encoding log2 ratio values from -3 (blue) to +4 (red). Built with D3 v3 and rendered as SVG with animation, the heatmap supports reordering via hierarchical clustering, probe/contrast name sorting, and interactive row/column label clicks to re-sort cell values. Users can select cells with the mouse, and Alt-clicking enables multiple block selection, with corresponding row and column labels highlighted upon selection.

Jun 22, 2018