Skip to main content
SimilarExport ZIP
100%

From your Education to your Job

✓ Published0🌍 Public
LLisaPicado
Last edited Apr 27, 2017
Created on Apr 27, 2017

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nicklewis96/'>nicklewis96</a>'s block: <a href='http://bl.ocks.org/nicklewis96/11d79d67815fbb631f3f6a376a67ff8e'>fresh block</a>

forked from <a href='http://bl.ocks.org/nicklewis96/'>nicklewis96</a>'s block: <a href='http://bl.ocks.org/nicklewis96/900718bbcd82e7a1a1b66fc64a99c63e'>fresh block</a>

forked from <a href='http://bl.ocks.org/nicklewis96/'>nicklewis96</a>'s block: <a href='http://bl.ocks.org/nicklewis96/e3ef95cbdb0511538f44901fef22610f'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

From your Education to your Job

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

LLisaPicado
100% match
Loading thumbnail…

From your Education to your Job

This visualization uses a stretched chord diagram to show how graduates from various educational tracks transition into occupational sectors one year after graduation. The left side displays education fields, the right side shows job sectors, with ribbon thickness representing student counts. Built with D3.js v3, it employs a custom `d3.layout.chord.sort` layout and custom `stretchedChord` rendering with SVG paths and quadratic Bézier curves. An animated linear gradient flows across the chords to emphasize directional movement from education to occupation, and hover interactions highlight specific connections.

LLisaPicado
77% match
Loading thumbnail…

Genome Sequence Comparison

A circular genome sequence comparison visualization splits its layout into two halves, contrasting copepod and nematode data with horizontal gradients and animated color flows. The chart uses a custom stretched chord layout derived from D3's `d3.layout.chord`, with `d3.stretched.chord.js` defining the pulled-apart arc paths and `d3.layout.chord.sort.js` handling angular sorting. SVG paths render the chords, while SVG `<animate>` elements drive gradient movement. Hover interactions adjust chord opacity, and the responsive layout adapts to mobile screen widths using jQuery for viewport detection.

LLisaPicado
76% match
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.

11Cr18Ni9
72% match
Loading thumbnail…

Chord

This visualization uses a chord diagram to display the pairwise relationships in a 10x10 numeric matrix, with each node representing a class from a CSV file. The diagram shows ribbons connecting the nodes, where each ribbon’s color reflects the source or target node based on which has a higher value, and its opacity is fixed at 0.5. The code loads data with `d3.csv` and `d3.json`, then uses `d3.chord` to compute the chord layout, `d3.ribbon` for the connecting paths, and `d3.arc` for the outer arcs, all rendered as SVG within a React-compatible HTML page using D3 v6.

Vvivianaaai@qq.com
69% match
Loading thumbnail…

Gene Map

This gene map visualizes four genes as directional arrows, with forward genes in blue and reverse genes in red, scaled by their start and stop positions from a local data.json file. Each arrow’s shape encodes orientation via a seven-point polygon, and hovering highlights the polygon, label, or tick marks with colored strokes. The code uses D3 v4 to append SVG elements—specifically `d3.select`, `d3.json`, and `svg.append("polygon")`—along with custom `GeneArrow` constructors and `Point` objects to compute geometry and tooltips.

GGeneExplorer
68% match
Loading thumbnail…

genemapping

This example visualizes gene mappings by rendering each gene as a colored rectangle positioned along a horizontal axis according to its start and stop coordinates. Genes on the forward orientation appear in purple on an upper track, while reverse-oriented genes appear in teal on a lower track, with labels centered above each rectangle. The visualization uses D3.js v4’s selection and data join methods to bind the JSON data to SVG groups, then appends rectangles and text elements with attributes computed from the data. The code directly maps each gene’s orientation to its vertical placement and fill color.

BBrieLewis
68% match
Loading thumbnail…

ChIP Seq Data Visualization

This example visualizes ChIP-seq data by mapping genes onto their respective chromosomes as animated SVG elements. Each gene node is positioned along a chromosome track, with tooltips or metadata revealing the gene symbol, name, and function. The visualization uses D3 v3’s force-directed layout (via `d3.forceSimulation` or the older `d3.layout.force`) to arrange the nodes, while the rendering relies on SVG and animation. The static dataset is embedded directly in the code, showing gene spacing and interval lengths for chromosome 1.

KKunnyKou
67% match