100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 17, 2021

Created on Apr 16, 2021

This example demonstrates a dynamic bar-style visualization where clicking a button generates a new array of 20 random numbers and renders them as a set of div elements whose widths are proportional to their values. Using the D3.js v6 library, the code employs `d3.select` and `selectAll` to manage the div elements, with an accessor function for styling. The rendering process separates new, existing, and removed elements through `div_selector.enter()`, `div_selector.exit()`, and an update function that assigns text, fixed height, dynamic width, and light grey background color.

AI-generated description

Changing styles using accessor function

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple bar chart built with D3 version 6. The visualization starts with a blank page and generates a series of vertical midnight blue bars whose heights are determined by random values multiplied by a fixed scale. The code uses `d3.range` to generate a data set from 5 to 29, then applies the `d3.select('body')` and `.selectAll('div')` API to dynamically append bar elements to the HTML document. Each bar's height is set via the `.style('height', ...)` method, with inline styling producing varied bar lengths. The example serves as a minimal starter template for understanding D3's declarative approach to building DOM-based visualizations from scratch.

DDasbach.EJ

86% match

Loading thumbnail…

Fork of D3 Starter

A dynamic bar chart animates ten rectangles across the screen using D3 v7. The bars scale in height and width based on their index, with positions computed from the data values. The code selects the body, appends an SVG sized to the window, and uses `d3.range` to generate the dataset. Each rectangle’s position and size are set with attribute functions, creating a diagonal, staggered layout with light-blue fills.

Fferneyhoughedward@gmail.com

84% match

Loading thumbnail…

Fork of D3 Starter

This example displays a simple bar chart constructed from a fixed JavaScript array of 25 numeric values. It demonstrates a minimal setup for D3 version 7 by using the d3.select and d3.append functions to create an SVG canvas, then the selectAll and data methods to generate rectangles for each data point. The bars are positioned horizontally with a fixed spacing and height proportional to each value, showing basic data binding and SVG rendering without any interaction or animation.

KKoundinya

84% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that creates a vertical series of 100 rectangular bars across the full width of the viewport. The visualization uses D3’s selection and data-join API (`select`, `selectAll`, and `join`) to generate SVG rectangles positioned by their `y` attribute, with each bar spaced 20 pixels apart. The code initializes an empty SVG element within the page body and relies on D3 version 7.8.2, loaded via CDN, to construct the graphic without any external data source.

DDea Bardhoshi

82% match

Loading thumbnail…

Fork of D3 Starter

This example renders 50 static blue squares in a vertical layout using D3.js version 7. The code iterates fifty times without incrementing a counter, creating a loop that appends a single `div` with the class `item` to the body. The `d3.select` and `.append` methods place the element, while CSS styles define its dimensions and color. The visualization demonstrates basic DOM manipulation with D3’s selection API.

YYiorgos Bagakis

80% match

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…

Fork of D3 Starter

A minimal demonstration of D3 v7 data binding and DOM manipulation. The page renders three paragraph elements, each displaying the numbers 1, 2, and 3 from a small array, with custom font sizing applied via `d3.select` and the `data()`, `enter()`, and `append()` APIs. The example uses the `d3.min.js` library from unpkg and a separate `bundle.js` script, with styling defined in the HTML head. It serves as a basic starting point for building interactive visualizations with D3's selection and join methods.

RRodrigo Castellon

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive bar chart using D3.js v6. The page displays four vertical bars with heights corresponding to the numbers in the `numbers` array. Users can click on any bar to remove it from the chart, triggering a D3 data join via `selectAll`, `enter`, and `exit` to update the visualization. The bars are styled with CSS classes and positioned using D3's `style` method to set height and margin-top attributes.

Mmoezif-dev

79% match