camelCase attributes

100%

camelCase attributes

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on Aug 12, 2016

This example demonstrates how d3-jetpack’s `st` method simplifies setting multiple style attributes using camelCase keys, which are automatically converted to hyphenated CSS properties. It shows a single line of code replacing several verbose `style` calls, making the syntax cleaner and more readable. The page renders the text “Centered Words” in the middle of the viewport, using d3.select and the jetpack `st` method to apply margins, text alignment, and font family. The visualization highlights the convenience of concise, unquoted attribute names.

AI-generated description

at and st in jetpack work like v3's attr and style. Passing an object sets multiple attributes, passing a string returns a single attribute and passing a string & second argument sets a single attribute.

To avoid having to use quotes around attributes and styles with hyphens when using the object notation, camelCase keys are hyphenated. Instead of:

selection
    .style('margin-top', '250px')
    .style('text-align', 'center')
    .style('font-weight', 600)

or with d3-selection-multi:

selection.styles({'margin-top': '250px', 'text-align': 'center', 'font-weight': 600})

you can write:

selection.st({fontSize: '250px', textAlign: 'center', fontWeight: 600})

With syntax highlighting on, it is a little easier to see the difference between keys and values when everything isn't a string. Plus there's less typing!

Similar vizzes

Loading thumbnail…

html stater

This example demonstrates a minimal D3 version 7 starter page that renders the text “Hello D3 version 7” in the center of the viewport using the `select` API from the D3 library. The page loads D3 from a CDN and relies on a large CSS font size, set to 13em, to visually focus the output. The entire application is defined in a single `index.html` file with an embedded JavaScript call that updates the body element’s text content.

UUzoemeka Okechukwu Innocent

64% match

Loading thumbnail…

selection-multi and transition rollup

This example demonstrates a D3.js animation that highlights the interplay between chained `.styles()` and `.transition()` methods on selected elements. Two `<h1>` headings are styled and animated in sequence: the first applies a red centered style, then transitions its color to steelblue over one second; the second starts invisible and fades in over another second after a delay. The visualization—essentially a minimal proof-of-concept—uses a custom bundling of d3-selection-multi and d3-transition to show how multi-property style and transition methods can be combined, with a note on the required prototype patching for transition chaining. The page renders text-only, with no charts or data, and relies on animation to demonstrate the effects.

11wheel

63% match

Loading thumbnail…

Reusable d3 with jetpack & starterkit

This example demonstrates how to streamline D3.js code using the d3-jetpack and d3-starterkit libraries. It shows a scatter plot of Iris flower data, with sepal width and length mapped to the x and y axes. The visualization reduces repetitive JavaScript by introducing helper functions like `ƒ` for field access and composition, and a `dataAppend` method for creating and appending elements. The code also simplifies common SVG operations, such as appending elements with class names like `append("g.legend")` and using `.translate([0, height])` for positioning.

11wheel

63% match

Loading thumbnail…

Spans Example

This example demonstrates a simple data binding and DOM manipulation with D3.js, displaying three name-value pairs as styled text spans. Each entry renders a bold name span, a colon separator, and an italic value span, populated from a hardcoded array of objects. The code uses `d3.select`, `selectAll`, `data`, and `enter().append()` to create the HTML `div` elements and their child `span` elements, while `attr` and `text` methods apply CSS classes and content. The visualization highlights D3’s declarative approach to generating structured text layouts without any interactive or animated features.

CCurran Kelleher

63% match

Loading thumbnail…

d3-starterkit

d3-starterkit is a collection of snippets and conventions for kickstarting d3 projects, centered on `d3.conventions()`, which automates the setup of SVG margins, scales, and axes. It introduces `selection.dataAppend` to streamline data binding, `d3.attachTooltip` for lightweight interactive tooltips, and a modified `append` that parses CSS-like class and ID shorthand. Built on d3 v3, it also includes d3-jetpack enhancements like `translate`, `tspans`, and sorting helpers, plus utilities for word wrapping and template-based tooltips. The example demonstrates how these conventions reduce boilerplate when scaffolding a new visualization.

11wheel

63% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

63% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

62% match

Loading thumbnail…

Multi-Value Maps

This example demonstrates D3’s multi-value map syntax, which lets developers set multiple attributes or styles in a single call using an object literal. The visualization shows a scattered arrangement of ten semi-transparent circles placed at random positions and sizes on an SVG canvas, alongside a centered text label. The code uses `selection.attr` and `selection.style` with map arguments, and defines attribute values as constants or functions of data. It relies on d3.v3 and renders entirely through SVG elements.

Mmbostock

62% match