Rafael Campos

@rafaelfernandezcampos·7 public vizzes

Untitled

This example shows a small directed graph of four nodes representing people and databases, with labeled edges indicating relationships such as “KNOWS” and “FOUNDED.” The visualization uses d3.forceSimulation to position nodes, and SVG lines with arrowhead markers for links. Node labels display names and types, while edge labels are placed along paths using textPath. The graph is draggable, with the simulation restarting on interaction, and node colors are assigned via d3.scaleOrdinal with d3.schemeCategory10. Data is loaded from an inline JSON object.

Jul 30, 2020

Loading thumbnail…

Force-Graph

This example shows a force-directed graph of four named nodes connected by weighted links, rendered as SVG within a React framework. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while the simulation’s `tick` event updates node and link coordinates. Nodes are draggable via `d3.drag`, and links are colored using a `d3.scaleOrdinal` based on `d3.schemeCategory10`. Data is loaded from a local JSON file, and node labels are displayed as text elements.

Jun 9, 2020

Loading thumbnail…

Force-Graph

A force-directed graph visualizes relationships among four nodes labeled A through D, with curved arrows representing directed links whose thickness corresponds to a numeric value. The D3 v4 force layout, specifically `d3.layout.force`, positions nodes via simulated physics—charge repulsion and link distance—while SVG paths draw the arcs. Node labels and circles are rendered in SVG, and the graph loads JSON data from a static file. The code also enables dragging nodes and updates positions on each tick event.

Jun 9, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5 and renders to SVG, employing `d3.csv` for data loading and `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and axes. Grid lines are drawn via tick sizes, and the chart includes labeled axes and a title.

Apr 25, 2020

Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using population figures from a CSV file. The bars are rendered as SVG rectangles, with a linear scale mapping population to bar width and a band scale positioning countries along the vertical axis. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with a custom tick formatter that converts values from billions to a readable format. Axis labels and a chart title are added via SVG text elements.

Apr 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

An animated yellow face with bouncing eyebrows and a morphing mouth is drawn in SVG using D3.js v5. The face is composed of circles, rectangles, and an arc-generated path, all centered within a 960×500 viewport. Transitions animate the eyebrow group’s vertical position over two seconds and change the mouth’s inner radius between 150 and 0 over three seconds, looping indefinitely via a `while(true)` block. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to orchestrate the continuous motion.

Apr 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes—a yellow circle, two eyes, and an arc-shaped mouth—bobs its rectangular eyebrows up and down in a repeating two-second animation. The D3.js code constructs the face using `d3.select` and `d3.arc`, then applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position. Rendering occurs in an SVG canvas at 960 by 500 pixels, with all coordinates centered via a translated group.

Apr 22, 2020