ries62

@ries62·8 public vizzes

Fetch

This example visualizes the output of a JavaScript `fetch` call to a remote CSV file containing CSS named colors. The page displays a static, oversized text message instead of rendering the data graphically. The code uses the browser’s native `fetch` API to request the file, then chains `response.text()` and `console.log` to print the raw CSV contents to the console. Styling relies on basic CSS, with no additional charting libraries or interactive components present in the markup.

Jan 13, 2022

Loading thumbnail…

Bar Chart

This example displays a bar chart of the top ten goal scorers for the Netherlands national football team, with player names on the y-axis and goal counts on the x-axis. The visualization uses D3 v5 to parse a CSV string with `csvParse`, transform the data, and render gold bars against a dark slate background. The chart includes styled axes, tick labels, and a title, all formatted via external CSS. The data originates from a hardcoded CSV in the source files, and the SVG rendering is handled entirely by D3’s standard plotting functions.

Sep 12, 2021

Loading thumbnail…

Ketenplaat

This example visualizes a network of server nodes and their connections, with icons and labels identifying each node type and links styled as curved paths. The layout uses absolute positioning for nodes rather than a force simulation. The visualization is rendered as SVG with D3 v6, using `d3.linkVertical` to draw the edges and Font Awesome icons for node symbols. An interactive tooltip appears on hover, and the animation showcases the network’s structure and communication flows.

Sep 5, 2021

Loading thumbnail…

Ketenplaat

This example shows a small scatterplot of ages and lengths, plotting four data points on a dark slate background. The visualization uses a linear x-scale for the length axis and a linear y-scale for ages, with square gold rectangles marking each point and axis titles labeling the dimensions. Rendered as SVG, the code uses D3 v6 methods such as `select` and `append` to build the chart, along with `scaleLinear` and `axisBottom`/`axisLeft` to generate the scales and ticks. The static dataset is defined in the script, and the page fills the entire browser viewport.

Sep 4, 2021

Loading thumbnail…

Picture

Three labeled nodes (OLO, BRE, BSB) form a small force-directed network, with two links connecting the central node to the others. Circles represent nodes, sized by a `size` property, alongside text labels, all rendered as SVG elements on a dark gray background. The layout comes from `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`. Node positions update each tick, moving circles and text while lines track link endpoints. The example uses data imported from a separate `data.js` module and relies on D3 version 6.

Aug 30, 2021

Loading thumbnail…

D3 Starter

This example demonstrates a bar chart visualization showing programming language popularity and Oscar nomination data, using SVG rendering with D3.js v6. The visualization employs `scaleBand` and `scaleLinear` for the axes, with `axisLeft` and `axisBottom` to display the scales. It loads data from CSV files using `d3.csv` and XML files via `d3.xml`, though the chart primarily relies on the CSV data. The full-screen SVG canvas fills the viewport with a dark background, and the code initializes margins and dimensions for the chart layout.

Aug 30, 2021

Loading thumbnail…

Charts

This example presents a horizontal bar chart comparing the populations of the top 10 countries in 1962, using data from the UN Population dataset. The visualization is built with React and D3 v7, rendering SVG elements through a declarative component structure. It employs `d3.csv` to fetch and parse the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the categorical y-axis. The code also generates grid lines and axis labels using D3's scale methods, with styling applied via CSS.

Aug 25, 2021

Loading thumbnail…

D3 Starter

This visualization displays the top Dutch football (soccer) scorers, comparing the number of matches played versus goals scored for each player. The chart renders as an SVG with a dark slate background, gold rectangles for bars, and old lace-colored text and axes. It is built using React with D3 v6 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the axes. Data is loaded asynchronously from a CSV file named `topscoorders.csv` using D3's `csv` method, and the visualization updates accordingly.

Aug 25, 2021