Emma

@emma-r-slight·7 public vizzes

Country Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout using D3.js. The tree branches show the geographic grouping from World through Asia down to individual nations. The visualization uses D3's `tree`, `hierarchy`, and `linkHorizontal` functions to compute and draw the layout with SVG paths and text elements. Interactive zooming is enabled via D3's `zoom` event, and node labels are sized proportionally to their depth in the hierarchy.

Sep 6, 2020

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, displaying only a large rounded rectangle that spans the entire window. The visualization demonstrates a minimal setup for a data-driven document, using D3 v6 within a React framework. The code defines the canvas size dynamically based on the window's width and height, then appends a single rectangle element with rounded corners via the SVG API. This example serves as a starting point for building interactive visualizations, with the styling ensuring a fixed, full-screen layout.

Sep 6, 2020

Loading thumbnail…

World Map interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

Sep 6, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a world map rendered as an SVG using the natural Earth projection, with countries filled in light green and the ocean shown as a translucent blue sphere. It employs D3 v5’s `geoNaturalEarth1` and `geoPath` to project geographic data, and TopoJSON’s `feature` to extract country polygons from the world-atlas dataset. The map is drawn by appending a sphere path and then binding country features to new SVG path elements through D3’s data join. Styling is applied via CSS classes for the sphere and country boundaries.

Sep 4, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the D3 general update pattern for animated transitions in an SVG scene. It renders a bowl of fruit where apples and lemons appear, change type, and disappear at timed intervals. The visualization uses React, D3 v5's `scaleOrdinal` for color and radius mapping, and the `select` API to manage enter, update, and exit states for circles and text labels.

Sep 2, 2020

Loading thumbnail…

HTML Starter

A bowl of fruit animates through a sequence of state changes using the general update pattern. Five apples initially render, then one is removed, a lemon replaces an apple, and another apple is filtered out, with each transition updating the SVG circles over one second. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, `selection.data` with key functions, and chained `transition().duration()` calls to animate enter, update, and exit selections within a React framework.

Sep 2, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data (in Celsius) for San Francisco, sourced from Data Canvas - Sense Your City. It plots temperature over time, using a smooth curved line via d3.line with curveBasis. The visualization employs scaleTime and scaleLinear to map data to axes, with axisBottom and axisLeft for time and temperature labels. The data is loaded as CSV and rendered as SVG, with axis tick lines and custom styling applied through CSS.

Sep 2, 2020