ecoBela

@ecoBela·13 public vizzes

Bowl of Fruit - Click to Select

Five fruit circles animate into a row, with apples shown as large red circles and lemons as smaller yellow ones. Clicking a fruit logs its ID and re-renders the selection state. Apples are removed and replaced over timed intervals, demonstrating enter, update, and exit transitions. The example uses d3-selection’s `data` join with key functions, `transition().duration()`, and d3-scale’s `scaleOrdinal` for color and radius mappings, rendering in SVG.

Sep 10, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern & Animated Transitions

This example demonstrates the general update pattern with animated transitions in D3 v5, showing a row of fruit circles that change over time. It displays five apples that shrink and disappear when eaten, while one apple transforms into a lemon through color and radius changes. The implementation uses d3.scaleOrdinal for mapping fruit types to colors and sizes, with selection.data() and enter/merge/exit selections to handle updates. SVG circles animate via transition().duration(1000) on attributes like cx and r, driven by timed render functions in index.js.

Sep 9, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five apples sit in a bowl rendered as a rounded rectangle. This example demonstrates the D3 general update pattern: when the data array changes, the visualization transitions smoothly. The code uses D3 v5's `select`, `range`, and `scaleOrdinal` to map fruit types to colors and radii. Apples are red and larger, while a lemon is yellow and smaller. The simulation uses `setTimeout` to trigger three updates: removing an apple, replacing one with a lemon, and filtering out another, showing how the SVG elements are entered, updated, and exited accordingly.

Sep 9, 2019

Loading thumbnail…

World Population Area Chart

The World Population Area Chart visualizes global population growth over time using a filled area plot. The chart displays population values on the y-axis and years on the x-axis, with the area under the curve filled in yellow. The visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.area with d3.curveBasis for the area generator, and d3.axisLeft and d3.axisBottom for the axes. Data is loaded from a CSV file using d3.csv, with population values parsed as numbers and years as dates.

Sep 4, 2019

Loading thumbnail…

Let's Make A Face with D3.js

A friendly face is drawn using D3.js primitives: a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. All elements are grouped and centered within an SVG. The code uses D3 selections and the `arc()` generator to create the mouth path, while a `transition()` with a two-second duration animates the eyebrows upward and back down, giving the face a subtle expression change.

Sep 1, 2019

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, sourced from Data Canvas: Sense Your City, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 version 5, employing `scaleTime` and `scaleLinear` for axes, a basis-smoothed `area` generator for the filled region, and `axisBottom` and `axisLeft` for gridlines and labels. The SVG render includes a title and axis annotations, with all styling handled by an external stylesheet.

Aug 30, 2019

Loading thumbnail…

Customising Axes

This bar chart displays the populations of the ten most populous countries, based on the United Nations’ 2019 World Population Prospects estimates. The visualization customizes its axes by removing the y-axis domain line and tick marks, formatting x-axis labels in abbreviated form (e.g., “1.43B”), and extending x-axis gridlines across the plotting area. Built with d3.v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, the chart renders as an SVG, with population values scaled by 1,000.

Aug 30, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays one week of temperature data for San Francisco, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses a smooth basis curve to connect data points and includes labeled axes and a title. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` and `scaleLinear`, and axes drawn using `axisBottom` and `axisLeft`. The data is loaded from a CSV file using D3’s `csv` method, with timestamps parsed as dates.

Aug 30, 2019

Loading thumbnail…

Temperature in San Francisco Scatterplot

A scatterplot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis, using purple semi-transparent circles. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and labeled axes. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures converted to numbers.

Aug 30, 2019

Loading thumbnail…

Cars Scatter Plots

This interactive scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses D3.js v5 with SVG rendering, mapping each car to a semi-transparent red circle positioned via `d3.scaleLinear` and `d3.extent`. The axes are generated with `d3.axisLeft` and `d3.axisBottom`, featuring custom tick sizes and labels. Data is loaded as CSV and parsed for numeric fields before rendering.

Aug 29, 2019

Loading thumbnail…

Scatter Plots

This scatter plot displays the 2019 population estimates for the top 10 most populous countries, using a linear scale for the population on the x-axis and a point scale for country names on the y-axis. The visualization uses D3 v5 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG. Circles are plotted with a fixed radius, and the data is loaded from a CSV file, with the population values multiplied by 1,000 to represent actual figures. The chart includes a title and a labeled x-axis.

Aug 25, 2019

Loading thumbnail…

Making A Bar Chart

This bar chart displays the population of the ten most populous countries, using 2019 estimates from the United Nations World Population Prospects. The visualization encodes population on the horizontal axis with a linear scale and country names on the vertical axis using a band scale. It is rendered as SVG, with axes generated via `axisLeft` and `axisBottom`, and bars drawn as rectangles whose widths map to the population values. The data is loaded asynchronously from an external CSV file using `d3.csv`.

Aug 15, 2019

Loading thumbnail…

Surprise face with D3

A yellow circle with black outlines forms a cartoon face composed of simple geometric shapes: two eyes, rectangular eyebrows, and a smile. Built with D3 v5, the visualization uses SVG elements, with the face centered via a transformed group. The eyebrows animate by transitioning their vertical position over two seconds, moving up and then settling back, creating a surprised expression. The mouth is drawn as an arc path using D3's `arc` API, and the animation is driven by the `transition().duration()` method.

Aug 5, 2019