Fernando Gonzalez - Valadez

@Tatogv·6 public vizzes

World Countrees

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout. The D3.js code constructs the tree from a JSON data file, positioning nodes and connecting them with paths. Text labels for each region and country are rendered with font sizes that decrease with depth, and the entire visualization is drawn as an SVG within a zoomable group, allowing users to explore the geography.

Nov 26, 2019

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

Nov 25, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic grouping, with an interactive color legend that filters the map when clicked. Users can select a specific economic category to highlight those countries and dim all others, or click again to reset the view. Pan and zoom controls allow exploration of the global map. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, plus `d3.scaleOrdinal` and `d3.schemeSpectral` for color encoding. Country boundaries and metadata come from the world-atlas TopoJSON and TSV datasets.

Nov 12, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in data visualization, showing a color legend with fruit names (apple and lemon) mapped to distinct colors. The code uses D3 v5’s selection.enter/merge/exit methods to handle dynamic data changes, with the colorLegend.js module rendering circles and text labels. It specifically addresses special cases in the update pattern, such as handling groups that exit or have missing children. The visualization uses a scaleOrdinal color scale from D3 and SVG rendering inside a static 960x500 viewport.

Nov 12, 2019

Loading thumbnail…

Let's make a face with D3.js!

A face built from modular shapes appears within a rounded rectangle on a full-screen SVG canvas. The example constructs the face by appending a rectangle and other elements, using D3.js v5 selection and attribute methods to set dimensions and styling. It leverages the `select` and `append` APIs from the D3 library to manage SVG elements dynamically based on the browser window’s client width and height.

Nov 12, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them with `d3.geoMercator`. The map is drawn as SVG paths using `d3.geoPath`, with countries filled in green and outlined in black. The code imports specific functions like `select`, `json`, and `feature` from D3 v5 and TopoJSON, and applies a dark blue background via CSS.

Nov 11, 2019