Trey Billing

@billingtt·8 public vizzes

Temperature in San Francisco

This visualization shows temperature trends in San Francisco over time, with time on the x-axis and temperature on the y-axis. The data is rendered as an orange area chart using D3 v5’s `area` generator with a `curveBasis` interpolation, plotted in an SVG canvas. The code uses `scaleTime` and `scaleLinear` for axes, `extent` to set domains, and `axisBottom`/`axisLeft` with gridlines. Data is loaded via `d3.csv` from a remote dataset, with timestamps parsed as dates and temperatures as numbers.

Aug 23, 2019

Loading thumbnail…

Cars Scatter

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of cars, with each car represented as a semi-transparent circle. The chart uses D3 v5’s scaleLinear, extent, axisLeft, and axisBottom APIs to map data values to SVG coordinates, with gridlines and axis labels. The data is loaded asynchronously from an external CSV file via d3.csv, and numeric fields are parsed before rendering. Styling is applied through CSS classes for circles and text elements.

Aug 23, 2019

Loading thumbnail…

Customizing Axes

This example uses D3 v5 to display a bar chart of the ten most populous countries, with population data sourced from the United Nations. It demonstrates customizing axes by using `d3.scaleLinear` and `d3.scalePoint` to map values, `d3.axisBottom` and `d3.axisLeft` with custom tick formats (converting "G" to "B" for billions) and extended tick lines that span the chart's inner dimensions. The SVG rendering includes styled circles representing each country's population, with axis labels and a title configured via CSS.

Aug 23, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

Aug 22, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser window resizing. It uses the CSS `position: fixed` to make the chart container fill the viewport, then extracts the container’s `clientWidth` and `clientHeight` to set the SVG’s width and height attributes on each resize event. A green X is drawn using SVG `<line>` elements and the `selection.merge()` method, with both lines re-rendered to span the full dimensions. The code relies on `d3.select` and the `window.addEventListener("resize", redraw)` API to trigger updates.

Aug 22, 2019

Loading thumbnail…

Untitled

A large, single-digit number fills the browser window in a bold, white-to-light styling against a dark navy background. The number 4 is rendered as a massive, static text element using standard HTML and CSS, with the Ubuntu font. The page displays this oversized digit as its sole content, creating a minimalist typographic poster. The implementation relies on plain CSS for layout and styling, with no external data or interactive visualization libraries involved. The body’s font-size is set to 12em, and the background color is fixed to a deep blue.

Aug 22, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generated from an array of car objects. It shows how asynchronous data loading and modular JavaScript can dynamically populate a web page. The code uses the `fetch`-like pattern via a custom Promise in `getCars.js`, along with `JSON.parse` to convert raw data. The `generateReport` function filters cars by price and formats each entry using `formatCar` template literals. The page displays “Loading…” initially, then updates the DOM's `textContent` with the filtered list after a simulated two-second delay.

Aug 22, 2019

Loading thumbnail…

Cars Report

This example displays a report listing five used cars with their year, make, model, and price. The page initially shows “Loading...” and then renders the generated report inside a large `<pre>` element using the data from `cars.js`. The code uses JavaScript promises via `getCars().then()`, a custom `generateReport` function to filter by year, and inline CSS with the Ubuntu font and a dark blue background. The visualization is purely text-based, with no charting library involved.

Aug 22, 2019