Martin MIAO

@novamartin·4 public vizzes

D3-coding-challenge#1: Read and Display JSON Data

This example demonstrates how to read and display JSON data using D3.js v7. It loads an array of car objects containing year, make, model, and price fields, then renders two lists: one showing only the car make and another displaying full descriptive sentences for each car generated by the `print_info` helper function. The code imports the data from a separate JavaScript module, formats it using `JSON.stringify`, and binds it to DOM list items through D3’s `selectAll().data().enter().append()` pattern, with styles defined in an external CSS file.

Mar 21, 2022

Loading thumbnail…

D3-coding-challenge#4:Render in multiple canvas

Two D3 canvases render distinct visuals side by side: one draws a Daruma face with circles and arcs for eyes, nose, and blush, while the other displays a bar chart from hardcoded sample data. Built with d3.select, d3.scaleLinear, d3.arc, and d3.transition, both SVG canvases animate background color changes over time. The bar chart uses d3.axisBottom for its x-axis and ordinal color scaling for bars.

Feb 20, 2022

Loading thumbnail…

D3-coding-challenge#2:SVG-Rectangle Matrix

This example displays a 5x5 SVG rectangle matrix built from car data, with a header listing cars priced under $2000 and a list of car makes rendered as list items. The visualization uses D3 v5 selections to append colored rectangles to the SVG canvas, populating the diagonal in blue, the lower triangle in green, and the upper triangle in yellow, while adding boundary and diagonal lines. The code imports car data from a local module and uses `select`, `selectAll`, `data`, `enter`, and `append` from D3 to construct the matrix.

Feb 19, 2022

Loading thumbnail…

D3-coding-challenge#1:Read cars JSON data and Display in a list

This example reads a JSON array of four cars—each with a year, make, model, and price—and renders the data as two separate HTML lists using D3 v5’s `select`, `selectAll`, `data`, `enter`, and `append` methods. The first list shows only the car makes, while the second displays a descriptive sentence for each car via the `print_info` helper. The page also uses an ES6 module (`constants.js`) to define a title, subtitle, and developer name, which are injected into header elements. All rendering targets SVG and HTML elements, with styling provided by an external Ubuntu font stylesheet.

Feb 19, 2022