sreeanthrds

@sreeanthrds·9 public vizzes

Blank Canvas

A blank rectangular canvas in vivid purple stretches across a fixed browser window, rendered as a single rounded rectangle. D3 v5 selects an empty SVG and appends a rect element sized to the SVG's declared dimensions, with a corner radius of 40. The code logs the document body width and height to the console, while CSS locks the viewport and applies a solid background color.

Jun 21, 2020

Loading thumbnail…

Let's maka a face

This example uses D3.js to construct a simple face from SVG shapes. The code loads D3 v5 and selects an empty SVG element, though the script currently only calls `d3.select()` without specifying a target or adding visual content. The HTML includes a linked stylesheet and a 960x500 SVG canvas, suggesting the intended structure for drawing facial features with D3’s SVG manipulation methods. However, no actual rendering logic is implemented in the provided source.

Jun 20, 2020

Loading thumbnail…

Simple tables in D3

This example demonstrates how to build a static HTML table using D3’s data-join pattern. It renders ten movie records—including title, year, length, budget, and rating—as table rows with formatted numbers, using `d3.format` for currency and one-decimal ratings, and a custom function for length as hours:minutes. The code constructs the table by appending `thead` and `tbody` elements, binding column definitions and row data via `selectAll` and `.data().enter()`, and applies CSS classes from the column definitions for alignment. The visualization relies on D3 v5 and the d3-jetpack helper library, with the data hardcoded in the script rather than loaded from a CSV.

Apr 18, 2020

Loading thumbnail…

React Starter

This example shows a simple React application that renders the text “Hello React!” as a large, centered message. It uses React 16.10.0 and ReactDOM to mount a functional component into a div with the id “root”. The component’s styling is defined in an embedded CSS rule, and the code is bundled for execution in the browser. The rendering approach relies on ReactDOM.render to insert the element into the page.

Apr 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, demonstrating basic SVG element creation and animation. A circle forms the head, with two eyes and a mouth drawn using the `arc` generator. The eyebrows, rendered as rectangles, automatically move up and down through chained `transition` calls set to a two-second duration. The code uses d3-selection to append and style shapes within a central group, transforming coordinates to center the face on the canvas.

Apr 17, 2020

Loading thumbnail…

Let's make a face with d3.js!

A cheerful robot face built with SVG elements appears on a yellow circular head with black eyes and a curved mouth. The animation shows the eyebrows moving up and down repeatedly using chained `transition()` calls with two-second durations in D3 v5. The visualization uses `d3.select` and the `arc()` generator to create the mouth path, while React handles the component structure and SVG rendering in the browser.

Jan 13, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates dynamic DOM manipulation with SVG and animation. The face, built from primitive shapes, shows eyebrows, eyes, nose, and mouth that shift in a looping sequence using D3 transitions. The `arc` generator constructs a curved mouth, while chained `transition().duration()` calls animate groups with 2-second movements. Positioned around the SVG center, the components rely on `attr` methods to define coordinates, and the animation cycles through offset translations before returning to the original state.

Jan 13, 2020

Loading thumbnail…

D3.js collapsibleRRR tree with boxes

A hierarchical tree visualization displays nested nodes as labeled boxes, with colored types (blue, green, yellow, purple) and tooltips on hover. Built with D3.js v3, the SVG-based layout uses the custom `treeBoxes` function and `d3.layout.tree` to position nodes, while interactive zooming, dragging, and collapsible branches are enabled through `d3.behavior.zoom` and click handlers. The example loads JSON data from `data-example.json` and renders it as an interactive, animated tree.

Jan 10, 2020

Loading thumbnail…

D3.js collapsibleRRR tree with boxes

This visualization displays a collapsible tree structure where each node is rendered as a box containing text labels. The tree supports interactive expansion and collapse of child nodes, with node colors indicating different data types (type1 through type4). The code uses D3.js v3’s `d3.layout.tree` to compute node positions and `d3.select` to append SVG elements, while jQuery handles the initial JSON data loading. The visualization includes animated transitions, zoom and drag capabilities via `d3.behavior.zoom`, and tooltips for additional node details.

Jan 10, 2020