co-expression

100%

✓ Published0🌍 Public

Last edited Feb 6, 2018

Created on Sep 1, 2017

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.

AI-generated description

Built with blockbuilder.org

E-mail: cxhair@163.com | Michael Cheng

By pressing left mouse buttom and dragging to select circles you interested, then the chart will be redrawed. You wil like it!

按下鼠标左键并滑动，选择你感兴趣的圆后图形会重绘。你会喜欢的！

mit Licensed

Similar vizzes

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.

11Cr18Ni9

71% match

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.

11Cr18Ni9

68% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

68% match

Loading thumbnail…

D3 Selection Exploration - Exercise

This example demonstrates D3's data-join and selection methods through an animated scatterplot of circles and vertical lines. The visualization continuously updates as `d3.range` generates new data points, with circles and lines re-rendered every frame. The code uses `selection.data().join()` for enter, update, and exit handling, alongside `selection.call()` for reusable visualization logic. Randomly colored circles refresh twice per second, while the underlying sine-wave pattern animates smoothly via `setInterval`. The SVG canvas spans the full window, with black-stroked circles connected to green lines.

WWolfgang

68% match

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.

IIMYin

67% match

Loading thumbnail…

Fork of D3 Selection Exploration

This visualization demonstrates a dynamic scatterplot of colored circles that move and resize over time. Animated via a 60-frames-per-second interval, the circles' positions, radii, and hues are recalculated continuously. The implementation uses D3.js selection and join APIs, specifically `d3.select`, `d3.range`, and `.join('circle')`, to manage SVG circle elements. The `vizData` function updates circle attributes through `selection.selectAll('circle').data(data).join('circle')`, while `makeData.js` generates data with sinusoidal motion and color interpolation using `d3.interpolateRgb`. The SVG output is rendered directly to the browser window.

Jjsoudeer

67% match

Loading thumbnail…

D3 Selection Exploration - Modules

This example demonstrates a dynamic scatterplot where a set of circles moves and resizes in a continuous, animated loop, simulating a wave-like pattern. Built with D3.js, the visualization uses the `select` module to target the SVG canvas and the `range` and `join` APIs to bind data to the circles. Each frame, generated by a timer, updates the x, y, and radius attributes of the circles based on a sine function. The data is synthesized on the fly by the `makeData` module, and the rendering is done through SVG elements, creating a smooth, real-time animation.

Aajoua

67% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

67% match