Skip to main content
Log in
C

ChrisChrisLoLo

@ChrisChrisLoLo·7 public vizzes

Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This example visualizes conference registration data, showing the school affiliation and year of study for each order. It uses a simple SVG scatterplot, with one circle per order positioned by its area code. The visualization is built with D3 v4, using `d3.select` to target the SVG and a data array bound to circles. The code demonstrates basic data binding and SVG element creation without scales or axes, serving as a workshop exercise for rendering tabular data.

Mar 24, 2018
Loading thumbnail…

D3 Workshop: Part 3 - Conference Data

This example visualizes conference registration data, showing the school affiliation and year of study for each order. It uses a simple SVG scatterplot, with one circle per order positioned by its area code. The visualization is built with D3 v4, using `d3.select` to target the SVG and a data array bound to circles. The code demonstrates basic data binding and SVG element creation without scales or axes, serving as a workshop exercise for rendering tabular data.

Mar 24, 2018
Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

An interactive D3.js v4 workshop demonstrates SVG shape manipulation and data-driven transitions. A button triggers D3 code that animates rectangles, changing their positions and colors based on a small inline array of color objects. The visualization uses raw SVG elements—a blue rect, pink-stroked circle, and yellow square—alongside D3-generated rectangles that employ `transition()` with a 1000-millisecond duration to animate `x` and `y` attributes and fill colors. The code also exercises selection, appending, and entering data rectangles through `svg.selectAll()` and `.enter()`.

Mar 24, 2018
Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example is a hands-on coding exercise built with D3.js v4 that teaches SVG manipulation and animated transitions. The page displays a static SVG canvas containing a blue rectangle, a red circle, and a yellow square, alongside a button that triggers a JavaScript function to run D3 code. The function programmatically appends a new green rectangle, animates its position using `transition().duration()`, and begins mapping an array of color data to new rectangle elements via `append()` and `attr()`. The code demonstrates core D3 concepts like selecting, appending, and transitioning SVG shapes, with an accompanying exercise checklist for learners to complete.

Mar 24, 2018
Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive D3.js v4 tutorial demonstrates SVG shape manipulation and transition techniques. Users click a button to run JavaScript that appends rectangles to an SVG canvas and randomly repositions them, illustrating dynamic attribute updates. The example includes a static composition of blue, red, and yellow shapes, followed by a scripted exercise checklist covering creating, deleting, and animating SVG elements. It uses d3.select, .append, .attr, and random positioning to transition rectangle colors and locations within a 400x300 pixel viewport. The educational interface guides learners through progressively complex d3 operations for building data-driven graphics.

Mar 24, 2018
Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates how to bind data to HTML elements using D3 v4. It features a sandbox with four paragraphs that, upon clicking a button, change their text and font size. The code then uses D3’s `selectAll`, `data`, and `enter` methods to append two new paragraphs from a simple array, with commented examples showing how to attach click handlers to modify text dynamically. The exercise section lists interactive checkboxes that can be toggled via D3’s property method.

Mar 24, 2018
Loading thumbnail…

FLSUN configuration

This example displays the configuration settings for an FLSUN Kossel LCS 3D printer, sourced from an open-source Marlin firmware `Configuration.h` file. It visualizes the machine’s foundational parameters, including the selected motherboard, serial port and baud rate, firmware version, and custom machine name, as well as enabled boot display features. The rendering approach is not specified in the code, but the data originates directly from the configuration structure and would typically be laid out using a text-based or diagrammatic method, such as a tree or table, to show these hardware and communication settings at a glance.

Sep 11, 2017