BTKY

@BTKY·6 public vizzes

D3 Scatterplot Example

This example visualizes the relationship between calories and protein content for various breakfast cereals using a scatterplot. Each dot represents a cereal, with its horizontal position mapped to calorie count, vertical position to protein grams, and color indicating the manufacturer. The chart includes labeled axes, a categorical color legend, and interactive tooltips that display the cereal name and exact values on hover. Built with D3.js v3, the code uses the `d3.scale.linear` API for axis scaling, `d3.svg.axis` for rendering, and SVG circles for the data points. The dataset is loaded from a local CSV file and processed with `d3.csv`.

Oct 11, 2017

Loading thumbnail…

Zoomable forcegraph

This visualization shows a weighted force-directed network of co-occurring words from a text corpus, with node size proportional to word frequency and curved links between related terms. The graph uses the classic Les Misérables dataset structure, though with custom node and link values. Built with D3 v4, it applies `d3.forceSimulation` with link, charge, collision, and centering forces, while `d3.forceLink` distances depend on node radii. Labels appear on each node, and a semi-transparent overlay rectangle enables zooming via `d3.zoom` with pan and scale limits between 0.5 and 4×.

Sep 23, 2017

Loading thumbnail…

Weighted nodes and curved links v4

A force-directed graph shows relationships among concepts extracted from news articles, with node size reflecting frequency and colors representing thematic categories. Curved links connect related terms, and the layout separates clusters by topic. The visualization uses D3 v4's `d3.forceSimulation` with link, charge, collision, and centering forces, and renders nodes and curved paths as SVG. Data comes from a JSON file of nodes and links, with node values stored as strings.

Sep 23, 2017

Loading thumbnail…

Weighted nodes and curved links v4

This force-directed graph visualizes word co-occurrence in a dataset of government, military, gender, media, trade, and science terms. Node size reflects word frequency, and links connect co-occurring words. The graph uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` forces to position related words closer together. Nodes are rendered as circles with labels, and curves are drawn as SVG paths. The data is a JSON file based on word co-occurrence, not the original Les Misérables character data.

Sep 23, 2017

Loading thumbnail…

Weighted nodes and curved links

A weighted force-directed graph displays words and thematic categories from JSON data, with node size scaled by a square-root transform and colors assigned by category class. Curved links, drawn as SVG paths, connect nodes using a single-arc approximation that produces dual parallel curves between pairs. The example uses D3 v3 with `d3.layout.force` for the physics simulation and `d3.scale.sqrt` for sizing, rendering entirely as SVG within an HTML page.

Sep 23, 2017

Loading thumbnail…

Basic Directional Force Layout Diagram with Random values

This example shows a directional force-directed graph of hierarchical consumption data, with curved links and arrowheads indicating the direction of each relationship. Nodes represent categories like government, military, and media, with circle size proportional to each node’s value. The visualization uses d3.layout.force to simulate the layout, dragging, and tick events, while SVG paths render curved edges via a marker-end arrow definition. Data comes from a JSON file containing nodes and links, and node labels are displayed alongside circles. The code adapts earlier Bostock examples, combining force simulation with custom path curves and interactive node dragging.

Sep 23, 2017