lanzosuarez

@lanzosuarez·9 public vizzes

Bowl of Fruit - General Update Pattern

A bowl of five apples appears as circles, then shrinks and disappears as one is eaten. A middle apple’s fill and radius transition from red to yellow as it becomes a lemon, demonstrating the general update pattern with enter, update, and exit selections. The example uses D3 v5’s `selection.merge`, `transition.attr`, and ordinal `scaleOrdinal` for colors and radii, with SVG circles redistributing horizontally via a computed `cx` position. Data updates are triggered by `setTimeout` after initial rendering from a `range(5)` array.

Jul 12, 2020

Loading thumbnail…

Bowl Of Fruit - General Update Pattern

This example demonstrates the general update pattern with a bowl of fruit visualization, where entering, updating, and exiting elements are handled smoothly through data joins. The code uses `d3.arc` to generate fruit shapes and `d3.select` to bind data to SVG elements, with transitions animating changes in position and size. The visualization renders to an SVG canvas within a React framework, pulling data directly from the D3 library version 5. The view dynamically reflects changes in the underlying dataset, showcasing how D3 manages element lifecycles in a declarative manner.

Jul 6, 2020

Loading thumbnail…

World Population

This visualization shows world population growth over time as a red area chart, with years on the x-axis and population counts on the y-axis. The area under the curve is rendered using d3.area with a basis curve, while d3.scaleTime and d3.scaleLinear handle the scales. Axes are generated with d3.axisLeft and d3.axisBottom, and tick labels are formatted using d3.format to display billions. The chart includes labeled axes and a title, with data loaded from a CSV file containing yearly population figures.

Jul 6, 2020

Loading thumbnail…

Tempeature in San Francisco (Area Chart)

This area chart visualizes temperature readings in San Francisco over a week, with a red filled curve showing temperature trends against time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` to map timestamps and temperature values, and the `area` generator with `curveBasis` to create the smooth filled path. Axes include gridlines via `tickSize`, and data is loaded from an external CSV containing timestamp and temperature pairs.

Jul 6, 2020

Loading thumbnail…

Tempeature in San Francisco

A line chart displays temperature readings over one week in San Francisco, with red circles marking each data point and a smooth steelblue curve connecting them. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for tick marks, and a `line` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV file via `d3.csv` and parsed into timestamp and temperature values.

Jul 3, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes automotive data, showing the relationship between horsepower and weight for a dataset of cars. The visualization uses a D3.js v5 implementation with SVG rendering to plot red, semi-transparent circles on a Cartesian coordinate system. The code leverages d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to construct the scales and axes, with gridlines extending across the plot area. Data is loaded via d3.csv from an external auto-mpg dataset, and custom axis labels and a graph title are added as SVG text elements.

Jul 3, 2020

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize the axes of a bar chart to display the populations of several countries, with a custom tick formatter that abbreviates large numbers (e.g., converting "1.23G" to "1.23B"). The chart uses D3 v5 with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes, with gridlines and styled tick labels. Data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as SVG elements.

Jul 2, 2020

Loading thumbnail…

Bar Chart

This bar chart displays population figures for eight countries, with horizontal bars sized proportionally to each nation’s population. The visualization uses React with D3 v5, rendering SVG elements. The code loads data from a CSV file via `d3.csv`, then applies a `scaleLinear` for the x-axis and `scaleBand` for the y-axis categories. Axes are generated using `axisLeft` and `axisBottom`, while bars are appended through a D3 data join with steelblue fill styling.

Jul 1, 2020

Loading thumbnail…

HTML Starter

This example shows a smiling face built from SVG shapes, including a yellow circle, rectangular brows and nose, white eyes, and an arc-based mouth. The right brow animates downward in two sequential transitions, creating a winking effect. The code uses D3 v5 selections to append and style elements, helper functions like `d3.arc` for the mouth path, and chained `transition()` calls for the animation. All graphics are rendered in a static SVG canvas with no external data.

Jun 30, 2020