glitched-potato

@glitched-potato·7 public vizzes

Multi-mark nodes

This example demonstrates a force-directed network graph with multi-mark nodes, where each node is represented by both a circle and a text label. It shows how to construct and update a visualization using D3 version 3.5.5, loading edge data from a CSV file and filtering links by weight. The code uses `d3.layout.force` for simulation, appending SVG lines for edges and grouped `<g>` elements containing circle and text marks for nodes, with positions updated on each tick event.

Mar 5, 2021

Loading thumbnail…

Global Temperature

This visualization shows the change in global, Northern Hemisphere, and Southern Hemisphere temperatures from 1880 to 2014, with each time series as a separate line. A color legend identifies the three regions. Built with D3 v5, it loads CSV data and uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` with `curveBasis` generates the paths. The chart renders as SVG, with axes and line styling defined in CSS.

Mar 4, 2021

Loading thumbnail…

Creating face with D3

A D3 visualization renders annual temperature anomaly data from a CSV file as a series of rectangles. The code imports `select`, `csv`, `scaleLinear`, and `max` from D3, and uses an SVG container. The `scaleLinear` function defines an x-axis domain based on the maximum year in the dataset, though the scale's range is not set. The rectangles are appended to the SVG with fixed width and height of 300 pixels, without being positioned or bound to the data values.

Feb 28, 2021

Loading thumbnail…

Creating face with D3

This example demonstrates how to build a simple face visualization using D3. The SVG canvas is styled with a red background, and the D3 library is loaded via a CDN. The code uses d3.select to target the SVG element and apply the background styling, while a separate script imports the select function to set text content on the page. The visualization initially shows just the empty red background, with data and face-drawing logic not yet implemented.

Feb 20, 2021

Loading thumbnail…

Cars Report

This example displays the name of the first car in a dataset inside a plain HTML page. It imports an array of car objects from a separate `cars` module, selects the `#message-e` preformatted text element, and sets its content to that first record’s `Name` field. The page loads a bundled script and demonstrates a minimal D3 version 6 setup, though no interactive visualizations or chart rendering are shown.

Feb 18, 2021

Loading thumbnail…

Practice

This example demonstrates how to display a static message on a web page using D3 and ES6 modules. It loads D3 from UNPKG and imports local JavaScript modules, though the main visualization is a simple text element styled with CSS. The page renders a large centered message via a `#message` div, with data defined in a separate `cars.js` file that is not actually integrated into the display. The code relies on basic DOM manipulation and D3’s import system rather than any visual chart or interaction.

Feb 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” at a massive 13em font size, centered on a blank page. It demonstrates the minimal setup for a web page using plain HTML, embedded CSS for styling, and a JavaScript script tag that logs “Hello JavaScript!” to the browser’s developer console. The code relies on the native HTML, CSS, and JavaScript APIs without any external libraries, serving as a starting point for other projects.

Feb 18, 2021