carlos157oliveira

@carlos157oliveira·10 public vizzes

Color and Size Legends

Two reusable legend components demonstrate how D3 scales drive SVG circle size and color. A sequential color legend maps fruit categories to distinct hues via `scaleOrdinal`, while a quantitative size legend uses `scaleSqrt` with `ticks()` to generate proportional radii. Both components animate circle radius changes with `transition().duration(1000)`, handling enter, update, and exit selections through `merge()` and promise-based removal. The example uses D3 v5 selection methods to bind data and render labeled legends with configurable spacing and text offsets.

Aug 11, 2019

Loading thumbnail…

General Update Pattern With Nested Elements

This example demonstrates the general update pattern for nested elements in D3, showing how fruit shapes transition as the data array changes. Five oranges and a lemon render as circles with color and radius scales, then undergo three timed updates: removal, type change, and splice. The code uses `selection.data`, `enter`, `merge`, `exit`, and `transition` with `.duration` and `.end` to coordinate circle radius and fill animations, while text labels update via `text`. Rendering targets SVG with an ordinal scale for colors and radii.

Aug 10, 2019

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion. It uses a tidy tree layout to display the nested structure, with labels rendered in varying font sizes based on depth. The code builds the tree from a JSON data source using D3's `tree`, `hierarchy`, and `linkHorizontal` APIs, drawing connecting paths and text elements in an SVG. Pan and zoom functionality is added via D3's `zoom` and `event` utilities.

Aug 10, 2019

Loading thumbnail…

Interaction With Unidirectional Data Flow - Click

Fruit circles animate between orange and lemon varieties while responding to clicks that select a fruit with a blue stroke. The visualization demonstrates unidirectional data flow: click events call `setSelectedId`, which updates `selectedId` and re-renders the entire scene via `fruitBowl`. D3 v5's data join, `transition`, and ordinal scales (`scaleOrdinal`) handle SVG circle updates, while timed `splice` and `pop` operations mutate the `fruits` array to trigger enter, update, and exit transitions over four seconds.

Aug 9, 2019

Loading thumbnail…

Interaction With Unidirectional Data Flow - Mouse Hover

Five circles representing fruit are rendered as SVG elements inside a 960-by-500 canvas, with each circle’s radius and color determined by its type (orange or lemon) using D3’s `scaleOrdinal`. The visualization demonstrates unidirectional data flow: hovering a circle triggers a `mouseover` event that calls `setSelectedId` to update a selected-id state, which then re-renders the chart, adding a blue stroke to the hovered circle. A `d3.range` generates initial orange fruits, while a lemon is appended, and timed mutations remove fruits and change a type, all handled through D3’s `transition` API for animated updates.

Aug 9, 2019

Loading thumbnail…

General Update Pattern

This example demonstrates the D3 general update pattern for data joins, where circles representing fruit enter, update, and exit with animated transitions. Fruits are drawn as SVG circles sized and colored by type via `d3.scaleOrdinal`, with positions calculated from array indices. The code uses `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit` to handle updates, paired with `transition.attr` methods over one-second durations. A sequence of `setTimeout` calls modifies the fruit array by removing, changing, and splicing elements, showing how the visualization responds to data changes.

Aug 9, 2019

Loading thumbnail…

Area Chart

This area chart displays the population of Brazil over time, covering data from 2010 with projections through 2044. The visualization uses an orange filled area to represent the total population against axes for year and population count. The code builds the chart with D3 v5, using `scaleTime` and `scaleLinear` for scales, the `area` generator for the shape, and `axisBottom` and `axisLeft` for the axes, which include customized tick formatting. The data comes from a CSV file with Brazilian demographic statistics.

Aug 8, 2019

Loading thumbnail…

Line Chart

This line chart visualizes Brazil’s total population over time, from 2010 to 2044, based on United Nations World Population Prospects data. The chart uses D3 v5 to load CSV data, scale time and linear axes, and generate an SVG path via the `d3.line` generator. Customized axes include formatted tick labels and grid lines, while the chart title and rotated axis labels are added as SVG text elements.

Aug 8, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays 50 data points plotting area against value, with purple circles positioned using linear scales derived from the data's extent. The visualization demonstrates D3 axis customization, including tick lines that span the full chart dimensions, a rotated y-axis label, and a capitalized title. The code uses d3.csv to load the data and d3.scaleLinear, axisBottom, axisLeft, and extent functions from D3 v5, rendering everything as SVG elements within an 960x500 viewport.

Aug 8, 2019

Loading thumbnail…

Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and customized `axisBottom` and `axisLeft` ticks. Populations are multiplied by 1000 from the CSV data, and axis labels are formatted with abbreviations like "Mi" for millions. The chart includes a title, labeled axes, and styled gridlines.

Aug 6, 2019