One unfilled rectangle

100%

One unfilled rectangle

✓ Published0🌍 Public

Last edited Jun 28, 2018

Created on Jun 28, 2018

This example demonstrates how D3.js can manipulate existing DOM elements and their properties. It starts with a simple HTML div containing a checkbox, then uses D3 selections to change the div’s border style to a dark gray dashed pattern and reassigns its ID attribute. The checkbox’s checked property is also set to true via D3’s property method. The visualization highlights D3’s ability to integrate with static HTML and dynamically update both CSS styles and element attributes, using the d3.v4 library directly in the browser without any external data sources or complex rendering.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

block 2.6

Four empty divs labeled A through D are selected and styled using D3.js v3, with each element’s width increasing linearly based on its index (10 to 40 pixels) and alternating background colors (lightblue for even indices, lightgray for odd). The example demonstrates how `d3.selectAll` and the `.style` method apply multiple CSS properties via a function that receives the data index. The code uses `d3.v3` from a CDN, with no external data source—only static HTML elements. This block illustrates basic data-driven styling without binding data arrays.

IIgathi

71% match

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

PPhilip Rago

70% match

Loading thumbnail…

Untitled

This example demonstrates a minimal web page using D3.js to selectively update the text and styling of two HTML div elements. The code imports the `select` function from D3, then applies the text, background-color, width, height, and display properties to each element. It shows how D3’s selection API can manipulate DOM nodes with direct method calls, using only a simple HTML structure and the D3 library.

Ssubratanp

69% match

Loading thumbnail…

D3.js Graph with Checkbox (Dynamic)

This example shows a dynamic multi-line chart where each line corresponds to a data column, toggled on and off via checkboxes. Using D3.js v6, it renders SVG paths for three series (`rt1`, `rt2`, `rt3`) against a linear mass scale, with a color scale based on `d3.schemeCategory10`. The checkboxes are generated from the data keys, and the `on("change")` handler updates line visibility by toggling the `display` attribute. The data is hardcoded in the script.

Ffofana1984

69% match

Loading thumbnail…

Manipulating DOM

This example demonstrates how D3.js can dynamically manipulate HTML elements in the DOM. Using d3.select, the code changes text colors, background colors, and list attributes when the "Change!" button is clicked, and resets them with the "Reset!" button. The page includes a heading, paragraphs, and ordered/unordered lists styled via CSS, showing D3's ability to modify existing web content beyond SVG visualization.

SSreenivasulu

69% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections can target specific elements in the DOM using element type, ID, and class selectors. The page contains two visible divs with different identifiers, and commented code shows updated text for various selection strategies, such as `d3.selectAll('div.selectMe')`. It also illustrates appending new elements, where `d3.select('body').append('div')` adds a child to the document body. Built with d3.v3, the example relies solely on D3’s core selection and manipulation APIs, with no external data or rendering pipeline.

LLelandCurtis

68% match

Loading thumbnail…

svg & d3 - example

This example demonstrates a simple bar chart built with D3.js v4, using an SVG-based rendering approach. It displays a small dataset of four numeric values as horizontal bars, with a separate checklist interface above the chart that lists the same data points as labeled checkboxes. The visualization pairs categorical data with an interactive checklist, though the chart itself is static and does not respond to checkbox state. The code uses D3 selections and data binding (`d3.select`, `selectAll`, `data`, `enter`, `append`) to create both the label inputs and the bar elements, while CSS styles define the bar colors and text alignment. The chart is rendered as a series of `div` elements within a container, with widths proportional to the data values.

BBharath4259

68% match

Loading thumbnail…

Blank Canvas

This example shows a blank, rounded rectangle filling the browser window as a simple canvas. It demonstrates fundamental DOM manipulation and SVG creation using D3.js v5. The code calculates the width and height from the document body, sets the SVG element's size accordingly, and appends a rectangle with a defined corner radius. Using the `select` function and chained `attr` and `append` methods, it illustrates how to build and style SVG shapes entirely through D3’s programmatic interface.

MMajaha21

68% match