Fork of D3 base module starter

100%

Fork of D3 base module starter

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

This example renders a minimal modular D3 chart using a pre-defined dataset of five axis-value pairs. The code initializes a linear scale with `d3.scaleLinear` and appends a radar chart group to an SVG, though the visualization itself is incomplete. A separate `module.js` file exports a reusable D3 module that appends a text element, with a setter method `my.val1` to control the displayed value. The HTML page loads D3 v7 from unpkg and uses a bundled `bundle.js` file to run the JavaScript.

AI-generated description

Modular baseline using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v7 bar chart, displaying a static dataset of five values as vertical rectangles. The visualization shows how to bind data to SVG elements and map data values to visual properties. The chart is rendered in an SVG container using D3's selection, data-join, and attribute methods, including `selectAll`, `data`, `enter`, `append`, and `attr`. The code also sets the page text to "Hello D3 version 7" via the `select` function, while the chart dimensions and padding are defined as constants.

RRidaHwn

80% match

Loading thumbnail…

D3 base module starter

This example demonstrates a minimal modular setup for D3 v7, rendering a static text message to an SVG canvas that fills the browser viewport. The code uses `d3.select` to append an SVG element sized to `window.innerWidth` and `window.innerHeight`, then applies a custom reusable module via `svg.call(mod)`. The module, defined in a separate file, exposes a `val1` setter and appends a text element with the provided string. It illustrates a clean, component-based pattern for organizing D3 code without any data binding or interaction.

AAlpineStranger

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3.js v7 setup with an SVG canvas, showing two outlined columns: a left column with a static blue circle and text label, and a right column that maps an array of seven numeric values to green circles of varying radii. It uses `d3.select` and the standard append/attr chain to construct the SVG structure, then applies `d3.scaleLinear` to map data domain [100,700] to a range of [1,10] for circle sizing. The right column’s circles are positioned linearly by index, while a text element is transformed and anchored. The code runs in a simple HTML file with D3 loaded via unpkg.

PPedram

79% match

Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter demonstrates a minimal D3 version 7 setup, rendering a static grid of colored rectangles in an SVG canvas. The visualization shows a simple categorical heatmap-like pattern with varied blue, green, and yellow hues. The code imports the `select` function from D3 and uses it to update the page body text, while the SVG layout is hand-coded in HTML. No data loading or interactive behavior is included, focusing solely on the basic wiring of a D3 project.

Dd-schwabe

78% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the basic setup for a D3 visualization using version 7, with the body text styled at an extremely large font size. The page loads D3 from a CDN and includes a separate bundle.js script, showing the standard pattern of separating library imports from custom code. The visualization itself appears as a blank canvas with the word "Fork" rendered at 13em, serving as a template for users to build upon. The code relies on D3's core library, loaded via the unpkg CDN, with no additional data sources or specific D3 APIs invoked in the visible markup.

MMohamedMOsman

78% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal setup for a D3.js visualization project, rendering a blank canvas in the browser. It loads the D3 v7.6.1 library via a CDN and executes a single JavaScript file, `bundle.js`, which imports the `select` function from D3. The code logs the imported function to the console, showcasing the integration of D3’s modular API within a simple HTML structure. The visualization itself displays no data or graphical output, serving purely as a template for starting new projects with D3.

CCurran Kelleher

78% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter template, rendering a single empty SVG rectangle on an 800x400 canvas. The visualization shows how to set up a basic D3 project with an HTML5 document structure and inline SVG. The code loads D3 version 7.0.4 from the unpkg CDN and uses JavaScript to define a simple graphic element, providing a foundation for building more complex data visualizations with the D3 framework.

Aanoptic

78% match

Loading thumbnail…

Fork of D3 Starter

A starter template for D3 version 7, this example demonstrates the basic pattern of importing D3 modules and manipulating the DOM. The page displays the text "Hello D3 version 7" in a large font, using `select` from the d3 package. The code also logs a demonstration array and references remote data sources, including a GeoJSON file of local authority boundaries and a CSV about the Titanic, though these are not rendered visually. The HTML includes the D3 library via a CDN and a separate bundled JavaScript file.

Fferneyhoughedward@gmail.com

77% match