Daniel Lauzon

@daneroo·3 public vizzes

Vega-Lite API Example

This example demonstrates a line chart visualizing numerical values over time, with data sourced from an Auto MPG dataset and individual time-stamped observations. The visualization is constructed programmatically using the `vega-lite-api`, which provides a fluent JavaScript interface for defining Vega-Lite specifications. After fetching data using the `json` function from `d3`, the chart is rendered as an SVG through the `vega` and `vega-lite` libraries, with a custom tooltip handler integrated for interactive exploration. The chart is configured to fit the window size, and styling is adjusted for readability.

Mar 12, 2021

Loading thumbnail…

Smiley with D3 (III)

A yellow smiley face rendered as SVG combines React 17 with D3 v6’s `arc` generator. The face consists of three circles for the head and eyes, plus a D3-generated path for the mouth, all drawn within a single `<g>` group centered on the canvas. The `arc` shapes a partial ring with a smirk factor, while explicit pixel coordinates position the eyes and mouth. Styling uses SVG attributes like `stroke-width`, and the component mounts via `ReactDOM.render`.

Mar 11, 2021

Loading thumbnail…

Smiley 1

A yellow smiley face with a black outline and features is drawn on a 960 by 500 SVG canvas. The composition uses circles for the head and left eye, an ellipse for the right eye, and a thick line for the mouth. The SVG is defined directly in the HTML file, using inline elements like `<circle>`, `<ellipse>`, and `<line>` with explicit positioning and stroke attributes, and no external data or JavaScript libraries are referenced.

Mar 10, 2021