Treblesteph

@Treblesteph·9 public vizzes

Gist 4aade5a4635015138534623e25d20ab6

This example demonstrates a cryptographic identity verification workflow, showing how a GitHub user proves ownership of their Keybase account. It displays a JSON signature object alongside a plain-text explanation, with the rendered content illustrating the signed statement and its public key reference. The visualization uses standard web rendering through a simple HTML layout, relying on the GitHub gist interface to present the Keybase proof data. No external data visualization libraries are employed; instead, the code relies on basic DOM elements and CSS styling to display the structured proof content.

Dec 24, 2017

Loading thumbnail…

Software Carpentry concept map

This interactive graph maps questions about research software and data practices to concrete answers, using a directed acyclic graph. The visualization is rendered with dagreD3 and D3.v3 as an SVG, with nodes representing concepts and edges showing relationships. Pan and zoom are enabled, and clicking a node centers the view on it for easier navigation when expanding or collapsing the hierarchy. The graph is laid out left-to-right, with rounded node edges and a custom color applied to specific nodes via CSS.

Apr 4, 2016

Loading thumbnail…

Gist 4ba022d61f72f5f6d565df0944909ab0

A directed graph visualizes how software carpentry answers address research questions, with teal question nodes on the left and sienna answer nodes on the right. The layout is computed by dagreD3, which reads a Graphviz DOT definition from the design string via graphlibDot. D3 v3 renders the result as SVG, with edges showing which practices support each question about reproducibility, collaboration, and data management.

Apr 1, 2016

Loading thumbnail…

fresh block

This interactive collapsible tree visualizes the taxonomic hierarchy of the order Coleoptera (beetles), showing suborders, infraorders, superfamilies, and families. The d3.v3 code uses `d3.layout.tree` and `d3.svg.diagonal` to draw the nodes and links, with jQuery handling the expand/collapse interactions. Hovering over a node displays the taxonomy label, and clicking a node toggles its children. The visualization reads hierarchical data from a local `fams_taxonomy.json` file, rendered with white circles and steelblue strokes against a gray background.

Dec 1, 2015

Loading thumbnail…

fresh block

A hierarchical cluster diagram displays the taxonomic classification of beetles, from order through suborders and infraorders down to individual families. The visualization uses a tree layout with curved diagonal links connecting parent and child nodes, each labeled with its taxonomic name and category. The code loads the JSON taxonomy file and renders it using d3.layout.cluster and d3.svg.diagonal in SVG, with circles for nodes and text labels positioned alternately on either side of parent nodes.

Nov 30, 2015

Loading thumbnail…

Concentration time series plotting

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.

Nov 8, 2015

Loading thumbnail…

Mozfest example

This example from a Mozfest D3.js workshop demonstrates a simple bar chart of 100 randomly generated values. Each value is an integer between 0 and 29, represented as a vertical rectangle. The SVG bars are positioned along the x-axis with equal spacing and their heights correspond directly to the random data values. The visualization uses a fixed width of 800 pixels and height of 100 pixels, with bars drawn from the bottom of the chart upward. The code iterates through the dataset, assigning each rectangle a width based on the total number of items and a height matching the random value. The rendering is done entirely in SVG via D3's data join pattern, creating a basic bar chart that serves as an introductory example for the Mozfest D3.js workshop.

Nov 7, 2015

Loading thumbnail…

Mozfest example

This example demonstrates D3.js’s data-join pattern by binding a hardcoded array of three numbers to paragraph elements. The page updates existing paragraphs and creates new ones, coloring existing elements blue and newly entered elements green via CSS classes. It uses the D3 selection API’s `data()`, `enter()`, and `exit()` methods to handle the update, addition, and removal of DOM nodes. The visualization shows the classic enter-update-exit cycle with minimal markup and a fixed array as its data source.

Nov 7, 2015

Loading thumbnail…

explicit encoding declaration avoids conflicts for non-ASCII chars

This Ruby script demonstrates a text-cleaning workflow for BibTeX files, showing how to systematically remove unwanted metadata fields, replace non-ASCII characters with LaTeX-safe escapes, and strip problematic symbols. It reads a bibliography file, processes each line while tracking multi-line field deletions, and applies regular-expression-based replacements for characters like ó, é, and ö. The script uses Ruby’s File I/O, Regexp, and string mutation methods (`gsub!`), with a debug flag to inspect specific entries. The output is a fixed bibliography file ready for LaTeX compilation, preserving entry structure while sanitizing content.

May 27, 2014