Andres Crovetto

@a-crovetto·3 public vizzes

Customizing Axes

This horizontal bar chart displays average response times for various API endpoints, with a linear x-axis and categorical y-axis. It uses a D3 v5 scaleBand for bars and scaleLinear for the x-axis, with custom tick formatting via `format('~s')` that replaces "G" with "B" for large values. A left axis without domain lines and horizontal gridlines from negative tick sizes emphasize the bar lengths. The data comes from a CSV file containing endpoint names and their average response times in milliseconds.

Apr 12, 2020

Loading thumbnail…

Avg response time by endpoint

This visualization shows the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. The scatter plot encodes horsepower on the x-axis and weight on the y-axis, with semi-transparent red circles representing individual vehicles. Built with D3 v5, the code uses `csv` to load the data, `scaleLinear` for both axes, and `axisBottom` and `axisLeft` to render the tick marks and labels. The SVG output includes a title and axis labels formatted with custom CSS styling.

Apr 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face using D3.js v5 and SVG. The code draws a red circle for the head, two white circles for the eyes with black strokes, and a curved mouth created with the `d3.arc()` generator. All shapes are positioned relative to the SVG’s width and height, with eye offsets and the mouth placed inside a transformed group. The visualization relies entirely on basic SVG shape primitives and D3’s arc path helper, with no external data.

Apr 10, 2020