James DePaola

@qtzlworm·4 public vizzes

Directed Graph Editor

This interactive editor lets users manipulate and design directed graphs. It visualizes nodes as colored circles and edges as straight lines with arrow markers indicating direction. Users can add nodes, drag them to reposition, and create new edges by drawing lines between them. The graph is rendered using SVG and animated with d3.forceSimulation for layout and d3.drag for node interaction.

Feb 2, 2021

Loading thumbnail…

Bar Chart

This bar chart displays game ratings for a collection of board games, sorted from highest to lowest rating. The chart uses an SVG rendering with D3 v6, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file via `csv()`, parsed, and sorted before rendering. The `wrap` function handles long game titles, while styled rectangles represent each rating value.

Feb 2, 2021

Loading thumbnail…

This is my title

A yellow smiley face is drawn on a light blue SVG canvas, featuring two black eyes and a curved mouth. The mouth begins as a wider arc and animates into a smaller, more pronounced smile using a D3 transition on a path generated with the `d3.arc` generator. The face is constructed with basic SVG circle and path elements, positioned via a `g` transform. The animation uses D3 v6's selection transition, showing a dynamic shift in the mouth's start and end angles over time.

Feb 2, 2021

Loading thumbnail…

Cars Report

This example shows a simple report of car data, displaying a single formatted line of text about one car from a small dataset. It loads D3 v5 from UNPKG and uses an ES6 module to asynchronously fetch car data with a Promise after a simulated delay. The page initially shows a loading message, then updates the text content of an HTML element using `document.getElementById` to display the selected car’s year, make, model, and price. The code demonstrates importing local modules and using D3 via a script tag.

Feb 2, 2021