sploitfun

Bar Chart

This bar chart visualizes the top 10 most populous countries, with population values read from a CSV file. It uses a D3 v5 linear scale for the horizontal axis and a band scale for the vertical country categories, rendered as SVG rectangles. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with custom tick formatting to abbreviate large numbers. A title and axis label are added as SVG text elements, and the chart is styled via CSS classes.

Jul 9, 2020

Bar Chart

This bar chart displays population estimates for ten countries in 2018, ordered alphabetically from China to Mexico. The height of each steel-blue rectangle corresponds to the country’s population value, scaled linearly along the horizontal axis using `scaleLinear`, while the vertical axis positions countries with `scaleBand`. The SVG is rendered with D3 v5, using `csv` to load the data and `axisLeft`/`axisBottom` to generate axes. A fixed margin is applied via a translated `<g>` element.

Jul 8, 2020

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, with each circle’s x-position mapped to population via a linear scale and its y-position to country name using a point scale. The visualization uses D3 v5 to load CSV data, render an SVG, and draw custom axes with removed domain lines. Axis labels are formatted with `format('.3s')` to abbreviate large numbers, and tooltips are not implemented.

Bar Chart

This bar chart displays the top 10 most populous countries using a horizontal layout, with population values scaled linearly and countries ordered along a band scale. The visualization includes labeled axes and formatted tick marks that abbreviate large numbers, such as converting billions to "B." The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to load data, scale, and render the SVG. Population figures from the CSV are multiplied by 1000 to represent full counts, while gridlines and axis styling enhance readability.

D3 Intro

An empty SVG canvas is colored entirely red through a simple demonstration of D3's DOM manipulation. The code selects the `svg` element using D3's `select` function and applies an inline background color style. This example serves as a minimal introduction to D3 v5, using the library loaded from a CDN and bundled via rollup. The rendering relies on SVG, with no data binding or visualization yet, focusing solely on establishing the basic workflow of selecting elements and applying styles.

SVG Basics

This example demonstrates fundamental SVG drawing primitives in D3 v5, including circles, rectangles, lines, and paths. The code shows how to position shapes using coordinates, apply fills and strokes, and leverage SVG groups with transform attributes for translation and scaling. It also illustrates path commands like M and L for creating connected lines. Styling is applied through both inline attributes and a CSS class defined in styles.css, highlighting basic SVG composition techniques.

Choropleth Map

This choropleth map colors countries by economic classification using a sequential yellow-orange color scale from the World Atlas TopoJSON dataset. The view uses a natural Earth projection, renders as SVG, and includes pan and zoom via d3.zoom. A custom color legend displays the ordinal scale, while hovering highlights each country with a tooltip showing its name and economy value. The implementation combines d3.geoPath, topojson.feature, and a reusable colorLegend module.

May 9, 2020

Color and Size Legend

This example demonstrates two legend types for visualizing data: a color legend and a size legend created side by side in an SVG. The color legend maps categorical fruit names (apple, lemon, lime, orange) to distinct colors using a d3.scaleOrdinal, while the size legend uses a range of numeric values to create circles of varying radii. Both legends are rendered through d3 data joins, where each group contains a circle and a text label positioned with transform attributes and spacing constants. The visualization uses d3.v5 and employs the colorLegend and sizeLegend custom functions to generate the reusable legend components.

Tree Visualization

This interactive tree visualization displays the hierarchical structure of world regions and countries, using a horizontal dendrogram layout. The visualization reads from a JSON data file and renders an SVG using D3 v5, with nodes labeled as text and links drawn as paths. It includes zoom and pan functionality through D3’s `zoom` event, while the layout is computed with the `hierarchy` and `tree` APIs. Text elements are styled with a serif font and white text-shadow for readability.

Black Canvas

Using D3 v5, this example fills the browser viewport with a single black SVG rectangle whose corners are rounded by an `rx` of 40. The rectangle’s dimensions are set from `document.body.clientWidth` and `clientHeight` via `select("svg").attr("width")` and `.attr("height")`. The visualization demonstrates a minimal, full-screen canvas with no interactive elements, relying solely on SVG attributes for sizing.

Maps

This map visualization displays world country boundaries as green polygons on a light gray sphere, with hover effects turning countries red and tooltips showing country names. It loads TopoJSON data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoPath` using the `geoNaturalEarth1` projection. The map supports zooming and panning through `d3.zoom`, with the zoom transform applied to an SVG group element. Population data from data.csv is not visually encoded.

Bowl of fruit - Geenral Update Pattern

This example demonstrates the D3 general update pattern through a bowl of fruit visualization. It shows five colored circles representing apples and lemons, which appear via a staggered enter transition, shrink and disappear when eaten, and change color and size when one fruit transforms from an apple to a lemon. The code uses d3.scaleOrdinal for color and radius mapping, and applies chained transitions with d3.transition to smoothly animate circle updates. Data joins are handled through selection.data with a key function, merging enter and update selections, and removing exit selections after an animation.

Bowl of fruit - Event Handlers

A bowl-shaped outline holds a row of five apples rendered as red circles, which users can hover over to highlight with a black stroke. The example demonstrates D3 v5 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius mapping. Over timed intervals, apples are removed, one becomes a lemon, and another is filtered out via key-based data binding, while mouseover and mouseout event handlers trigger `setSelectedCircle` to update the selection state.

Bowl of fruit -Singular Elements

A set of fruit shapes—red circles for apples and yellow circles for lemons—moves through a bowl-shaped SVG container, demonstrating D3’s data-join with singular elements. The code uses `scaleOrdinal` to map fruit types to colors and radii, while `selection.selectAll("g").data()` handles enter, update, and exit transitions as apples are removed or replaced over timed intervals. Rendered as SVG, the example shows how explicit key functions and group elements manage dynamic state changes.

Bowl of fruit - Nested Elements

A dynamic fruit bowl demonstrates data joins and nested elements with D3 v5. Five circles represent apples, rendered as red groups with uppercase text labels. As the simulation runs, fruits disappear, and one apple transforms into a yellow lemon, changing both color and radius. The code uses `d3.scaleOrdinal` for color and radius scales, `selection.data` with object constancy, and group elements containing circle and text children, with enter, update, and exit selections managing transitions.

San Francisco Temperature - Area Chart with Zero Baseline

This area chart visualizes world population growth from historical data, using a zero-baseline y-axis to emphasize proportional changes over time. The D3 v5 code loads CSV data and renders an SVG path generated with `d3.area()` and `curveBasis` for smoothing. Axes employ `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with tick lines spanning the chart. The visualization includes labeled titles and formatted tick values, converting billions with `d3.format`. The chart’s filled blue area and line stroke clearly highlight the upward population trend across the displayed years.

San Francisco Temperature - Area Chart

This area chart shows San Francisco temperatures over time, with a blue gradient fill beneath a smoothed curve. The visualization loads temperature data from a CSV file and renders it as an SVG using D3 v5. The code applies `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with `curveBasis` to generate the smooth area path. Grid lines are drawn via axis tick marks, with titles for the chart and both axes included.

May 6, 2020