TamayoValencia

@TamayoValencia·14 public vizzes

D3 Force Simulation

A force-directed layout positions seven people in a network diagram based on gender and age. Each person is a colored circle, with steelblue for male and firebrick for female, and links show relationships. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCollide`, and `d3.forceLink` to compute positions. Nodes are draggable via `d3.drag`, while `d3.scaleSqrt` sizes circles by age and `d3.scaleOrdinal` maps gender to color. The SVG is 800 by 400 pixels.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

A force-directed network graph displays seven people connected by social links, with node size encoding age and color encoding gender throughout the simulation. The layout uses `d3.forceSimulation` with multiple forces: `d3.forceX` for gender-based horizontal separation, `d3.forceY` for vertical centering, `d3.forceCollide` for collision avoidance, and `d3.forceLink` for edge attraction. Users can drag nodes via `d3.drag()`, which dynamically adjusts the simulation’s temperature. Data is hardcoded as JavaScript arrays and rendered to SVG with circles and lines.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

This example uses D3 v4’s force simulation to lay out a small social network of seven named people connected by eight friendship links. Node size encodes each person’s age via a square-root scale, while a title tooltip reveals the name on hover. The simulation combines `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceLink`, rendering nodes as circles and links as lines in an SVG. The layout updates continuously on each tick, with positions recalculated in the `ticked` function.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

A network of 100 circles and 300 random links forms a force-directed layout rendered as SVG. The example uses d3.forceSimulation with center, charge, collide, and link forces to position nodes dynamically. Each circle is a node, and lines represent links, with node age assigned randomly but not visually encoded. The simulation updates positions on each tick, and drag behavior is referenced from Mike Bostock’s block, though not implemented here. Node and link data are generated randomly, and the viewport is fixed at 800 by 400 pixels.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

This example demonstrates a force-directed graph layout of 100 unlabeled nodes connected by 300 random links. The visualization shows how the network stabilizes over time as the D3 force simulation distributes nodes across a 400×400 SVG canvas. Using d3.forceSimulation, it applies d3.forceCenter to center the layout, d3.forceManyBody with weak negative charge to repel nodes, and d3.forceLink with a fixed distance to maintain edge lengths. Circles and lines are rendered as SVG elements, with positions updated on each tick event.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

This example shows a force-directed network layout of 100 nodes and 300 randomly generated links, rendered as circles and lines in an SVG canvas. The visualization uses `d3.forceSimulation` with three forces: `d3.forceCenter` to pull nodes toward the middle, `d3.forceManyBody` with negative strength for repulsion, and `d3.forceLink` to maintain a 50-pixel link distance. The simulation runs continuously via a `tick` event, updating node positions and link coordinates each frame. Nodes are interactive through `d3.drag()`, allowing users to manually reposition them while the simulation responds.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

A force-directed layout simulates a network of 100 nodes and 300 random links inside a 400-by-400 SVG canvas. The graph uses d3.forceSimulation with center, many-body charge, and link forces to position nodes, while d3.drag enables interactive node dragging. The tick event updates line and circle positions, rendering steelblue nodes connected by semi-transparent gray links.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

This example shows a force-directed network graph with 100 nodes as steelblue circles and 100 randomly generated links, though the links are not rendered. The layout is static because the code does not call d3.forceSimulation, despite the title; instead, nodes are positioned randomly within a 400x400 SVG using d3 selections and the .attr() method. The visualization is built with D3 v4 and renders to SVG, with node data generated via d3.range and Math.random.

Aug 11, 2018

Loading thumbnail…

D3 Force Simulation

This example displays a static force-directed layout of 100 randomly positioned circles rendered as an SVG network. It creates nodes with randomized x and y coordinates using `d3.range` and `Math.random`, then appends them as circle elements to a 400 by 400 SVG canvas. Although the code sets up node data, it does not call `d3.forceSimulation` or create any links, so the circles remain in their initial random positions without movement. The visualization uses D3 v4 and directly manipulates SVG circle attributes.

Aug 11, 2018

Loading thumbnail…

Barchart d3v4

This bar chart displays the height of four individuals, John, Mafe, Sonia, and Vicente, using a static SVG canvas. The visualization, built with D3 version 4, maps the categorical names to the x-axis and the quantitative height values to the y-axis. The code uses `d3.scaleBand` and `d3.scaleLinear` to construct these scales, with bars rendered as SVG rectangles. Data is hardcoded in the script, and axes are generated using the `d3.axisBottom` and `d3.axisLeft` APIs.

Aug 11, 2018

Loading thumbnail…

Barchart d3v4

This example shows a static bar chart displaying the heights of four individuals, labeled with their names. Built with D3 version 4 and rendered as SVG, the visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The code demonstrates the enter, update, and exit phases of the data join, appending rectangles via the `points` selection and calling `d3.axisBottom` and `d3.axisLeft` to draw the axes. The underlying data is hardcoded in the script, and the chart is contained within a fixed 400x200 pixel SVG element.

Aug 11, 2018

Loading thumbnail…

fresh block

This example shows a small scatterplot of four people, mapping their age on the x-axis and height on the y-axis. The chart is rendered as an SVG with D3 v4, using `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data is hardcoded in an array of objects and drawn as circles via `g.selectAll(".point")` in a complete enter-update-exit pattern. The code uses `d3.select` (a typo for `d3.select`) to target the SVG element and appends axis groups manually. The plot includes a title and a playful caption in Spanish.

Aug 11, 2018

Loading thumbnail…

fresh block

A scatterplot displays four data points mapping each person's age on the x-axis against their height on the y-axis, using D3 v4's `d3.scaleLinear` and `d3.axisBottom` for scales and axes. The SVG circles are bound to an array of objects with `name`, `age`, and `height` fields, and updated through D3's data join pattern with `enter()`, `merge()`, and `exit()`. The data is hardcoded in the script, and the visualization renders as a small 200-by-200 pixel SVG with margin-based grouping.

Aug 11, 2018

Loading thumbnail…

fresh block

This example shows an empty scatterplot-style SVG canvas with a title and a playful Spanish message. The code initializes an SVG element with a width of 400 and height of 600 pixels, selects it using `d3.select`, and logs those dimensions to the console. It relies on the D3.js v4 library loaded from a CDN, but the visualization itself contains no rendered data points or axes. The script sets up the basic structure for a future scatterplot without implementing any drawing or data-binding logic.

Aug 11, 2018