Skip to main content
100%

Concentration time series plotting

✓ Published0🌍 Public
TTreblesteph
Last edited Nov 8, 2015
Created on Nov 7, 2015

Concentration time series plotting displays four gene concentration values (gene1–gene4) over time as an SVG line chart, with each gene represented by a distinct colored line. The data, loaded from evolved1.csv, shows binary presence/absence patterns that alternate between 0 and 1 across sequential time points. The chart demonstrates scalable bar and line rendering using D3.js, with axes scaled to the data domain.

AI-generated description

2015 Mozfest workshop - Intro to d3js

Example06 - Scalable barChart

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/30ad6abd1aacada4c6d3'>d3intro_ex00</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/3d9f51b2c7a7e49840a8'>d3intro_ex01</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/58f360e13a4397bf3dad'>d3intro_ex02</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/fe38f5960d1276833555'>d3intro_ex03</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/95f7e0f6ce686f7f2ec1'>d3intro_ex04</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/84c9384ce8bd8f646c45'>d3intro_ex05</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/905ebf419d8f2173559c'>d3intro_ex05b</a>

forked from <a href='http://bl.ocks.org/jjelosua/'>jjelosua</a>'s block: <a href='http://bl.ocks.org/jjelosua/dcc17252ca6ed6b4cd39'>d3intro_ex06</a>

Similar vizzes

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.

11Cr18Ni9
66% match
Loading thumbnail…

Feb 21st- text inside rectangle

This example displays four gene features as colored rectangles along a horizontal axis, with green rectangles for forward-oriented genes and red rectangles for reverse-oriented ones. Each rectangle is labeled with its gene name centered inside using SVG text elements. The visualization uses d3.json to load the data and d3.selectAll to bind it, with each gene’s start and stop positions determining the rectangle’s placement and width. The code relies on SVG rect and text elements, with transforms translating each group to its appropriate y-coordinate based on orientation.

LLisaPicado
65% match
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
65% match
Loading thumbnail…

Random Gene

Four gene rectangles animate horizontally onto a genomic ruler, with forward genes in green and reverse genes in red, each labeled with a letter. The SVG uses d3 transitions with staggered delays to move each gene from off-screen to its start position. Tick marks at 100, 500, and 1000-unit intervals are drawn as black rects, while the gene positions come from a hardcoded JavaScript array. The visualization relies on d3.v4 selection methods and the transition API.

LLaurynKW
65% match
Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Mmbostock
65% match
Loading thumbnail…

Gene Browser

This example demonstrates how D3.js v4 binds an array of JavaScript objects to SVG rectangles, producing a simple three-color gene visualization. It shows a static sequence of blue, green, and red bars arranged vertically, each fixed at a width of 200 pixels and a height of 50 pixels. The code uses `d3.selectAll("rect").data(gene).enter().append("rect")` to join the data array—which contains `fill`, `x`, and `y` properties—to new rectangles, setting their positions and colors via attribute functions. The data originates from a hardcoded array named `gene`, and the visualization is rendered directly into an SVG canvas using D3’s selection and data-join API, with no interactive or animated behavior.

CCraftbd
65% match
Loading thumbnail…

Simple Genome Map

This genome map visualizes four genes along a linear sequence, with forward-oriented genes shown in green and reverse-oriented genes in red. The SVG rendering uses D3 v4’s `select`, `append`, and `transition` APIs to animate each gene’s position from off-screen to its mapped start coordinate over one second, with delays proportional to the gene’s start value. Gene names are overlaid using `d3.text`, and dimensions come from the `data.json` file.

KKunnyKou
65% match
Loading thumbnail…

Gene coding

This visualization maps six gene annotations along a linear DNA ruler. Blocks, colored green or red according to their coding direction, animate into place at their start positions, with numbered labels fading in after all blocks. The D3 v4 script builds the SVG with block append/transition methods, while the ruler itself is composed of nested black rectangles at 100, 500, and 1000-unit scales generated from a simple loop. Data is embedded directly in the code.

CCraftbd
65% match