d3.f

Fork of JavaScript Arrays with D3 - Javan

This example demonstrates core JavaScript array operations alongside D3’s `ascending` import, using a console-based workflow. It shows how `push`, `map`, and `reduce` manipulate arrays, including transforming a numeric range and converting an array of key-value objects into a single object. The code explicitly builds a custom `range` function and logs outputs to the console, while the included D3 dependency remains unused in visible logic. The visualization relies on plain JavaScript execution rather than DOM rendering, with no graphical output generated.

JJavan Friedel

underscore-d3

This example pairs Underscore.js collection methods with their D3 and vanilla JavaScript equivalents, showing how functions like `each`, `map`, `reduce`, and `sortBy` translate across libraries. It demonstrates D3’s `d3.values`, `d3.entries`, `d3.map`, and `d3.nest` as alternatives for object iteration and grouping, while also highlighting pitfalls like lexicographic sorting and nondeterministic comparators. The code samples use small inline arrays and objects, such as `[1, 2, 3]` and `{one: 1, two: 2, three: 3}`, to illustrate each transformation clearly.

11wheel

JS Fundamentals

This example demonstrates core JavaScript array operations implemented by hand, including range generation, filtering, sorting, mapping, and reducing. The code uses D3 v7’s `ascending` comparator within a custom `sort` function to order objects by key, then reduces an array of key-value pairs into a single object. All logic runs in the browser console, producing logged output for each step; the page itself is intentionally blank, with SVG shapes referenced only in the README. The visualization relies purely on native JavaScript methods and D3’s utility functions, with no graphical rendering.

Yyankesswang

javascript arrays

This example demonstrates core JavaScript array manipulation techniques using D3 v6’s ascending helper for sorting. The code defines a custom range function to generate numeric arrays, then explores iteration with forEach and for loops, filtering, sorting with custom comparators, mapping to transformed values, and reducing to cumulative sums. It also sorts an array of objects by a key property using d3.ascending, and includes commented examples of reduce-based object conversion. No visualization is rendered; the example focuses purely on console-based array operations.

Kktshim@snu.ac.kr

D3 Selection Exploration

This example demonstrates JavaScript array manipulation and data transformations using D3 v6. The code creates ranges, generates random numbers, and maps array elements to objects with computed properties like squares and triples. It visualizes sorting operations with `array.sort` and the `ascending` comparator from d3, alongside a `reduce` function that accumulates successive sums. The example also exercises nested random number generation and logs results to the console, illustrating how D3 utilities can combine with native JavaScript methods for data exploration.

Kkhaledakanan@gmail.com

Useful d3 v4 and js data snipets

This example demonstrates a collection of reusable D3 v4 and JavaScript snippets for data visualization, covering responsive SVG scaling, color scales, and shape generators. It includes a `responsivefy` function that adjusts SVG dimensions to its container, and showcases ordinal and sequential color scales, line and Voronoi generators with specific curve settings. The code also illustrates data transformation techniques using `forEach`, Underscore.js methods, and a queue for loading distant JSON data. Additionally, it provides a map implementation using `d3.geoMercator`, `d3.geoPath`, and a zoom interaction, with an SVG-based legend. The rendering is SVG-based.

SSav10

Fork of js arrays

This example demonstrates a range of JavaScript array operations, including mapping, reducing, sorting, and transforming data with the D3.js library (version 6.6.2). The code creates numeric ranges, generates random values, and applies calculations like squaring and doubling to each element, logging the results to the console. It also shows how to sort an array of objects by key using d3.ascending, and uses reduce to accumulate a Fibonacci-style sequence while printing each addition step. The visualization relies entirely on console output, with no graphical rendering.

Kkhaledakanan@gmail.com

d3.js functions most frequently used in blocks

This example visualizes the most frequently used d3.js functions in bl.ocks, drawing on a CSV dataset of function usage fetched from a GitHub gist. The page loads d3 v3.5.6 and the itemExplorer_10 library, which powers an interactive chart appended to the body via d3.select. It demonstrates a simple setup where the chart is initialized with a remote data source and then rendered into a div, showcasing a reusable chart component pattern.

EEE2dev