antoniojl@gmail.com

Task Graph With Force Simulation

This example visualizes a task graph as a node-link diagram with a force-directed layout. It shows how parent-child relationships among tasks (such as “albert” and “betty”) are inferred from a data structure that records each node’s parent, then rendered as an SVG with circles and connecting paths. The code uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes dynamically, while tick events update the paths and node positions. Drag behavior is enabled via d3.drag, and links are styled with dashed strokes or colors based on link values.

May 31, 2022

Force Directed Graph For TaskGraph #2

This example displays a force-directed graph of a small task hierarchy, using nodes named albert, bettie, carly, donna, echo, and father, with links that are either solid blue or dashed black. The visualization is rendered as an SVG with D3 v5, using `d3.forceSimulation` to compute node positions with link, charge, collision, and centering forces. The code builds nodes dynamically from the link data and supports interactive dragging of nodes, with links styled according to a binary value attribute that dictates their color and dash pattern.

May 26, 2022

Force Diagrams for TaskGraph

This example demonstrates an interactive force-directed graph built with GoJS, where users can push and pull nodes in real time while a custom ContinuousForceDirectedLayout continuously recalculates node positions. The layout keeps selected nodes fixed while moving others, and it caches the force network for efficiency, invalidating it only when the model changes. Nodes appear as blue circles with text labels, and links include directional arrowheads with semi-transparent label backgrounds. The example also includes a minimal D3.js message display using `select`, showcasing integration with ES6 modules.

May 26, 2022

Force Graph Trial

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository, with each circle’s radius representing acceleration and stroke color indicating country of origin. The visualization uses D3 v7’s `scaleLinear` for the x, y, and radius scales, along with `axisBottom` and `axisLeft` to draw axes with gridlines. Data is loaded via `csv` from a remote file, and circles are appended to an SVG canvas, styled with transparent fills and colored strokes based on origin.

May 25, 2022

d3 | nodes | experimental

This experimental visualization combines a force-directed graph with Japanese number interaction. The page displays Japanese numerals (0–9) with their English readings, updated via keyboard input or button clicks using Mousetrap bindings and D3 selections. A network diagram, rendered through `d3.forceSimulation` with nodes and links, accompanies the numeric display. The JSON dataset maps each numeral to its Japanese character and reading, while D3’s `scaleOrdinal` assigns colors to node groups. The force layout, drag behavior, and tick updates drive the animated node and link positioning.

May 23, 2022

d3 | keypress keyboard events

This example demonstrates Japanese number characters (zero through nine) and their readings, which update interactively when a user presses a number key or clicks a button. Built with D3.js v3, it binds keyboard events using the Mousetrap library and handles button clicks through D3 selections and the Lodash `times` helper. The `update` function uses D3’s `select` and `html`/`text` methods to change the displayed character and reading, while adjusting button opacity to highlight the active selection.

May 6, 2022

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with circles colored by country of origin (USA, Japan, or Germany). The visualization loads data from the UCI Machine Learning Repository’s auto-mpg dataset using D3’s `csv` method. It uses `scaleLinear` for both axes and circle radius (representing acceleration), plus `axisBottom` and `axisLeft` for labeled axes. SVG circles are rendered with stroke colors mapped from the `origin` column, and the chart includes a title and axis labels.

Scatter Plot

This scatter plot shows the population of the top ten most populous countries, with each circle positioned along a linear population axis and a point scale for country names. The data comes from the 2017 World Population Prospects, multiplied by 1000 in the loader. The visualization uses D3 v7 with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG chart, including gridlines and formatted tick labels that convert billions to the letter "B".

Customizing Axes

This example shows a horizontal bar chart ranking the top ten most populous countries using 2018 data from World Population Prospects 2017. D3.js v7 with SVG renders the bars, while `scaleLinear` and `scaleBand` position them, and `axisLeft` and `axisBottom` create the axes. The x-axis uses custom tick formatting via `format('.3s')` to display billions with a 'B' suffix, and grid lines are added through `tickSize`. The chart also removes axis domain lines and adds custom labels for clarity.

Making a Bar Chart

This bar chart displays the population of the top ten most populous countries, based on 2018 estimates from the World Population Prospects 2017. The visualization uses an SVG-rendered layout with horizontal bars, where each country’s population is encoded by bar length. The code employs D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position and label the bars, and it loads data from a CSV file using `d3.csv`. Bars are styled with a steelblue fill, and the chart includes margins and axes for clarity.

My own face with D3.js!

A yellow circle face with black eyes, eyebrows, nose, and a mouth is drawn in SVG, with the eyebrows animating up and down. The piece uses D3.js v7 to generate the static facial features, while a chained `transition` on an SVG `<g>` element moves the eyebrows to create a repeated raising and lowering effect. The mouth is built with the `d3.arc` helper to form an arc path. The background is styled red, and the face is centered using SVG transforms.

Let's make a face with D3.js!

A cheerful yellow face built from basic D3.js shapes remains centered on a red background. D3 selections and transitions animate the eyebrows upward and then back down. The code constructs the face using SVG circles, rectangles, and an arc path, with `select`, `arc`, and chained `transition` calls from the D3 v7 module. All elements are positioned relative to a translated group, and the animation runs continuously on page load.

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid-like composition with varied fill colors, strokes, and transforms. The rendering uses raw SVG markup inside an HTML page, with CSS classes applied to style group elements, such as setting black stroke and width for line elements. The code relies on standard SVG APIs (circle, rect, line, path) and CSS selectors to control presentation, including a `translate` transform to reposition groups and a `scale` transform on the root group. No external JavaScript libraries or data sources are used, as the shapes are hardcoded in the markup.

My D3 Tutorial

This example presents a static HTML report listing three used cars with their model years and prices. It demonstrates basic DOM styling with CSS, using a monospace font and a red highlight class on the first list item. The page relies on standard HTML and CSS, with no JavaScript libraries or D3 APIs involved. The data is hardcoded directly into the markup, and the visualization is limited to simple text formatting and color emphasis.