GeneExplorer

@GeneExplorer·8 public vizzes

Bioinformatics Final Question 2

This example displays the Italian flag as three vertical green, white, and red rectangles on an SVG canvas. It uses D3 v4’s data join to bind a JavaScript array of flag color and dimension objects to `rect` elements, setting each rectangle’s `x`, `y`, `width`, `height`, and `fill` attributes from the data. The visualization is built with `d3.select` and `.selectAll(...).data().enter().append()`, with a static, hard-coded data source in the script. No interaction or transitions are shown.

May 2, 2017

Loading thumbnail…

Sequences sunburst

The sequences sunburst visualizes navigation paths through a website as a radial, hierarchical partition layout. It shows the frequency of each sequence of page visits, with a breadcrumb trail and percentage labels clarifying the current path, and a legend toggling color coding for page types. The implementation uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout and sums, with `d3.select` handling user interaction. Data is loaded from a CSV file without a header via `d3.text` and `d3.csvParseRows`, and animations use D3’s transition system to fade segments on mouseout.

Apr 27, 2017

Loading thumbnail…

Sequences sunburst

This interactive sunburst visualizes hierarchical sequence data from a CSV file, using a D3 v3 partition layout to show the relative sizes of taxonomic paths. It displays a breadcrumb trail and percentage labels on hover, highlighting the ancestry of a selected node while fading others. The code uses `d3.layout.partition`, `d3.svg.arc`, and `d3.csv.parseRows` to build the chart, with custom color mapping and smooth opacity transitions on mouseleave. A legend toggle and clickable elements enhance exploration of the data.

Apr 27, 2017

Loading thumbnail…

Gist 9e29543676ede3269be69fc211193719

This example displays an empty SVG canvas with a fixed white background. The code initializes a blank 960 by 500 pixel drawing area using D3 v4, appending the SVG element directly to the body of the HTML document. No data or visual marks are rendered, so the chart shows only the default blank viewport. It relies on the core D3 selection and SVG creation API (`d3.select`, `append`, and `attr`) to establish the base canvas for future visualization work.

Mar 16, 2017

Loading thumbnail…

BioinformaticsQuestion13

This example draws the French flag using D3 v4 and SVG. It shows three equal vertical stripes in blue, white, and red, framed by a black border. The code appends a series of `rect` elements to an SVG canvas, calculating stripe positions and dimensions from a fixed flag height and width. It uses D3’s `select` and `append` methods to build the static visualization.

Mar 16, 2017

Loading thumbnail…

ebola cases with checkboxes modified

An interactive map visualizes the spread of Ebola cases, with reports from Guinea, the Democratic Republic of the Congo, Spain, and the United States. Users toggle checkboxes for each country to show or hide the corresponding case locations on the map. The visualization combines the Mapbox.js library for the base map with D3.js for rendering and animating the case markers as orange circles. The map includes a zoom and pan control, and the data comes from a local JSON file containing geographic coordinates.

Feb 28, 2017

Loading thumbnail…

dots on map for ebola cases

This visualization plots Ebola case locations as animated dots on an interactive Mapbox map. Using Leaflet with a Mapbox.js tile layer, D3.js projects geographic coordinates from a GeoJSON file into screen positions, rendering circles that expand from radius 1 to 6 pixels. The map supports zoom and pan, with the SVG overlay repositioned dynamically through Leaflet's viewreset and move events.

Feb 23, 2017

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.

Feb 18, 2017