Álvaro Cáceres Muñoz

@alvarocaceresmunoz·7 public vizzes

Cars Report

This example displays a text-based report of used cars priced under $2,000, with each entry formatted as “year make model: price” and separated by newlines. After a brief “Loading...” state, the report appears once data arrives, filtering five car records from an inline JSON array. The code demonstrates modular JavaScript with ES modules, using `getCars()` to return a Promise that resolves after a two-second delay, and `generateReport()` to filter and map the data. The output is rendered into an HTML `<pre>` element via `textContent`.

Feb 26, 2021

Loading thumbnail…

Cars Scatter Plots

This interactive visualization displays the top 10 most popular countries plotted against their populations, using a scatter plot where each circle represents a country. The chart leverages D3 v6's `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs to construct the axes and positioning. Data is loaded from a CSV file containing auto-mpg statistics, with numeric fields parsed for the visualization. The SVG-based rendering applies custom tick formatters to abbreviate large population numbers, uses a steelblue fill for circles, and removes axis domain lines for a cleaner presentation.

Feb 13, 2021

Loading thumbnail…

Scatter Plots

A scatter plot displays the population of the top ten most populous countries, with each circle positioned along a linear population scale on the x-axis and a categorical country scale on the y-axis. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft for axes. Circles are appended as SVG elements, with axis tick lines extended across the chart as gridlines, and the population axis formatted using d3.format.

Feb 13, 2021

Loading thumbnail…

Customizing Axis

This bar chart displays the top 10 most populous countries, with population values formatted in billions using a custom tick formatter that replaces "G" with "B" in d3.format output. The chart uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render horizontal bars, with gridlines extending from x-axis ticks. A title and axis label are added via SVG text elements, and the y-axis domain lines and tick marks are removed while the x-axis domain is hidden, leaving a clean, focused visualization.

Feb 13, 2021

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, using a linear scale for population values and a band scale for country names, with bars drawn as SVG rectangles. The code loads data from a CSV file, parses population numbers, and renders axes with D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` functions. Bars are filled with a steel-blue color via CSS, and the chart is drawn entirely with SVG elements inside a fixed-size canvas.

Feb 13, 2021

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic D3.js shapes animates its eyebrows upward and back. The visualization uses D3 v6’s `select` and `append` to construct SVG circles for the skin and eyes, rectangles for the eyebrows, and a `path` defined by `arc()` for the mouth. Eyebrow motion comes from chained `transition().duration().attr()` calls, transforming the eyebrow group’s vertical position. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the face’s center.

Feb 12, 2021

Loading thumbnail…

Shapes with SVGs and CSS

This example creates a simple geometric composition of circles and rectangles within an SVG canvas, referencing the visual style of *Bojack Horseman* through its title and layout. The shapes demonstrate different styling techniques: some use inline fill attributes, while others inherit properties like fill and stroke from parent `<g>` elements or CSS classes. CSS rules define global properties such as monospace typography and hidden overflow, while a dedicated `.lines` class applies custom stroke colors and line joins to `<line>` and `<path>` elements. The page consists of a static HTML file and an external stylesheet, with no interactive or data-driven behavior.

Jan 25, 2021