Daniel

@DanielVT2023·4 public vizzes

Fork of Responding to Resize

This example demonstrates how a D3.js visualization can automatically resize its SVG output to match the browser window’s dimensions. The code uses CSS to make a container div fill the viewport, then reads `clientWidth` and `clientHeight` to set the SVG’s width and height attributes. It draws an X shape using two green lines with heavy stroke width and opacity, showing the current size. The `redraw` function reapplies these dimensions whenever the window is resized by listening to the `resize` event.

Jun 4, 2021

Loading thumbnail…

Fork of Fork of SVG Playground

This example is a minimal D3.js playground template, rendered as a nearly blank page with a large font-size style. It demonstrates the basic setup for creating SVG-based visualizations using D3 v6 and CSS, logging a welcome message and the loaded D3 object to the browser console. The HTML structure links an external stylesheet and a main script, while the JavaScript file only initializes the console output, showing no actual data or rendering operations. The example serves as a starting point for further SVG and D3 development.

Jun 4, 2021

Loading thumbnail…

Fork of SVG Playground

This example is a minimal SVG playground that logs a greeting and the D3 library version to the browser console. It demonstrates a basic setup for building SVG graphics, using D3 v6 and a CSS file that sets the page font size. The visualization itself shows no graphical output; instead, it serves as a starting template for experimentation, with the main JavaScript file calling `console.log` to verify the environment.

Jun 4, 2021

Loading thumbnail…

Fork of SANKEY Diagram for Spread of COVID-19

A Sankey diagram visualizes the early spread of COVID-19 between countries, with China as the primary source and Japan, the UK, and South Korea as major secondary hubs. The diagram shows the flow of cases from these origins to destinations around the world, including Europe, the Americas, and Africa. The implementation uses the d3.sankey plugin to compute node positions and link paths, rendering the result as an SVG with draggable nodes. A data.json file supplies the weighted country-to-country links, and the nodes are colored according to their name using d3.scaleOrdinal.

Jun 4, 2021