Ronolibert

@Ronolibert·10 public vizzes

Flatten

This example demonstrates a JavaScript function that flattens a nested array structure into a single-level array. The code defines a `flat` function using `Array.reduce()`, which iterates through each element and checks if it is an array using `Array.isArray()`. If an element is an array, the function recursively calls itself on that sub-array and concatenates the result; otherwise, it directly concatenates the element. The visualization highlights the recursive reduction process, showing how nested data gets progressively consolidated until a completely flat result emerges.

Nov 17, 2017

Loading thumbnail…

pie

A donut chart displays the distribution of votes among four options, with each arc segment sized proportionally to its vote count. The visualization uses d3.js v4 to compute arc paths via `d3.pie` and render them as SVG paths with a white stroke, while text labels positioned along the outer radius identify each option. Data is hardcoded as a JavaScript array, and colors are assigned randomly using `d3.scaleOrdinal` with the `schemeCategory20` palette.

Jun 25, 2017

Loading thumbnail…

animate axis and data

Five student records with three test subjects each drive a bar chart that switches datasets on demand. Clicking a subject button filters the bars to show only that subject’s scores, while missing values remove bars entirely. The y-axis rescales to the new maximum and both the axis and bars animate with staggered `d3.transition` delays. The chart uses d3.scaleBand for x-positioning, d3.scaleLinear for y-values, and d3.axisLeft for the animated axis ticks.

Jun 25, 2017

Loading thumbnail…

marginConvention

This example demonstrates a basic SVG chart layout using the margin convention in D3. It shows how to structure a visualization by setting explicit margins, calculating the inner width and height, and translating a group element to establish the plotting area. The code uses d3.select and append to create an SVG, then draws a light blue rectangle with a green stroke to represent the chart region. The chart background is light gray, with the margin values set to top 0, right 0, bottom 20, and left 25. The full SVG dimensions are 425 by 625 pixels, rendered with D3 v4.

Jun 19, 2017

Loading thumbnail…

enterExitUpdate

This example demonstrates how the D3.js v4 `select` API and its associated enter, update, and exit methods manage dynamic data changes. A small bar chart, initially displaying three names (Billy, Cindy, Walter), is updated with a hard-coded array of five scores. The update selection re-colors existing elements red, the enter selection inserts new divs for Alice, David, and Emily in green, and the exit selection removes stale elements. Both update and enter selections are merged and styled to display each score as a proportional bar width. The code relies on `d3.select`, `.data()`, `.enter()`, `.exit()`, and `.merge()`.

Jun 18, 2017

Loading thumbnail…

simpleEnterExitUpdate

This example demonstrates how D3’s data join handles enter, update, and exit selections in a simple HTML div chart. It starts with three static divs (Billy, Cindy, Walter) and binds them to a new array of five score objects using a key function that matches by name. The existing divs turn red as the update selection, while Alice, David, and Emily are appended in green via `update.enter()`; the exit selection removes any unmatched elements. The code uses `d3.select`, `selectAll`, and `data` with a custom key function, and applies styles directly via `.style()` rather than SVG or canvas rendering.

Jun 18, 2017

Loading thumbnail…

Gist 51fecbcad3c5a744b1a96ad079f2c210

This example demonstrates the behavior of D3’s `scaleLinear` function, showing how a numeric input domain of [0, 1] maps to an output range of [0, 100]. It prints the scaled results for values 0.5, 0.75, 0, 1, and 2, revealing that the mapping is continuous and extends beyond the specified domain. The code imports the scale from `d3-scale` (via the `d3` namespace) and logs each conversion to the console, making the linear transformation’s direct proportionality clear.

Jun 16, 2017

Loading thumbnail…

fresh block

A simple bar chart displays the values for options A through E, with green bars and white strokes. The bars are drawn as SVG rectangles, sized so each value unit equals 30 pixels. The Y axis is generated using `d3.axisLeft` with a `d3.scaleLinear` scale. The data is a hardcoded JavaScript array, and the visualization uses D3 v4 to select the SVG element and append the rectangles and axis group.

Jun 16, 2017

Loading thumbnail…

fresh block

This example displays a simple bar chart of five categorical values labeled A through E, with bar heights corresponding to numeric values. Blue rectangles are drawn on an SVG canvas using D3 v4’s data join, with each bar’s x-position calculated sequentially based on a fixed width of 50 pixels. The vertical position and height derive from a constant chart height of 300 pixels minus each value, so taller bars extend upward from a shared baseline. The code uses `d3.select`, `selectAll`, `enter`, and `append` to bind the hard-coded array of objects and render the visualization.

Jun 14, 2017

Loading thumbnail…

Gist 75fe6f98cacb874f8d9ebce7248b1b66

This example presents a web-based client-server application that serves static files and handles socket connections. The server is built with Express and Socket.IO, listening on a configurable port, and delegates all routes to a single `index.html` file. It uses the `body-parser` middleware for JSON parsing and the `path` module to resolve file locations. The rendering approach is not specified, but the code clearly establishes the infrastructure for delivering a front-end visualization, with the server acting as the backbone for real-time communication and static asset delivery.

Dec 29, 2016