plai1

@plai1·5 public vizzes

D3 Node-Link Diagram

A D3 node-link diagram visualizes social connections from a CSV file. Nodes represent individuals in tribes, colored by aggregated edge values, while links show positive and negative relationships. The layout uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position nodes, updating SVG circles and lines each tick. Hovering triggers a tooltip displaying node ID and value.

Oct 29, 2022

Loading thumbnail…

D3 Node-Link Diagram

This example demonstrates a node-link diagram representing social connections among 16 tribal groups, with 58 edges showing positive or negative relationships. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and centering forces. Circles are rendered as SVG elements with dark blue fill and partial opacity, while lines represent connections. The data is loaded from a CSV file, and hover interactions trigger tooltip visibility. The code uses D3 v7 and includes the d3-legend and d3-scale-chromatic libraries, with the simulation updating node and link positions on each tick.

Oct 27, 2022

Loading thumbnail…

D3 Bar Chart

This example displays a bar chart using D3.js within a React framework, showing the average review scores of top video game publishers from a CSV file. The visualization loads data from `top_10.csv` using the `loadTable` function and renders bars as colored `div` elements with steelblue backgrounds. The code uses D3.js selection methods like `d3.select` and `.selectAll` to bind data, while also defining an SVG canvas with width and height attributes. The chart is generated client-side entirely with JavaScript and CSS, without any additional charting libraries.

Sep 20, 2022

Loading thumbnail…

Bar Chart

This bar chart displays the average review scores for video game publishers, with each publisher’s name and score rendered as text alongside a vertical bar whose height corresponds to the score. The visualization uses the p5.js library, including `loadTable()` to fetch CSV data from a GitHub gist, `createCanvas()` to set a wide canvas, and `rect()` to draw the bars, with score labels positioned via `text()`.

Sep 8, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal interactive web page that uses CSS for styling and JavaScript for behavior, rendering the message “Hello HTML!” centered on the screen. The single `index.html` file defines a div with the class `message`, whose font size and text alignment are set via a CSS rule. No external libraries are used; the page relies solely on plain HTML, CSS, and JavaScript, serving as a bare-bones starter template for building more complex visualizations. The code does not include data fetching or chart rendering.

Aug 31, 2022