Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
117761A04F1
Last edited Feb 28, 2023
Created on Feb 28, 2023
Forked from HTML Starter

This visualization displays a simple scene of three trees on a grassy field beneath a sun, rendered as a static SVG. The page loads a forest coverage dataset from a GitHub gist using D3’s `d3.csv` method, then displays metadata about the file—including its size, row count, and column count—in a message container. The SVG image is embedded directly in the HTML, styled with CSS in `jm.css`. The example demonstrates basic D3 data loading and DOM manipulation within a plain HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays metadata for a CSV forest coverage dataset, showing its size in kilobytes, row count, and column count. It also presents a static SVG illustration of trees and a sun against a sky-blue background. The page loads D3 v7 and fetches the remote CSV file using `d3.csv`, then formats the dataset with `d3.csvFormat` to compute and display the statistics. The SVG is hand-coded within the HTML, not generated by D3.

117761A04F1
84% match
Loading thumbnail…

Untitled

This example loads a CSV file from a GitHub Gist using the `d3.csv` method and displays a summary of its contents, including file size, row count, and column count, in a styled message area on an HTML page. The page is built with React and renders a static SVG illustration featuring colored shapes. The visualization demonstrates simple data loading and text-based output without interactive charts or graphs.

Ttarungunda
79% match
Loading thumbnail…

Untitled

A static SVG displays an empty 960-by-500 viewport. The page loads D3 v5 and executes a bundle script, but the provided JavaScript only selects the SVG element and reads its height and width attributes, storing them as numeric variables. No data is processed, and no marks are drawn, resulting in a blank canvas as the final rendered output. The example demonstrates an initial D3 setup stage before any visualization logic is implemented.

Sshanmango
78% match
Loading thumbnail…

Untitled

A minimal SVG visualization from the v3 collection. It creates a blank 960 by 500 pixel SVG canvas using a static HTML page with inline styles. The example demonstrates basic DOM manipulation by appending an SVG element via JavaScript and then leaving it empty; the provided code does not load data or render any visual marks. It relies solely on native Web APIs—`document.createElement` and `document.body.append`—without any external libraries like D3.

Mmphoshabalala
78% match
Loading thumbnail…

Untitled

A hierarchical cluster dendrogram renders an SVG tree from JSON data using D3 v3's `d3.layout.cluster` and `d3.svg.diagonal` for curved link paths. Nodes appear as circles with labels, positioned via the cluster layout’s size settings and a translate transform. The code loads D3 from UNPKG, fetches `dendrogram01.json` asynchronously via `d3.json`, and appends the visualization to the page. A separate ES6 module shows an unrelated "Hello VizHub!" message, demonstrating local module imports alongside the D3 API.

MMartin Masevski
77% match
Loading thumbnail…

Untitled

A D3.js SVG visualization loads node data from a remote JSON file and renders it as a static scatterplot of circles. Nodes are positioned in a loosely grouped grid pattern, with each group assigned a horizontal offset and nodes within a group stacked vertically. The code determines group count and placement by parsing the `group` field of each node, then draws all circles with a fixed fill color and a radius based on the total number of groups. The example reads from a GitHub-hosted JSON dataset and uses only D3's basic selection and data-binding APIs, with no animation or interaction.

Pprasad2707
77% match
Loading thumbnail…

Untitled

This example demonstrates loading and parsing a CSV file from a GitHub Gist URL using D3 v5’s `d3.csv`, then displaying the file size, row count, and column count in an HTML page. The visualization itself is a static SVG containing three simple geometric shapes—two triangles and an ellipse—each filled with a distinct color, which serves as the visual output accompanying the data summary. The page uses a React-ready framework structure, with minimal embedded CSS for text styling and a centered layout.

SSrilekha24
77% match
Loading thumbnail…

Untitled

This example displays a skeleton of a data visualization using D3 within a React-compatible setup, though it relies on a plain HTML page. It loads a CSV dataset of country populations using `d3.csv` and logs the parsed data to the browser console. The page contains an SVG element and imports `select` and `csv` from D3, but the `select('svg')` call is unused, and no visual output is rendered. The code establishes the initial structure for fetching and inspecting tabular data, with no charts or graphical elements yet.

EEFisher828
76% match