codingtywu

@codingtywu·3 public vizzes

Bar Charts

This interactive example visualizes the classic Iris dataset using bar charts rendered with D3.js v5. The code loads data from a CSV file, converts the sepal and petal measurements to numbers, and uses `d3.csv` and `d3.scaleLinear` to map values. It draws rectangular SVG elements for each data point with fixed width and height attributes, creating a grid of bars that represent the dataset's samples. The visualization demonstrates basic D3 data binding with `selectAll`, `data`, and `enter` selections.

Sep 19, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js version 7 setup by rendering a single, full-width SVG element. It colors the entire 960-by-500-pixel canvas blue by using `d3.select` to target the SVG element and the `svg.style` method to apply the background color. The code imports only the `select` function from the D3 module, and the visualization is a static, empty scene with no data or interactive elements. The HTML page loads D3 from a CDN and includes a separate JavaScript bundle, highlighting the basic structure of a D3 project.

Sep 19, 2022

Loading thumbnail…

1

This example demonstrates a force-directed network layout using D3.js v5, where nodes are connected by links and positioned through physical simulation. The visualization uses `d3.forceSimulation` with forces such as `d3.forceLink` and `d3.forceManyBody` to arrange the elements dynamically. The code renders a simple SVG-less container with a message div, though the actual drawing occurs in the linked `bundle.js` file. The visualization reads no explicit external data source, instead relying on data defined within the bundled script.

Sep 18, 2022