Vito

MAKING BARS

This example visualizes population data for five countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. It uses React with D3 v5, loading data from a CSV file and rendering an SVG. The code employs `scaleLinear` for the population scale, `scaleBand` for the categorical country scale, and `axisBottom` and `axisLeft` to draw the axes. Bars are drawn as `rect` elements, filled with steelblue, with heights proportional to population values.

Jan 28, 2020

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots timestamps on the x-axis against degrees Celsius on the y-axis, using a smooth curved line styled with a thick maroon stroke. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` for the data path. The SVG rendering includes grid lines, axis labels, and a title.

Dec 7, 2019

World Countries Tree

This visualization presents the hierarchical structure of world countries organized by continent and subregion, displayed as a horizontal tree layout. The hierarchical data is loaded from a JSON file and rendered as an SVG using D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator. Node labels are positioned according to their depth, with font size decreasing at deeper levels, and the entire graphic supports pan and zoom via D3’s `zoom` behavior.

Blank Canvas

A blank, rounded rectangle fills the entire browser window. The visualization is a minimal SVG canvas that demonstrates the use of D3 v5's `select` method to resize an SVG element to the full width and height of the viewport. The code appends a single `rect` element with a 40-pixel corner radius, relying on the document's client dimensions. No data or interaction is present; the example focuses solely on the fundamental setup of an SVG drawing space.

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

Bowlfruit to select

Five fruits in a bowl transition between apples and lemons, with a black outline highlighting whichever fruit the pointer hovers over. The visualization demonstrates animated enter, update, and exit selections using D3 v5’s data join, transitioning circle radii from zero and updating positions via `transition().duration(1000)`. Mouseover and mouseout events trigger a state change through a `setSelectedFruit` callback, which re-renders the SVG with updated stroke styling. The code uses `d3.scaleOrdinal` for color and radius mappings, and `d3.range` to generate the initial dataset.

Click to Select

A row of apples is rendered as red circles, each of which can be clicked to select it, highlighting the chosen fruit with a thick black outline. The visualization animates transitions as fruits are removed or replaced with lemons, changing both color and radius. Built with D3 v5 using the SVG renderer, the code employs `scaleOrdinal` for color and size mappings, join selections with `merge`, and `transition().duration()` for animated updates.

Bowl of fruits - Gral. update pattern

This example demonstrates the D3 general update pattern for animating changes to a data set. A bowl of five apples is rendered as circles; over time, fruits are removed, and one apple is replaced by a lemon, with circles and text labels updating accordingly. The animation uses D3's `.transition()` method to interpolate the circle's `cx` and `r` attributes over one second. The code employs `d3.scaleOrdinal` for color and radius scales, and the `data()` method with key functions to manage entering, updating, and exiting elements.

Bowl of fruits - Gral. update pattern

Five fruit circles transition between states as apples are eaten and one apple morphs into a lemon. The visualization demonstrates the D3.js general update pattern: entering circles grow from a zero radius, exiting circles shrink away, and existing circles update their color and size. The code uses d3.select, d3.range, and a custom fruitBowl function with d3.scaleOrdinal for color and radius, while SVG transitions animate attribute changes over one second.

World Countries Tree

This visualization presents the World Countries Tree, a hierarchical layout of global geography organized from continents down to individual nations. Built with D3 v5, it employs the `tree()` layout and `linkHorizontal()` path generator to create an interactive, zoomable SVG diagram. The hierarchical data structure, loaded from a JSON file, defines parent-child relationships between regions. Users can pan and zoom using D3’s `zoom()` behavior, while text labels scale in size based on depth, emphasizing the tree’s branching structure.

World Population Area Chart

This area chart visualizes world population over time, with the x-axis representing time and the y-axis representing population. The chart uses an SVG rendering approach and is built with D3 v5, leveraging D3's area, curveBasis, scaleTime, scaleLinear, axisBottom, and axisLeft APIs. The data is loaded from a CSV file of world population by year, and the chart includes a title, axis labels, and grid lines. The area fill is styled with a maroon color, while axes are formatted with tick marks and labels.

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v5’s `csv` to load the data, `scaleLinear` for both axes, and `axisBottom` and `axisLeft` to render the scales with labeled tick marks. Axes are drawn with gridlines via negative tick sizes, while custom text labels for the axes and title are appended using D3 selections. The plot is rendered as SVG in a 960×500 viewport.

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

Nov 26, 2019

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

Nov 25, 2019