Travy Trav

@tdog8901·11 public vizzes

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

Mar 13, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst from Mike Bostock’s example, ported to D3 v5 by tdog8901, visualizes hierarchical data using an interactive radial layout with SVG and animated transitions. Clicking a node zooms into that subtree, smoothly re-scaling arcs via `transition.attrTween` and interpolated path data. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the rings, with a color scale based on top-level names. It loads data from a custom `flare.json` file and includes labels that fade in or out based on visibility thresholds.

Mar 13, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

Mar 12, 2020

Loading thumbnail…

Making a Bar Chart :)

This bar chart displays the top 10 most populous countries and continents using 2018 population estimates from a local CSV file, with each bar’s length proportional to its population value. The visualization, built with D3 v5, uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and SVG rendering with `axisBottom` and `axisLeft`. Population numbers are formatted in abbreviated units, and horizontal gridlines extend across the plot.

Mar 4, 2020

Loading thumbnail…

Cars Report

This example demonstrates how to generate a plain-text car report by filtering a hardcoded JSON array of five vehicles and formatting each result. The page initially shows “Loading…” and then displays a list of cars priced under $2,000 after a simulated two-second delay. The code uses JavaScript modules with `export`/`import` to separate data retrieval (`getCars` returning a Promise), formatting via `formatCar`, and filtering/joining logic in `generateReport`. The final output is rendered into a `<pre>` element using `textContent`.

Feb 24, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in the center of the browser window using pure HTML and CSS. The page relies on a simple `<style>` block to set the body’s `text-align` to `center` and a large `13em` font size. No JavaScript libraries or data sources are involved; it serves as a basic template for starting HTML-based visualizations. The code uses standard HTML tags and global CSS properties, with no external dependencies or frameworks.

Feb 11, 2020

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript pipeline for filtering and formatting car listings. It fetches hard-coded JSON data via a custom `getCars` promise, then uses `generateReport` to filter cars under a price threshold and map each entry through `formatCar`, producing a plain-text report displayed in an HTML `<pre>` element. The code exercises ES6 modules, array methods like `filter` and `map`, and template literals, with no external visualization libraries.

Feb 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes a simple face made entirely of SVG shapes, drawn on a red background using D3.js. The code selects the SVG element with `d3.select` and applies a red background style, while CSS classes define green lines and rounded path strokes. It demonstrates basic D3 v5 setup within a React framework, using an empty SVG canvas sized 960 by 500 pixels. The visualization shows how minimal D3 code can structure and style vector graphics, with the face’s details left to be added by the user.

Feb 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered through React, showcasing circles, rectangles, lines, and paths with varied fill, stroke, and grouping. The code uses raw SVG elements and CSS classes, such as `.lines` and `.lines path`, to apply styling like stroke width and line joins. A CSS rule sets the body margin to zero and hides overflow, while the SVG is scaled with a transform. The example highlights how SVG structure and external CSS work together to control visual properties without additional libraries.

Feb 11, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple static HTML report listing three cars with their model years and weights. It renders the data as a plain bulleted list, with the first item highlighted in red. The page uses raw HTML and CSS, with a monospace font and larger type size set in the `styles.css` file. The highlighting effect comes from the `.highlighted` class applied to the first `<li>` element, and no JavaScript or external libraries are involved.

Feb 11, 2020

Loading thumbnail…

Cars Report

This example shows a simple text-based car report generated from a hardcoded JSON array. It begins by displaying “Loading...” then, after a two-second delay, lists cars priced under $2,000 in a formatted string. The code uses JavaScript modules, native `Promise`, `setTimeout`, and `JSON.parse` to simulate asynchronous data fetching. The report is rendered into a `<pre>` element via `document.getElementById`, with all logic split across separate files for data, formatting, and report generation.

Feb 11, 2020