al0210.stevie@gmail.com

@al0210·4 public vizzes

Auto MPG Summary Tutorial

This visualization is a tutorial that demonstrates how to create a basic data summary using D3.js. It displays the total number of rows, columns, and the data size in kilobytes, followed by the first ten rows of the auto MPG dataset rendered as JSON. The code uses the `d3.csv` function to load the data from a remote CSV file and the `d3.csvFormat` API to calculate its size. The output is shown as plain text in a green monospace font on a black background.

Nov 19, 2024

Loading thumbnail…

Bar Chart Tutorial

This bar chart displays the populations of the ten most populated countries in 2018, using horizontal bars. The data, sourced from the World Bank Group and loaded from a CSV file, is scaled and rendered as an SVG. The visualization uses D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to construct the plot, with population values divided by 1000 for the x-axis.

Nov 19, 2024

Loading thumbnail…

Making a Bar Chart D3 Tutorial

This example demonstrates an SVG-based bar chart that dynamically responds to browser resizing. The visualization fills the entire viewport using CSS positioning, while a redraw function extracts the current width and height from the chart container and updates the SVG element’s dimensions accordingly. Two diagonal green lines are drawn to visually confirm the resizing behavior. The implementation uses D3 v5, with d3.select and SVG line elements, and listens for window resize events to trigger redrawing.

Nov 12, 2024

Loading thumbnail…

Making a Face_Tutorial

This example demonstrates a simple face built from D3.js geometric primitives. It displays a yellow circle with a black stroke, two black circles for eyes, and a mouth drawn as a path using a D3 arc. The code uses the D3 `select` function to append shapes to an SVG group, which is translated to the center of the canvas. The mouth’s shape is generated with D3’s `arc` API, specifying inner and outer radii and a start and end angle in radians.

Nov 11, 2024