Anna Lopez

@anna-lopez·5 public vizzes

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, with values formatted in billions using axis tick labels. The chart uses d3.csv to load data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct scales and axes, while custom axis styling removes domain lines and applies tick sizing. A d3.format call with a custom replace function converts the "G" suffix to "B" for readability.

Apr 9, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using data from the United Nations World Population Prospects 2017. The chart renders as SVG, with horizontal bars ordered by country name along the y-axis and population counts on the x-axis. The visualization is built with D3 v5, utilizing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position the bars and axes. Population values are read from a local CSV file and scaled by a thousand before being mapped to bar widths.

Apr 6, 2020

Loading thumbnail…

Let's make a facec with D3.js!

This example builds a smiling cartoon face from basic SVG shapes using D3.js v5, with a yellow circle for the head, dark eyes, rectangles for eyebrows, and an arc-generated mouth. The code uses `d3.select` to target the SVG, `d3.arc()` to compute the mouth path, and chained `transition().duration()` calls to animate the eyebrows bobbing up and down. Rendered as static SVG with a 2000-millisecond looping eyebrow motion, it demonstrates declarative shape construction and simple tweened animation in a React-free HTML page.

Apr 5, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create and style basic SVG shapes, including circles, rectangles, lines, and paths, using both inline attributes and CSS classes. The shapes are drawn within an SVG element and scaled via a transform. CSS rules in `styles.css` apply stroke styling to the group with class “lines,” while the `path` element uses a custom stroke color and rounded line joins. The code demonstrates combining SVG’s native shape attributes with external stylesheet rules for visual customization.

Apr 5, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple car sales report as an HTML list, showing three vehicles with their model years and prices. The minimalist interface uses a monospace font and prominently displays the 2012 Nissan Leaf in red via a highlighted CSS class, emphasizing it as the featured item. The page is built using plain HTML and CSS, demonstrating how basic web technologies can structure and style tabular data without requiring JavaScript or interactive features.

Apr 5, 2020