Martin Lauf

@laufmartin·4 public vizzes

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes a hierarchical dataset of restaurant categories across multiple U.S. cities, with each ring segment representing a food type and its relative value. Users can click on any segment to re-center the visualization on that node, smoothly animating the repositioning and scaling of all arcs and labels over 750 milliseconds. Built with D3 v5, the implementation uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, `d3.arc` for rendering paths, and `d3.interpolate` within a `transition.attrTween` for seamless zoom transitions. Colors are assigned via a rainbow-interpolated ordinal scale, and the flare dataset is loaded asynchronously from the Observable stdlib.

Dec 11, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between car acceleration and weight using the UCI Auto MPG dataset, with each red semi-transparent circle representing an individual car model. The visualization employs D3 v5’s scaleLinear, axisBottom, and axisLeft functions to map data values to SVG coordinates, rendering axes with tick marks and custom labels. The code fetches the CSV data via d3.csv, converts numeric fields, and draws circles with a fixed radius, while styles.css controls circle opacity and typography. The margin-based layout and appended axis labels, such as "Weight" and "acceleration," clarify the plotted dimensions.

Aug 6, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis formatted with abbreviated numbers (using `d3.format` to convert millions and billions) and a vertical axis with large tick labels. Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while rendering as SVG. Grid lines extend across the chart, and the axis labels and title are styled via CSS for clarity.

Jul 23, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows is assembled on an SVG canvas using D3.js v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the brows, and a path from the `d3.arc()` generator for the mouth. The eyebrows are animated via chained `transition().duration()` calls that shift their container group up and down over four seconds. All dimensions are derived from the SVG's width and height attributes, and the face is centered with a translated `<g>` element.

Jul 23, 2019