ben-chin-43

@ben-chin-43·10 public vizzes

Bowl of Fruit - Click to Select

A bowl of five apples renders as red circles in an SVG, with each fruit labeled by type. The visualization demonstrates data joins through timed state changes: one apple disappears, another becomes a lemon, and a third is removed. The code uses D3 v5 with modular functions `fruitBowl` and scales from `scaleOrdinal` for color and radius, updating circles and text via enter/update/exit selections.

May 27, 2020

Loading thumbnail…

Bowl of Fruit General Update PAttern

This example demonstrates the D3 general update pattern using a bowl of fruit that changes over time. Apples and lemons are rendered as color-coded circles with labels, and the visualization shows how fruits are added, removed, or replaced when timeouts trigger state changes. The code uses D3 v5 with `scaleOrdinal` for color and radius mapping, and applies the enter, update, and exit selections to manage SVG elements dynamically. The bowl is drawn as a rounded rectangle, and each fruit updates its position based on array index.

May 27, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, mapping years to the x-axis and population counts to the y-axis with a smooth, curved area fill. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, and an `area` generator with `curveBasis` to create the shape, while `axisBottom` and `axisLeft` add labeled ticks. Data comes from a CSV file of world population by year, with axes formatted to abbreviate large numbers (e.g., billions).

May 27, 2020

Loading thumbnail…

Temperature SF Line Plot

This visualization shows a week of temperature readings in San Francisco as an area chart, with time on the x-axis and temperature on the y-axis, filled with a maroon curve. The data comes from a CSV file loaded asynchronously, with timestamps parsed into JavaScript Date objects. The chart uses d3.scaleTime and d3.scaleLinear to map the data, d3.area with a curveBasis generator to create the filled shape, and d3.axisBottom and d3.axisLeft for the labeled axes, all rendered as SVG elements.

May 27, 2020

Loading thumbnail…

Temperature SF Line Plot

This line plot visualizes a week of temperature readings in San Francisco, displaying temperature fluctuations over time with a smooth curve. The data is loaded from a CSV file, with timestamps parsed as dates and temperatures as numbers. Built with D3 v5, the visualization uses `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render the smooth path in SVG. Axis labels and a title annotate the chart, while the data source is the temperature-in-san-francisco.csv dataset.

May 27, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository, revealing a positive correlation between the two variables. Using D3 v5, the chart employs `scaleLinear` with `extent` to map data values to pixel coordinates, and `axisBottom` and `axisLeft` to render labeled axes with grid lines. Circles are appended to an SVG element with red fill and opacity, and CSV data is loaded asynchronously via `d3.csv`, with numeric fields parsed before rendering.

May 27, 2020

Loading thumbnail…

Scatter Plot

Using d3.csv to load population data for ten countries, this scatter plot displays each nation as a circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses d3.axisBottom and d3.axisLeft with custom tick formatting that abbreviates large numbers, while SVG circles are rendered with a fixed radius. Population values from the CSV are multiplied by 1000, and the chart includes labeled axes and a title.

May 27, 2020

Loading thumbnail…

Customizing Axes

A bar chart displays the population of the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scaling, with `d3.axisLeft` and `d3.axisBottom` for customized axes, including a tick format that converts G to B for billions. Data is loaded from a CSV file using `d3.csv`.

May 26, 2020

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of the ten most populous countries, using data from a CSV file where population values are multiplied by 1000. Built with D3 v5, the visualization renders as SVG, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for tick marks. Steelblue rectangles represent each country, positioned and sized via the `attr` calls on the appended `rect` elements.

May 26, 2020

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a simple cartoon face from basic SVG shapes. It begins by creating a yellow circle for the head, then adds two black circles for eyes and an arc-generated path for the mouth. The `d3.arc` function computes the mouth’s curved shape based on specified inner and outer radii, with angles defined in radians. All elements are centered within the SVG using a translation transform, demonstrating how to combine geometric primitives and D3’s arc generator for expressive, code-driven visuals.

May 26, 2020