D3_CookBook(v5)_Ch2 pt2

100%

D3_CookBook(v5)_Ch2 pt2

✓ Published1🌍 Public

Last edited Jun 30, 2021

Created on Jun 30, 2021

Three HTML tables display financial transactions, with each table's rows styled differently through D3 selections. The example demonstrates raw DOM selection and manipulation using d3.select and .selectAll("tr") to target table rows, then applying CSS classes like "table-header" and "table-row-odd" based on row index. It shows how to filter row elements via a selection's .select(function(d, i) { ... }) callback, checking an element's position before assigning class attributes. The code adapts older D3 v3 patterns to D3 v5, highlighting changes in how raw selections and element references are handled.

AI-generated description

D3 Cook Book getting used to JS in d3 CH2 Problem in converting from v3 to v5 and looks like book has poor practice of d3.js (https://stackoverflow.com/questions/45181773/d3-js-raw-selection-get-error-uncaught-typeerror-cannot-read-property-0-of-u)

MIT Licensed

Similar vizzes

Loading thumbnail…

D3_CookBook_Ch 1 & 2

This example demonstrates introductory D3.js and JavaScript concepts from the D3 Cook Book, showing how to create reusable widget functions and manipulate DOM elements. It uses d3.select and d3.selectAll to target paragraphs and divisions, applying CSS classes to render colored boxes with red and blue backgrounds. The code also illustrates functional JavaScript patterns through a SimpleWidget constructor that chains methods like _headline and _description to build custom components. Data binding is shown through d3's .each method to append text elements within selected paragraphs.

JJimMaltby

76% match

Loading thumbnail…

d3 tutorial

A tutorial demonstrates basic D3.js selection and DOM manipulation using a static HTML page with car listings and paragraphs. The code uses `d3.select` and `d3.selectAll` to change text colors—turning headings blue, list items magenta, and paragraphs green—and to style nested table cells with cyan backgrounds. Data binding via `.data()` maps an array of numbers to blank `h2` elements, while class-based selectors color warning and error messages. All styling is applied through D3's `.style()` and `.text()` methods on the live DOM.

Bbmurill2019

71% match

Loading thumbnail…

table

This example demonstrates how to populate an HTML table by binding sample data objects to table rows and cells using D3 version 7. The code selects the table body and iterates through an array of data objects, appending a row for each entry and filling six columns with values from the object’s properties. It relies on D3’s selection and data-binding methods (`d3.select`, `selectAll`, `.data`, `.enter`, `.append`, and `.text`) to dynamically generate the table structure. The page also uses a simple CSS style to center the content with a large font size.

Fferneyhoughedward@gmail.com

70% match

Loading thumbnail…

MasteringD3js_Ch2 pt1

This example demonstrates four fundamental techniques for creating DOM elements with D3.js v5, adapted from a v3-era cookbook. It shows method chaining to append divs and paragraphs, the `selection.call` function to encapsulate creation logic, a custom initializer function passed to `.call()`, and finally, dynamic SVG element creation with bound data. The code uses `d3.select` (a corrected form of `d3.select`) and the enter/append pattern to build a simple bar-like structure of labeled boxes.

JJimMaltby

70% match

Loading thumbnail…

d3v4 - Selective Table

This example presents an interactive table for exploring job-category data across several months, with the data loaded from a TSV file using `d3.queue` and `d3.tsv`. It shows how users can selectively highlight rows and columns by clicking items in two separate lists (jobs and dates), which toggle a `__checked` class and reorder the table’s headers based on click order using `d3.selectAll` and `classed`. The table is rendered with plain HTML elements, and a `__selected` class marks the most recently clicked header.

HHirosaji

69% match

Loading thumbnail…

Data

This example renders the same dataset of monthly closing values as three distinct HTML tables using D3’s data join methods. The code builds tables by appending `thead` and `tbody` elements, then binds the array of date-and-close objects to rows and cells. It demonstrates creating a two-column table, a date-only table, and a close-only table, all styled with bright orange and blue cells via CSS. The script uses `d3.select`, `selectAll`, `data`, and `enter` to generate the tabular structures.

Jjsrussell11

69% match

Loading thumbnail…

d3NoobV5 Reusable Examples - Add an HTML table to your graph v3

A reusable line chart shows stock closing prices over time, with an HTML table appended below the SVG rendering. The chart uses D3 v5 scales, axes, and a line generator to map dates to values from a CSV dataset. A table-XX class selector, though misspelled, defines table styling, while the d3.reusable pattern structures the modular chart. The example demonstrates combining SVG data visualization with HTML table output within a single reusable component, following the ProD3 pattern.

JJimMaltby

68% match

Loading thumbnail…

d3js workshop - data binding

This example demonstrates how D3 selections target and manipulate specific DOM elements, showing the difference between selecting all matching elements versus a filtered subset. It highlights how chained selection methods like `selectAll` and `select` work, along with class and ID selectors, to update text content or append new nodes. The code uses the D3 v3 library, loading it from a CDN, and applies methods such as `select`, `selectAll`, `text`, and `append` to bind data-driven changes to a simple HTML structure containing two divs. No external data source is used; the example relies on static HTML content within the page.

AAlbertFranco

68% match