TylerVaughan

@TylerVaughan·48 public vizzes

PROJECT

This visualization plots five locations on a Google Map of Hawaii, using D3.js to load a CSV and overlay custom markers. Each marker’s label shows the population, while its position comes from the location column’s latitude and longitude. Clicking a marker opens an InfoWindow with details about the site’s elevation, number, and female color code. The map uses Google Maps API with terrain view, and D3 v3 handles the data parsing and marker generation.

Apr 24, 2018

Loading thumbnail…

PROJECT

This example plots five locations from a CSV file as labeled markers on an interactive Google Map. Each marker opens an info window displaying the location’s name, coordinates, female color code, population number, and elevation. The code uses the Google Maps JavaScript API for map rendering and D3.js (v3) for CSV parsing and data binding. Markers use a custom SVG path icon with a red fill, and the map is initialized with terrain view centered on the first data point.

Apr 24, 2018

Loading thumbnail…

project

This example displays geographic markers on a Google Map for several Hawaiian locations, with each marker labeled by its population and linked to an info window showing details like elevation, number, and color coding from a CSV file. The map is initialized using the Google Maps JavaScript API with a terrain view centered on Hawaii. Data from `echteMega.csv` is loaded via D3.js v3, and each row triggers a marker creation with custom SVG icons and click listeners that open info windows. The visualization combines D3’s data loading with the Google Maps API for spatial rendering.

Apr 24, 2018

Loading thumbnail…

project

This example overlays labeled markers on a Google Map to show population counts and elevation data for locations on the Big Island of Hawaiʻi, with each marker opening an info window containing the full CSV record. It combines the Google Maps JavaScript API with D3.js’s `d3.csv` to load `echteMega.csv` and create custom circular markers whose labels display the population value. The map uses terrain view, and the markers are styled with a red fill and semi-transparent opacity, while the info windows render the location coordinates, color code, number, and elevation for each site.

Apr 24, 2018

Loading thumbnail…

fresh block

This example shows a basic Google Maps interface with a single marker placed at Uluru, Australia. The map centers on the location and includes a zoom control. The code uses the Google Maps JavaScript API to initialize the map within a div element, with a marker added at the specified latitude and longitude. The map is displayed at a fixed height and full width, with a simple title heading above it.

Apr 5, 2018

Loading thumbnail…

fresh block

A fresh block is a visualization of genomic contig sequences using a force-directed graph. The application parses a FASTA file containing DNA contig metadata (node ID, length, coverage) and renders each contig as a colored block in an SVG layout. Blocks are positioned and sized based on sequence attributes, with colors encoding coverage values, using d3.v4's force simulation to arrange the nodes. The resulting graphic provides a compact overview of contig length and coverage distributions from the assembled genome data.

Mar 13, 2018

Loading thumbnail…

fresh block

This example uses D3 v4 to render a histogram of contig lengths from a FASTA file. The code parses sequence headers with a custom delimiter, extracts the length values from each node, and displays the distribution as steel-blue bars with red count labels on top. An x-axis with linear scaling shows the range of contig lengths, while the histogram bins are generated using d3.histogram with thresholds calculated from the maximum length. The visualization is rendered in SVG and includes a formatted count above each bar, omitting labels for empty bins.

Mar 13, 2018

Loading thumbnail…

fresh block

This example demonstrates a histogram visualization of DNA sequence data parsed from a FASTA file. The block uses D3 v4 with an SVG rendering, reading sequence headers from `test.fasta` via a custom underscore-delimited format, extracting node lengths, and then plotting the distribution of 1000 random samples using d3.histogram with 20 bins. The bars are styled in steelblue with white count labels, and the x-axis is rendered at the bottom. The visualization is built with Blockbuilder.org and licensed under MIT.

Mar 13, 2018

Loading thumbnail…

histo

This histogram visualizes the distribution of coverage values parsed from sequence headers in a FASTA file, rendering as SVG using d3.v4. The data is derived from contig metadata (node_id, length, size, coverage) embedded in the FASTA descriptions, with the histogram showing the frequency of coverage values across all contigs. Built with Blockbuilder and forked from TylerVaughan's original block, it uses d3's histogram layout to bin and display the distribution.

Mar 1, 2018

Loading thumbnail…

histo

This histogram visualizes the distribution of sequence lengths from a FASTA file of genome contigs, parsed from the node IDs in `contigs.fasta`. Using D3 v4 with SVG rendering, the visualization computes the lengths of each sequence and groups them into bins along the x-axis, with bar heights representing the count of contigs per length range. The chart provides a quick view of the size distribution of genomic fragments, highlighting the central tendency and spread of contig lengths in the dataset.

Mar 1, 2018

Loading thumbnail…

fresh block

This example displays a static SVG visualization of state population data, showing the mean population calculated from a small array of four U.S. states. The code first uses `d3.mean()` to compute and log the average, then replicates the calculation without the helper using `d3.sum()` and a manual `while` loop, printing each result to the console. The SVG canvas renders a placeholder text message, while the population computations are performed entirely in JavaScript using D3 v4 array methods. The visualization itself does not map the data graphically, focusing instead on demonstrating statistical calculations in the console.

Mar 1, 2018

Loading thumbnail…

fresh block

This example displays a text prompt and computes summary statistics for a small dataset of U.S. states and their populations. It uses D3 v4’s `d3.mean` and `d3.sum` array methods to calculate the average population, then repeats the calculation manually with a `while` loop. The SVG text element serves as a placeholder, while the results are printed to the browser console. The code relies on D3’s selection and array utilities, with no data loading or rendering beyond the static label.

Mar 1, 2018

Loading thumbnail…

fresh block

This example presents two JavaScript practice problems embedded in an HTML page. It shows how to compute the average population of a small array of U.S. states, first using the d3.mean() method and then manually using d3.sum() divided by the array length. The page prints results to the browser’s developer console rather than rendering any visual elements. The code relies on d3.v4 and defines state objects with name, id, and population data inline.

Feb 27, 2018

Loading thumbnail…

fresh block

This example presents two JavaScript practice problems embedded in a static HTML page, with no SVG or visual output. It shows a small array of four U.S. states and their populations, then asks the viewer to compute the mean population using the D3 v4 API’s `d3.mean()` method, and again without it. The code prints results to the browser’s developer console, and includes a minimal inline style for full-screen body margins. The data is hardcoded in the script, and the page uses only D3’s core utility function for the first calculation.

Feb 27, 2018

Loading thumbnail…

fresh block

This example presents two JavaScript practice problems embedded in an HTML page with no SVG or visual output. The first problem uses the d3.mean() function from d3.v4 to calculate and log the average population of four U.S. states (Alaska, Virginia, Arizona, Florida) stored in a states array. The second problem asks the viewer to compute the same average without d3.mean(), relying instead on the browser’s developer console to observe results. The code uses the D3.js library for the mean calculation and plain JavaScript for array handling, with no rendering or data visualization involved.

Feb 27, 2018

Loading thumbnail…

fresh block

This example presents five JavaScript practice problems embedded in an HTML page, with instructions to view output in the developer console. The code uses d3.v4’s `d3.ascending` method to sort an array of state objects by name, and demonstrates array iteration with `forEach`, string searching with `includes`, and conditional logic to filter states by location or even population values. No SVG or visual rendering is involved; the focus is purely on console-based problem-solving with plain JavaScript arrays and objects.

Feb 27, 2018

Loading thumbnail…

fresh block

This example presents a set of five JavaScript practice problems embedded in an HTML page. It demonstrates array manipulation and iteration techniques using plain JavaScript, including `forEach`, `includes`, and the modulus operator, with output viewed in the browser developer console. The code uses D3 v4’s `d3.range` to generate an array of integers from 1 to 10. Problems involve copying state IDs between arrays, finding common items, sorting an array of state objects by population, and printing filtered numbers. No SVG or visual rendering is performed.

Feb 27, 2018

Loading thumbnail…

Finished map

This map of the United States visualizes reported Zika virus cases in 2016, with states colored on a sequential orange scale using a logarithmic transform to handle skewed case counts. The map is rendered as an SVG with hover interactions that display a tooltip containing the state name and total cases. State boundaries are outlined in gray and highlight on hover, while the tooltip appears with a dark background and white text. The visualization also includes animation capabilities and uses D3 v4 with a log scale for color encoding.

Feb 27, 2018

Loading thumbnail…

fresh block

This visualization shows a choropleth map of the United States colored by reported Zika virus cases from a 2016 dataset. Each state is filled with a sequential orange color scale using a log transform, so the fill reflects the relative case counts. Hovering over a state triggers a dark tooltip that displays the state name and its case total, while the state itself becomes slightly transparent. The map is rendered in SVG and animated states update as the data loads, with the color scale computed dynamically from the data range.

Feb 27, 2018

Loading thumbnail…

fresh block

This choropleth map of the United States visualizes Zika virus case counts by state, colored with a pink-to-green interpolated scale. As the page loads, a CSV of 2016 Zika cases is loaded and joined to the state geometries. Each state is rendered as an SVG path and colored according to its case count, with hover interactions that trigger a dark tooltip displaying the state name, low, average, and high case values. The map also includes Alaska and Hawaii insets, and the animation effect is provided by the hover opacity change.

Feb 20, 2018

Loading thumbnail…

fresh block

This animated choropleth map visualizes reported Zika cases across U.S. states in 2016, drawing state boundaries from the included uStates.js dataset and loading case counts from a CSV file. Each state is colored using an interpolated scale from pink to green based on randomized low, average, and high case values, with a hover tooltip displaying these figures. Built with D3 v3 and SVG, the map renders state paths and animates the tooltip on mouseover, providing an interactive overview of the data.

Feb 20, 2018

Loading thumbnail…

fresh block

A choropleth map of the United States visualizing Zika virus case counts by state in 2016. States are drawn as SVG paths and colored using an interpolated gradient from pink to green based on case data loaded from a CSV file. Hovering over a state triggers a tooltip that displays the state name along with low, average, and high case estimates. The map is rendered with animated transitions as the data loads, and states highlight on hover with reduced opacity.

Feb 20, 2018

Loading thumbnail…

fresh block

This interactive choropleth map visualizes reported Zika virus cases across U.S. states using a custom GeoJSON path dataset. States are outlined in gray and become semi-transparent on hover. A tooltip appears on mouseover, displaying the state name and case count, though the data-loading logic is incomplete and sampleData remains empty. The map is rendered as an SVG with D3 v3, with static state boundaries and no animation.

Feb 20, 2018

Loading thumbnail…

fresh block

A choropleth map of the United States visualizing 2016 Zika virus case counts by state, with states drawn as SVG paths and colored according to the number of reported cases. The map is rendered using D3 v3, with each state path defined in the included uStates.js file. Hovering over a state triggers a tooltip displaying the state name and its case count, with the state's fill opacity changing on hover. The visualization is static with no animation, though the code includes a reference to a CSV data file that appears to be incompletely integrated into the data-binding logic.

Feb 20, 2018

Loading thumbnail…

US State Map

This interactive map of the United States displays 2016 Zika case counts by state, with each state colored on a white-to-blue scale. Hovering over a state triggers a tooltip showing the state name and its case count. The map is rendered using D3 v3 with SVG paths for each state, and the tooltip appears dynamically based on mouse position. Data is loaded from a CSV file and bound to the geographic shapes, with hover interactions providing detailed information. The visualization includes all US states and the District of Columbia, with Alaska and Hawaii positioned separately from the contiguous states.

Feb 15, 2018

Loading thumbnail…

US State Map

This interactive map of the United States displays state-level case counts, with each state colored on a gradient from light yellow to deep red based on its reported value. Hovering over a state triggers a tooltip showing the state name and its low, average, and high statistics, while the state fill becomes semi-transparent. The map is rendered as an SVG using D3 v3, with states drawn from path data and color-coded via a linear interpolated scale. Animations occur on hover, and the tooltip provides detailed data for each state.

Feb 13, 2018

Loading thumbnail…

US State Map

This choropleth map displays West Nile virus statistics across US states, with hover interactions revealing low, average, and high case counts for each state. The visualization uses D3.js to render SVG state boundaries from the `uStates.js` dataset, with each state colored via an interpolated scale from light yellow to dark red based on randomly generated sample data. A tooltip provides detailed breakdowns of neuroinvasive disease cases, non-neuroinvasive cases, deaths, and presumptive viremic blood donors when hovering over a state. The map includes an animation effect through hover states that adjust fill opacity, and the data is drawn from the WestNile.csv file.

Feb 13, 2018

Loading thumbnail…

US State Map

This interactive US state map displays disease surveillance data for West Nile virus, showing neuroinvasive and non-neuroinvasive case counts, deaths, and presumptive viremic blood donors by state. The choropleth map, rendered with SVG, uses a yellow-to-dark-red color scale to represent disease severity. Each state is colored based on randomly generated sample data, and hovering over a state highlights it and displays a tooltip with low, average, and high values. The map includes all 50 states plus the District of Columbia, with animated hover effects and a legend-free color encoding. The visualization is built with D3 v3 and uses a custom state path data file (uStates.js) to render the geographic boundaries.

Feb 13, 2018

Loading thumbnail…

fresh block

A swarm of 100 white sperm-like forms swims across a black SVG canvas, each with an elliptical head and a flexible tail that undulates as it moves. The animation uses d3.v3’s `d3.timer` to update positions and velocities, bouncing off the canvas edges. Each tail is rendered as a `path` with two stroke-width classes, while the head rotates via `headTransform` using `Math.atan2`. The code generates random starting positions and velocities, then simulates swimming motion with sine-based curvature applied to trailing path points.

Feb 13, 2018

Loading thumbnail…

nut

A black background hosts a swarm of 100 white spermatozoa-like shapes, each composed of an elliptical head and a trailing path that undulates as they swim. The animation uses D3 v3’s `d3.timer` to update positions each frame, with custom logic for wall bouncing and sinusoidal tail movement. SVG `<g>` elements group the head and two `<path>` elements (styled with different stroke widths), which are redrawn via `tailPath` and transformed via `headTransform` using `Math.atan2`. The code generates random initial velocities and paths, and renders everything as animated SVG.

Feb 13, 2018

Loading thumbnail…

nut

A swarm of one hundred white sperm-like particles swims across a black canvas, each with a rotating elliptical head and a tapering, undulating path. D3 v3’s `d3.timer` drives the animation, updating each particle’s position and velocity with a custom sine-wave swimming model. The SVG rendering uses `ellipse` elements for heads and `path` elements for mid and tail segments, with transforms applied via `headTransform` and `tailPath`.

Feb 13, 2018

Loading thumbnail…

words

A short text passage cycles through individual words, rendering each word in large Helvetica Neue type that is repeatedly redrawn with an expanding, alternating purple and gold outline. The animation uses the Canvas API with `fillText` and `strokeText`, layered across two canvas elements via `drawImage`, while a `d3.timer` loop drives the stroke width and color changes. The word list comes from a hardcoded string in the source, split on whitespace.

Feb 13, 2018

Loading thumbnail…

nut

A swarm of one hundred white spermatozoa swims across a black screen, each with an elliptical head and a wavy mid and tail path. The creatures bounce off the canvas edges and undulate continuously via a d3.timer loop. The visualization uses D3 v3 with SVG ellipses and paths, updating head rotations via transform and tail shapes via the "d" attribute in the animation tick.

Feb 13, 2018

Loading thumbnail…

nut

A swarm of one hundred white sperm-like forms swims across a black SVG canvas, each with a rotating elliptical head and a flexible, sinuous tail that undulates as it moves. The animation uses d3.timer to update each form’s position and path, bouncing them off the canvas edges while applying a sinusoidal wave to the tail segments. Rendering is done with SVG ellipse and path elements, styled with white strokes and fills, and the code relies on d3.v3 for data binding and timer-driven animation.

Feb 13, 2018

Loading thumbnail…

nut

Feb 13, 2018

Loading thumbnail…

genome browser withha rula

This example shows a simple genome browser with four genes, each represented as a colored rectangle positioned along a horizontal axis. Forward-direction genes appear in olive green on the top track, while reverse-direction genes appear in dark red on the bottom track, with gene names fading in above each feature. A white ruler strip with tick marks at 100, 500, and 1000 base-pair intervals provides a scale reference. The visualization uses D3 v4 with SVG, animating rectangles via `transition()` and `delay()` to slide into place, while text labels fade in separately.

Feb 13, 2018

Loading thumbnail…

fresh block

A word from the lyrics of Adele’s “Hello” appears one at a time in large type on a canvas, with each subsequent word overdrawing the previous using alternating white and black strokes of increasing thickness. The animation cycles through the full song text as an endless sequence. It uses d3-timer for frame scheduling and two layered Canvas 2D contexts: one holds the static filled text, the other composites stroked outlines and the prior image via drawImage to create the buildup effect.

Feb 13, 2018

Loading thumbnail…

fresh block

The animation displays the lyrics of Adele’s “Hello” as large words that are sequentially drawn and then stroked with expanding, alternating black-and-white outlines. Each word is rendered on a canvas, then copied to a second canvas where the outline effect is applied before being drawn back, creating a flickering, ghostly transition. The code uses d3-timer for the animation loop and the Canvas 2D API’s `fillText`, `strokeText`, and `drawImage` methods. The text is sourced from the song’s lyrics split into individual words.

Feb 13, 2018

Loading thumbnail…

love sosa

A canvas animation cycles through the lyrics of Chief Keef’s “Love Sosa,” one word at a time. Each word is rendered as a thick, growing outline that alternates between black and white, with the outline’s width expanding frame by frame via a `d3.timer` loop. The text is drawn using the Canvas 2D API’s `fillText` and `strokeText`, with two layered canvases—one for the current stroke and one for the accumulating composite image. The source data is the song’s lyrics, split into an array of words.

Feb 9, 2018

Loading thumbnail…

love sosa

The visualization cycles through the words of a Chief Keef monologue, displaying each word in large Helvetica type at the center of a canvas. As each word appears, an animated outline stroke draws over the text, alternating between white and black line widths to create a flickering, hand-drawn effect. The animation uses d3.timer to drive the stroke progression, with two canvas layers—one for the static fill and one for the dynamic outline—composited via `drawImage`. The source text is split from a hardcoded string in the code.

Feb 9, 2018

Loading thumbnail…

chief keef

The visualization cycles through the lyrics of Chief Keef’s monologue, displaying each word in large 300px Helvetica Neue type on a canvas. A d3-timer drives the animation, alternating white and black outline strokes that thicken and overlay in a flickering, glitch-like effect. The code uses two canvas layers—one for the base filled text and another for the stroked outlines—combined via `drawImage` to create the shifting stroke pattern. It renders each word sequentially, clearing and redrawing as the timer progresses through the text.

Feb 9, 2018

Loading thumbnail…

chief keef

The animation displays the lyrics of a Chief Keef monologue, cycling word by word in a large centered typeface. Each word is rendered first as a solid fill, then repeatedly redrawn with an expanding outline that alternates between white and black, creating a flickering, hand-drawn effect as the stroke width grows. The code uses two stacked HTML5 Canvas elements and the d3-timer library to drive the frame-by-frame stroke animation, with the text sourced directly from a hardcoded string split into individual words.

Feb 9, 2018

Loading thumbnail…

fresh block

Four gene annotations slide horizontally into position along two tracks, with forward-strand genes in olive on the top track and reverse-strand genes in burgundy below. Each rectangle fades in and glides from an offset starting point to its genomic start coordinate over 1.5 seconds, staggered by one-second delays, then gene name labels fade in after four seconds. The visualization uses d3.v4 selections, data joins, and the transition method with duration and delay attributes, rendering as SVG with a fixed 1000×400 canvas.

Feb 8, 2018

Loading thumbnail…

genome browser

This example displays a schematic genome browser with four gene rectangles positioned along a horizontal axis, color-coded by direction (green for forward, red for reverse) and labeled by name. A central track with tick marks represents the genomic coordinate scale. Built with D3 v4, the visualization uses SVG rects and text elements, animating gene positions and opacity via transitions that move the rectangles from off-screen starting points to their target coordinates over 2.5 seconds.

Feb 8, 2018

Loading thumbnail…

fresh block

This example displays a simple French flag composed of three vertical rectangles in blue, white, and red. The visualization is built using D3.js v4 and rendered as SVG elements. The code binds an array of objects, each specifying a fill color and an x-coordinate, to `rect` elements via `d3.selectAll` and `data()`. Each rectangle is positioned with fixed y, width, and height attributes, while its color and horizontal position are determined by the bound data properties.

Jan 30, 2018

Loading thumbnail…

fresh block

This example displays a blank SVG canvas with a single monospaced text message prompting the user to edit the code. The rendered output is minimal, showing only the text “Edit the code below to change me!” positioned at a fixed coordinate. The visualization uses d3.v4 to select the body element, append an SVG with a width of 960 and height of 500, and add a text element with specified font size and family. The code demonstrates a basic starting template for interactive block development.

Jan 30, 2018

Loading thumbnail…

fresh block

A red circle sits inside a transparent square outline above two stacked rectangles and a black triangle, composing a simple geometric still life. The SVG canvas is built with d3.v4, using d3 selections to append each shape. The code sets explicit pixel coordinates and attributes for position, size, and fill colors, with a transparent stroke on the first rectangle and solid fills on the others. No data is loaded; the visualization is purely static, generated directly from hardcoded values in the script.

Jan 30, 2018

Loading thumbnail…

fresh block

A single SVG canvas displays the text “If a Man has no Sauce, He is Lost. But the same man can be Lost in the Sauce.” as monospaced, 16-pixel text positioned at coordinates (120, 200) within a 2900-by-500 viewport. Built with d3.v4, the example appends a static text element to the body using D3’s selection and attribute methods, with no data binding or interaction. The rendering is pure SVG, and the source is a minimal Blockbuilder-generated template.

Jan 25, 2018