Golodhros

@Golodhros·12 public vizzes

Collapsible Tree

This example shows a hierarchical dataset from `flare.json` as a collapsible tree layout. Clicking a node toggles its children, animating the expand and collapse with transitions. The code uses `d3.layout.tree` to compute positions, `d3.svg.diagonal` for curved links, and SVG elements for rendering. Nodes and links are updated via data joins and `transition` calls, with entering and exiting elements animated from the parent’s position.

Jun 4, 2020

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes the hierarchical structure of the "flare" dataset, displaying nodes as colored circles and edges as lines. Clicking a node toggles its children, expanding or collapsing branches of the tree. The visualization uses D3 v3's `d3.layout.force` for the physics simulation and `d3.layout.tree` to derive links, rendering everything as SVG. Node colors indicate leaf status (orange), expanded parent (blue), or collapsed parent (light blue), with node size reflecting the `size` attribute from the JSON data.

Jun 4, 2020

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, with letters arranged along the x-axis and their proportional occurrence on the y-axis. It uses D3 v4 with SVG rendering, parsing tab-separated values from a TSV file via `d3.tsv` and `d3.dsv`. The chart applies conventional margins and employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axis` components for tick marks. Hovering over a bar changes its fill from steelblue to brown, as defined in the CSS.

Jan 2, 2019

Loading thumbnail…

Bar Chart in D3 v5

This bar chart displays the frequency of each letter in the English alphabet, with letters arranged along the x-axis and their proportional frequencies along the y-axis. It first parses a tab-separated values (TSV) file using `d3.tsv`, converting string frequencies to numbers. The visualization then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Rendered as SVG rectangles with a steelblue fill that turns brown on hover, the chart uses a conventional margin layout and highlights bars without tooltips or animation.

Aug 10, 2018

Loading thumbnail…

Britecharts Heatmap MVP

This example renders a heatmap of GitHub commit activity for the Britecharts repository, using data from the GitHub punch_card API. The visualization displays days of the week on one axis and hours on the other, with colored boxes representing commit quantities. Built with d3.v4, it uses `d3.scaleLinear` with `d3.interpolateHcl` to map data values to a red color gradient. The chart exposes custom mouse event dispatchers via `d3.dispatch` and renders boxes as SVG elements within a container group.

Aug 1, 2017

Loading thumbnail…

TDD Bushing Demo

This demo shows an interactive time-series area chart with a brushing tool to select date ranges. It renders an SVG area with a gradient fill, using D3 v3’s `d3.svg.brush` and `d3.time.scale` to filter data points. The code is structured with a reusable chart module and a separate data manager that loads CSV data, while tests using Jasmine verify the chart’s rendering and API getters/setters.

Sep 8, 2016

Loading thumbnail…

TDD Bar Chart

This bar chart displays the frequency of letters in the English language using a TSV dataset. The example demonstrates a test-driven approach to building a reusable, responsive D3.js chart, built upon Mike Bostock's original block and the Data Manager API for loading and parsing data. The chart uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` for display, with bars rendered as SVG rectangles. The code includes a Jasmine test suite that validates chart rendering, structure, and configurable properties like width, height, and margins.

Nov 29, 2015

Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

Oct 11, 2015

Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

Sep 30, 2015

Loading thumbnail…

JavaScript Object Builder

This example shows a JavaScript object builder pattern for generating test data, specifically constructing OrderModel instances through a fluent, chainable API. The code defines an `OrderModelBuilder` constructor that uses underscore.js utilities like `_.defaults` and `_.extend` to manage configuration and merge attributes for categories like paid tickets and states like sold-out. Methods such as `withPaidTicket()` and `withSoldOutState()` return new builder instances, while `build()` finalizes the object. It demonstrates the factory-style composition and reusable template for creating test fixtures in a testing or mock-data context.

Jul 25, 2015

Loading thumbnail…

TDD D3 Template

This template demonstrates a test-driven approach to building a reusable D3 bar chart, showing the frequency of letters in a dataset. The chart is rendered as an SVG, with bars and axes built through a modular `graphs.chart` module. It uses `d3.scale.ordinal` with `rangeRoundBands` for the x-axis and `d3.scale.linear` for the y-axis, with `d3.svg.axis` for tick marks. A separate `dataManager` module handles loading TSV data via `d3.tsv`, dispatching `dataReady`, `dataLoading`, and `dataError` events, while Jasmine specs verify chart structure and getter/setter methods.

Jul 25, 2015

Loading thumbnail…

My First Block

Golodhros' first block is a minimal webpage that loads D3 version 3 and logs a simple greeting to the browser console. The page displays a static title, "Golodhros first block," and a styled header using the Open Sans font, but it does not render any chart or visualization. The JavaScript defines a custom `d3.unconf` function that prints "Golo!" to the console, and then calls it immediately. The example demonstrates how to set up a basic D3 project structure with separate HTML, CSS, and JavaScript files, though it contains no data or visual output beyond the text elements.

Feb 21, 2015