A

AdamBlaine1

@AdamBlaine1·16 public vizzes

Loading thumbnail…

The genome browser making multiples)

This interactive genome browser visualizes phage gene annotations along a linear genomic ruler. Each gene is rendered as an orange rectangle, with forward and reverse genes positioned on alternating tracks above and below a central axis to reduce overlap. The SVG animation reveals the ruler by fading in its stroke, while hover tooltips display gene names. The x-axis is scaled by sequence position, and tick marks at 100, 500, and 1000 base-pair intervals provide a genomic coordinate reference.

Loading thumbnail…

The genome browser

This genome browser visualizes annotated genes along a linear genome map. Each gene is represented as a colored block—green for forward direction and red for reverse—with blocks offset into two staggered rows on each strand to reduce overlap. Gene names and pham identifiers appear as text labels. The visualization uses D3.js to animate gene blocks sliding from the right edge into their correct positions along the sequence, with labels fading in afterward. Hovering over a gene reveals a tooltip with its name. Tick marks at 100, 500, and 1000 base-pair intervals provide a genomic scale, and the layout separates forward and reverse strands vertically, with gene sizes proportional to their sequence lengths.

Loading thumbnail…

The genome browser

This visualization presents a genome browser that displays gene sequences along a linear genome track, with forward and reverse genes color-coded in green and red. It shows how genes are positioned and oriented within a genome, with tick marks marking 100, 500, and 1000 base-pair intervals. The view animates gene rectangles from an initial off-track position into their correct places along the track, while labels for gene names and phage numbers fade in sequentially. The code uses D3.js (version 3.5.5) to bind JSON data, manipulate SVG elements, and apply transitions.

Loading thumbnail…

Bahamas flag (how to make rectangles and polygons)

This example builds the Bahamas flag from basic D3.js shapes, using three horizontal rectangles and one overlaid triangle. The code appends three `<rect>` elements to an SVG, each with a distinct fill color—cyan for the top and bottom bands and yellow for the middle—and then adds a black `<polygon>` to represent the triangular hoist side. The polygon’s coordinates are explicitly defined in the `points` attribute, connecting the left edge’s top and bottom corners to a central point, while the rectangles use simple x, y, width, and height properties. Rendering relies on D3’s selection and attribute methods to construct the SVG elements directly.

Loading thumbnail…

genome browser

This example presents a simple genome browser visualization built with D3.js, displaying four annotated genes along a linear genome sequence. It shows the relative positions and orientations of genes as colored rectangles, with green indicating forward direction and blue indicating reverse direction, placed above and below a central axis respectively. The visualization includes a ruler with tick marks at 100, 500, and 1000 base-pair intervals, computed programmatically from the genome length. Using SVG rendering with animations, the code loads gene data from a JSON file, then uses D3 transitions to animate gene rectangles growing into place and tick marks drawing themselves sequentially, while gene name labels fade in after a delay.

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genome sequence, with genes drawn as colored rectangles that animate downward into place above and below a central axis based on their forward or reverse direction. The SVG rendering uses D3.js to bind gene data from a JSON file, while tick marks at 100, 500, and 1,000 base-pair intervals are animated with staggered transitions. The code relies on `d3.json` for data loading, `transition().duration()` for sequential animations, and `attr("transform")` to position tick groups. The genome length is fixed at 7,800 base pairs, with gene labels fading in after the rectangles settle.

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genome using D3.js, with tick marks at 1000, 500, and 100 base-pair intervals animated via staggered transitions. It displays a horizontal backbone rectangle representing the genome, while gene data (from a local JSON file) is loaded asynchronously but not yet rendered. The example also includes sample circles with fixed coordinates and colors, suggesting placeholder for feature mapping. Rendering relies on SVG elements and D3’s selection and transition methods, with a hardcoded genome length of 7800 and tick calculations in JavaScript. The visualization focuses on animated ruler construction rather than full genomic annotation.

Loading thumbnail…

genome browser

This genome browser visualizes a 7,800-base-pair genetic sequence with an animated ruler track, using SVG rendered by D3.js. It displays tick marks at three scales—thousand-base, five-hundred-base, and hundred-base intervals—which are generated from a static array of positions. The code employs D3 data joins and `transition().duration()` to animate each tick group’s translation, creating a cascading effect where coarser marks appear before finer ones. The example’s data comes from a hardcoded `genes.json.txt` array of gene objects, though the current render focuses solely on the ruler rather than the gene annotations.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes the daily cumulative counts of Ebola cases for three countries—Guinea, Liberia, and Sierra Leone—over the period from March 2014 to June 2015. The visualization is constructed with D3 v3 and rendered as an SVG, using a TSV data file loaded via d3.tsv. Dates are parsed with d3.time.format, and the x-axis uses a time scale while the y-axis uses a linear scale. Color encoding is handled by d3.scale.category10, assigning each country a distinct hue. The chart employs conventional margins and leverages d3.extent, d3.min, and d3.max to compute the domains for both axes. Axes are rendered using d3.svg.axis, and the multi-series lines are drawn with d3.svg.line. The visualization allows for clear comparison of daily average temperatures across New York, San Francisco, and Austin over the course of a year.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart tracks the daily reported Ebola cases in Guinea, Liberia, and Sierra Leone over time, using a TSV dataset loaded with d3.tsv. The visualization employs conventional margins and a range of D3 features: d3.time.scale for the x-axis, d3.scale.linear for the y-axis, and d3.scale.category10 for color encoding of the three series. The data is parsed with d3.time.format, and domains are computed using d3.extent, d3.min, and d3.max. The chart displays d3.svg.axis for both axes and d3.svg.line to render the lines, with SVG output.

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over a year, with each city represented by a distinct colored line. The visualization uses D3.js with SVG rendering, employing conventional margins and scales: a time scale for dates on the x-axis, a linear scale for temperature on the y-axis, and a categorical color scale for the three series. Data is loaded from a TSV file using d3.tsv, and dates are parsed with d3.time.format. The chart computes its domains using d3.extent, d3.min, and d3.max over the parsed dataset, derives series names dynamically with d3.keys, and renders axes and line paths with d3.svg.axis and d3.svg.line. The example demonstrates a clean, reusable pattern for multi-series time-series data, with a legend distinguishing New York, San Francisco, and Austin.

Loading thumbnail…

Bar Chart

This bar chart visualizes the frequency of letters in the English language, sourced from a TSV file containing counts for Guinea, Liberia, and Sierra Leone. The chart uses D3.js with an ordinal x-scale for categorical labels and a linear y-scale for frequency values, with axes displayed via d3.svg.axis. Green bars are rendered using SVG rectangles, and a hover effect changes their color to purple. The code employs d3.tsv to load data, d3.max to compute the domain, and d3.format for percentage labels, with an animated transition that moves bars upward over three seconds from a starting y-position of 900.

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of letters in the English language using a TSV data file, with green bars that turn purple on hover. The visualization uses D3.js to load and parse the data, format percentage labels, and construct ordinal and linear scales for positioning. Axes are rendered with SVG, and the bars animate vertically over three seconds via a transition. The chart follows conventional margins and includes formatted percentage tick marks on the y-axis.

Loading thumbnail…

Bar Chart

This bar chart visualizes the frequency of each letter in the English alphabet, with the data loaded from a TSV file using `d3.tsv`. The chart uses an ordinal scale for the x-axis and a linear scale for the y-axis, formatted as percentages via `d3.format`. The bars are rendered as SVG rectangles that animate upward over three seconds using `transition`, with a green-to-purple hover effect. Axes are generated with `d3.svg.axis`, and the chart is built with D3 version 3.5.5.

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English alphabet, using steelblue bars that turn brown on hover. The chart is rendered with SVG and loads its data from a TSV file containing letter-frequency pairs. It uses D3’s ordinal scale for the x-axis (letters) and a linear scale for the y-axis (frequencies, formatted as percentages), with axes generated via `d3.svg.axis`. The code leverages `d3.tsv` for data parsing, `d3.max` to set the domain, and D3’s selection and data-join methods to draw the rectangles. Margins follow the conventional layout, with the y-axis labeled "Frequency".

Loading thumbnail…

fresh block

A blank burgundy rectangle fades to sky blue over three seconds inside an SVG canvas. The example demonstrates D3.js version 3.5.5 transitions and easing functions, using `d3.select` to append a `rect` and apply a `.transition()` with a `"bounce"` easing effect. The source is a Blockbuilder-generated single-file project, rendered entirely in SVG with no external data—only static shape attributes and CSS styling define the visual output.