Skip to main content
Log in
C

Caleb

@calebaren·8 public vizzes

Loading thumbnail…

Temperature in Seattle Plot

This area chart displays Seattle’s daily consumption from January through June 2016, with a green filled curve over a time-based x-axis and a linear y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` APIs to render an SVG path from the data.csv file. Axes include rotated labels and tick marks, while the title and axis titles are styled via CSS.

Jul 1, 2020
Loading thumbnail…

Temperature in Seattle Plot

This line plot shows daily consumption in Seattle over the first half of 2016, with a clear weekly pattern of higher values on weekdays and dips on weekends. Built with D3 v5, the SVG visualization uses `scaleTime` for the date axis and `scaleLinear` for the consumption values, with `axisBottom` and `axisLeft` for tick marks. The line is drawn using `line` with `curveBasis` smoothing, and data is loaded from a local CSV file.

Jun 30, 2020
Loading thumbnail…

Temperature in Seattle Plot

This line plot shows daily consumption in Seattle over the first half of 2016, with a clear weekly pattern of higher values on weekdays and dips on weekends. Built with D3 v5, the SVG visualization uses `scaleTime` for the date axis and `scaleLinear` for the consumption values, with `axisBottom` and `axisLeft` for tick marks. The line is drawn using `line` with `curveBasis` smoothing, and data is loaded from a local CSV file.

Jun 30, 2020
Loading thumbnail…

Cars Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) using data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3.js with an SVG rendering, where each circle represents a car, with position determined by linear scales for both axes. The code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes, while `csv()` loads the external dataset. Axis labels and a title are added via SVG text elements, with circles styled in translucent red.

Jun 17, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country positioned along a point scale on the y-axis and its population on a linear x-axis. The visualization uses D3 v5 (d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom) to render SVG circles. Population values, loaded from a CSV, are formatted with d3.format (e.g., “1.43B”), and grid lines are created using tickSize on the axes.

Jun 17, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with countries on the y-axis and population values on the x-axis. The visualization customizes both axes by removing default domain lines and tick marks, adding custom tick formatting that converts large numbers to abbreviations like "B" for billions, and appending axis labels. It uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisBottom and d3.axisLeft to generate the axes. Rectangles are drawn in SVG, styled with CSS, and the chart includes a title.

Jun 17, 2020
Loading thumbnail…

Making a Barchart

This bar chart displays the population of the top 10 most populous countries in 2020, using data from the UN World Population Prospects. The chart shows population values on a linear x-axis and country names on a banded y-axis. Built with D3 v5, it uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render SVG rectangles. The SVG output features steel-blue bars with text labels, and the data is preprocessed by multiplying population values by 1000.

Jun 17, 2020
Loading thumbnail…

Face in D3.js

This example uses D3.js to draw a yellow face with black eyes, eyebrows, and a mouth on an SVG canvas. The face is centered using a group element with a transform, while the eyebrows gently move up and down via chained transitions that animate a translate attribute over two seconds each. The mouth is created with an arc shape, and the code imports select and arc from the D3 library.

Jun 17, 2020