Jordi

@jordipuig37·5 public vizzes

Fork of D3 Starter

This example demonstrates a minimal setup for D3 version 7, displaying the text “Hello D3 version 7” in the center of the page using `d3.select` and the `.text` method. The code also imports `d3-dag` and calls `d3.graphStratify()` to create a stratification function, with commented-out examples showing how to construct and iterate over a DAG’s nodes and links. The HTML file loads D3 from a CDN and uses inline CSS to set the body’s text alignment and font size.

Sep 28, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft` and `axisBottom` for axes. The SVG circles are rendered via `selectAll` and `join`, with a fixed radius. The plot fills the browser window, using `window.innerWidth` and `window.innerHeight` to size the chart, and includes tick labels with 24px font styling.

Sep 24, 2023

Loading thumbnail…

Network

This network diagram visualizes friendship relationships among eight people, with red circular nodes and labeled connections showing who is linked to whom. The layout uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes dynamically. Users can drag nodes to rearrange the network, with hover effects highlighting nodes. Data comes from a JSON file containing nodes and link objects, rendered as SVG elements with arrow markers on edges.

Sep 24, 2023

Loading thumbnail…

Intermediate Barchart with D3

This example shows a static bar chart with six categories plotted against a linear y-axis, demonstrating a manual approach to building a chart with D3.js version 7. The visualization uses SVG rendering, with bar heights and positions calculated explicitly through band multipliers and offsets rather than relying on a convenience bar-mark API. The code imports specific modules (`d3-scale` for `scaleLinear` and `scaleBand`, and `d3-axis` for `axisBottom` and `axisLeft`) to construct the axes, and it includes custom text elements for axis labels. The bars represent simple numeric values from an inline data array.

Sep 23, 2023

Loading thumbnail…

Simple Barchart with D3

A simple SVG barchart displays six categorical values with rectangular bars, rendered using D3 v7. The visualization positions bars along an x-axis with a band scale and maps value magnitudes to bar heights using a linear scale. It includes labeled axes generated with d3-axis, and the chart is built by appending SVG elements to the document body. The code imports specific modules like `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, and uses a fixed dataset of six objects with category and value properties.

Sep 23, 2023