Kaleb LaBarrie

@labakg·21 public vizzes

World Population Area Chart

This area chart visualizes world population over time, with the x-axis representing years and the y-axis showing population counts. The chart uses an SVG rendering with a smooth, curved area fill created by `d3.area()` with `curveBasis`. Axes are generated via `d3.axisBottom()` and `d3.axisLeft()`, while data is loaded through `d3.csv()` from a remote dataset. The visualization includes labeled axes, a title, and gridlines styled through CSS.

Sep 19, 2021

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses a smooth curve (via `d3.curveBasis`) to fill the area beneath the temperature line, and includes labeled axes with gridlines. Built with D3 v7, the code loads CSV data from a URL, parses timestamps and numeric values, and renders the visualization as SVG using `d3.area`, `d3.scaleTime`, and `d3.scaleLinear`. The chart’s title and axis labels are styled with custom CSS.

Sep 19, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperatures in San Francisco, with a smooth curve showing how temperatures fluctuate over time. The visualization uses D3.js v7 to load CSV data and render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the curved path, and `axisBottom`/`axisLeft` for labeled ticks. The chart displays the title and axis labels (Time and Temperature) within a 960x500 SVG canvas, showing the daily temperature trend in degrees Celsius.

Sep 19, 2021

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.csv to load the data, then employs scaleTime and scaleLinear to map values, with axisBottom and axisLeft generating gridlines and tick marks. Circles are rendered via SVG, styled with a steelblue fill, and the chart includes labeled axes and a title. The code also demonstrates margin-based layout and axis label positioning using D3 v7.

Sep 19, 2021

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing a car. It uses d3.scaleLinear to map data values to screen coordinates and d3.axisBottom and d3.axisLeft to render labeled axes with gridlines. The SVG rendering applies a semi-transparent red fill to circles, while a title and axis labels are added as text elements. Data is loaded from a CSV file and parsed into numeric values before plotting.

Sep 19, 2021

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country positioned along a point scale and its population on a linear axis. Circles sized at a fixed radius mark the data points, while gridlines and labeled axes provide context. The visualization uses D3 v7 with `scalePoint` for the categorical y-axis, `scaleLinear` for the population axis, and SVG circles to render the chart from a CSV file.

Sep 17, 2021

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the ten most populous countries, with vertical bars extending from a truncated y-axis. It customizes axes by removing domain lines and tick lines on the left, and uses a tick formatter with d3.format to convert values from billions to a readable scale with ‘B’ suffix. The chart labels the x-axis ‘Population’ and applies a title. The visualization is built with d3.v7, using scaleLinear, scaleBand, axisLeft, and axisBottom, rendering as SVG.

Sep 17, 2021

Loading thumbnail…

Fork of Making a bar chart

This bar chart displays the population of ten countries in 2018, using a horizontal layout where bar length encodes population value. The chart is rendered as an SVG using D3 v7, with a linear scale for the x-axis and a band scale for the y-axis. It employs the `csv` function to load data from `data.csv`, `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` for axes. Bars are styled with steelblue via CSS.

Sep 17, 2021

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for ten countries from a CSV file, with each bar’s length proportional to population. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for ticks. Bars are appended as SVG rectangles with steelblue fill, positioned using the scales’ output ranges.

Sep 17, 2021

Loading thumbnail…

Let's make a face with d3.js

This example constructs a cartoon face from basic SVG shapes using D3.js v7, with a yellow circular head, eyes, eyebrows, and an arc-based mouth. It demonstrates D3’s `select`, `arc`, and `append` methods to build the scene, and uses `transition` with `.duration()` to animate the eyebrows moving up and down in a repeating cycle. The face is centered via an SVG `g` transform, with all elements rendered in a 960×500 viewport.

Sep 16, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through CSS and inline attributes. The SVG markup uses standard elements like `circle`, `rect`, `line`, and `path`, with `transform` groups to scale and translate the drawing. CSS classes in `style.css` apply stroke colors, widths, and line joins to the line and path elements. The result shows how geometric primitives combine with presentational styling to create a static vector illustration, rendered directly in the browser via SVG.

Sep 16, 2021

Loading thumbnail…

SVG Fundamentals

A demonstration of basic SVG shapes includes a circle, line, and rectangle, each styled with stroke and fill. The rectangle uses a CSS transition and hover effect to change its color and stroke width. The example relies on SVG rendering with HTML and CSS, not on JavaScript libraries. The circle and line use default black fill and stroke, while the rectangle has a blue fill. The hover interaction, defined with `rect:hover` and a CSS transition, triggers visual feedback on the rectangle only.

Sep 15, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update pattern (text)

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit that changes over time. It shows how data joins manage entering, updating, and exiting SVG elements—apples are eaten, one apple turns into a lemon, and positions shift with each render cycle. The code uses d3-scale’s `scaleOrdinal` for color and radius mapping, while transitions animate circle sizes and repositions groups after each state change. Rendered as SVG, the bowl is a static rectangle, and text labels identify each fruit type.

Sep 13, 2021

Loading thumbnail…

Bowl of Fruit - General Update pattern

D3.js demonstrates the General Update pattern with a bowl of fruit where apples and lemons enter, exit, and change type. Using `d3.scaleOrdinal` for color and radius, circles transition smoothly over one second via `transition().duration()`, with enter selections growing from radius zero and exit selections shrinking away. The example shows both the enter-merge-exit structure with keyed data joins and dynamic updates triggered by `setTimeout`.

Sep 10, 2021

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each semi-transparent blue circle representing a vehicle. The visualization uses d3.scaleLinear to map data values to pixel coordinates, with d3.axisBottom and d3.axisLeft generating tick marks and gridlines. Data is loaded asynchronously from a CSV file using d3.csv, and the code explicitly converts all numeric fields to numbers before rendering the SVG circles.

Jul 27, 2021

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with country names on the y-axis and population values on the x-axis. Using D3 v7, the code loads data from a CSV file, creates a linear scale for population and a point scale for countries, and renders circles with steelblue fill. Axis labels and grid lines are generated using `axisBottom` and `axisLeft`, with population formatted in billions. The visualization is rendered as SVG within an HTML page.

Jul 27, 2021

Loading thumbnail…

Customizing Axis

This visualization displays the top 10 most populous countries as horizontal bars, with population values on the x-axis and country names on the y-axis. It uses d3.csv to load data from a CSV file, then d3.scaleLinear and d3.scaleBand to map values and categories. The axes are customized using d3.axisBottom and d3.axisLeft, with tick labels formatted via d3.format to abbreviate large numbers (e.g., “1.41B”). Bar rectangles are appended to an SVG group with margins applied, and gridlines are created by negative tick sizes on the x-axis.

Jul 27, 2021

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

Jul 27, 2021

Loading thumbnail…

Shapes with SVG

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and paths—using SVG markup within a React-like HTML structure. The shapes are defined directly in the SVG element, with some styled via CSS classes and inline attributes to show color, stroke, and scaling. The code uses the SVG `<g>` element to group shapes and apply transformations like `scale()` and `translate()`, along with CSS properties such as `stroke` and `stroke-width` for line styling. The visualization renders client-side entirely through SVG, with no external data sources or libraries beyond the standard SVG API.

Jul 23, 2021

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report, listing three used vehicles with their prices in a monospaced, large-font format. The page uses plain HTML with an unordered list, and a linked CSS stylesheet applies styling, including a red highlight to the first car entry. No JavaScript libraries or APIs are involved; the visualization relies solely on static markup and CSS for its presentation. The data is hardcoded directly in the HTML list items.

Jul 23, 2021

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generator that filters a hardcoded JSON dataset of five vehicles by price and formats the results. The view initially displays “Loading…” before a Promise-based `setTimeout` simulation delays the data retrieval by two seconds. Using the `getCars` and `generateReport` functions, the code applies a `filter` for cars under $2,000, maps each car through the `formatCar` helper to produce strings like “2009 Chevrolet Trailblazer: $1550,” and joins them with newlines into a plain text report rendered inside an HTML `<pre>` element.

Jul 23, 2021