caedcagt76@gmail.com

Fork of D3 D3 Color and Size Legends

This example demonstrates how to build color and size legends for D3 visualizations using modular JavaScript functions. It shows a color legend with circles representing different fruit types, encoded through an ordinal color scale. The code defines a reusable `colorLegend` component that binds data to SVG groups, appending circles and text labels. Using D3 v7’s `scaleOrdinal`, the example maps categorical domains to specific colors, while SVG rendering handles the visual output. The implementation highlights a clean separation between the legend component and the main script’s render logic.

Jan 3, 2024

D3 Color and Size Legends

This example demonstrates D3 color and size legends through an interactive fruit bowl visualization. Apple and lemon icons are rendered as SVG circles with red and yellow fills via `d3.scaleOrdinal`, while their radii vary between 50 and 25 pixels. The code uses a general update pattern with enter/merge/exit selections to animate changes in the fruit array over time, including removals and type substitutions. Static legends for color and size scales are created alongside the visualizations.

Jan 3, 2024

D3: World Map

This example visualizes world geography using D3 and TopoJSON, rendering country boundaries as an SVG map. It loads spatial data from the `world-atlas` package via `d3.json` and converts TopoJSON features with the `feature` function. The map is drawn using `d3.geoPath` and a `d3.geoEqualEarth` projection onto a 960×500 SVG canvas. A CSS class named `.highlighted` is defined but not actively applied, leaving the map uncolored and displaying only default black country outlines against a white background.

General Update Pattern (Hovering Events)

This example demonstrates the general update pattern in D3, where a sequence of timed data mutations—removing, replacing, and filtering fruits—animates circles smoothly in and out of an SVG. Hovering a circle selects it, triggering a black outline via a `mouseover` and `mouseout` event handler that updates a `selectedFruit` variable. The code uses `d3.select`, `scaleOrdinal` for colors and radii, and chained `transition().duration()` calls to animate enter, update, and exit selections. The fruit bowl renders as red apples and yellow lemons on a fixed-height SVG canvas.

General Update Pattern (Click Events)

Click events drive a unidirectional data flow that updates a fruit bowl visualization. Users click circles to select them, which triggers a re-render and highlights the chosen fruit with a black stroke. D3 v7’s data join, `transition.attrTween`, and event listeners animate entering, updating, and exiting SVG circles. The example uses `scaleOrdinal` for color and radius, and a timed sequence removes and replaces fruits to demonstrate the General Update Pattern.

D3 General Update Pattern (Object Constancy)

Five apples appear in a row, then the visualization animates through data changes while maintaining object constancy by keying each circle to a stable `id`. D3’s general update pattern merges entering, updating, and exiting selections, using `transition().duration(1000)` to grow new circles from radius zero, shrink removed ones, and smoothly reposition elements. The `fruitBowl` function applies ordinal color and radius scales to distinguish apples from lemons, while `setTimeout` calls trigger pop, type-swap, and filter operations on the fruit array.

D3 General Update Pattern (Singular Elements)

This example demonstrates the D3 general update pattern with singular SVG elements by animating a fruit bowl's contents. It uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to manage a dynamic dataset of apples and lemons. The visualization sequentially removes, replaces, and filters fruit items in the bowl, showing how `selection.selectAll`, `.enter()`, `.merge()`, and `.exit()` handle transitions for the appended circles, text labels, and the background rectangle. The code explicitly shows data-driven updates through timeouts in `index.js`.

Dec 21, 2023

D3 General Update Pattern (Nested Elements)

This example demonstrates the D3 general update pattern with nested SVG elements, showing how to manage groups containing both circles and text labels as data changes. The visualization begins with five apples, then sequentially removes one fruit, changes one apple to a lemon, and filters out another item, with each transition updating the group elements. Using d3.selectAll, data joins, and enter/merge/exit methods, the code repositions groups and updates circle fill colors and radii through scaleOrdinal color and radius scales. The update pattern highlights how nested elements require separate handling for circles and text within each group.

Dec 21, 2023

D3 General Update Pattern

A D3 visualization demonstrates the general update pattern for handling data joins with animated transitions. It renders five circles as apples using SVG, with the `fruitBowl` function managing enter, update, and exit selections via `selection.data()`, `.enter()`, `.merge()`, and `.exit()`. Sequential timeouts trigger state changes: removing a fruit, replacing an apple with a lemon (changing color and radius via ordinal scales), and filtering out another item. Each update animates circle radii from zero to a scaled value over 1000 milliseconds using `.transition().duration()`.

Dec 18, 2023

D3 General Update Pattern

This example demonstrates the D3 general update pattern for animating data-driven visualizations with SVG circles. It initializes an array of fruit objects and uses D3 v7’s selection methods—including enter, exit, update, and merge—to handle dynamic data changes in a bar-chart-like layout. The code specifically creates five apples via `range` and maps them, then binds this data to circle elements using the `d3.select` API, with transitions and object constancy shown through styled SVG elements. The visualization relies on inline SVG attributes and CSS classes for appearance, without external datasets.

D3 World Population Area Chart

This area chart visualizes the world population in 2015 across leading countries, using the data source from Data Canvas Sense your City. The chart displays population counts over time with time-series data, rendered as a smooth filled area using an SVG path. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.area with curveBasis for the area generator, and d3.axisLeft and d3.axisBottom for labeled ticks, with formatting applied for population values.

D3 Temperature in SF Area Chart

This area chart visualizes one week of hourly temperature data in San Francisco, using a smooth curved line filled with steelblue. The data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The visualization employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area()` with `curveBasis` to generate the filled path, and `d3.axisLeft` and `d3.axisBottom` for gridlines and tick labels. SVG rendering handles all graphics, with margins and labeled axes for time and temperature.

D3 Temperature in SF Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas Sense Your City. The visualization uses D3 v7 to render an SVG with a time-based x-axis and linear y-axis, with the data parsed from a CSV file. The chart includes axis labels, tick marks, and a smoothed line path with a basis curve, styled with steel blue strokes and semi-transparent circles. The axes are labeled "Time" and "Temperature" with gridlines, and the chart's title reads "Weekly Temperature in San Francisco."

D3 Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for cars from the UCI Auto MPG dataset. Each point represents a vehicle, with steelblue semi-transparent circles plotted on axes with gridlines. The visualization is built with D3 v7, using `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axis generation, and a data join to render circles from CSV data. The chart includes axis labels and a title, with styling applied via CSS.

D3 Scatter Plot

This D3 scatter plot displays the population of the world's most populous countries, using a linear scale for the x-axis (population) and a point scale for the y-axis (country names). Each country is represented by a circle, with the chart titled "Top Populous Countries." The code loads data from a CSV file and uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom to create the chart. The x-axis tick labels are formatted to show billions (e.g., "1.44B") using d3.format.

Dec 15, 2023

Customizing Axis of a Bar Chart

This bar chart visualizes the population of the world’s most populous countries, sourced from a Kaggle dataset. It uses a horizontal bar layout with country names on the y-axis and population counts on the x-axis. The chart employs a linear scale for population and a band scale for countries, with custom tick formatting that converts billions to abbreviated labels (e.g., “B”). D3’s axis components are customized by removing domain lines and ticks, and grid lines are added via tick sizing. The chart is rendered as SVG using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom.

Dec 15, 2023

D3 Bar Chart

This bar chart displays the 2020 population of the top 13 most populous countries, sourced from Kaggle. Using D3 v7, the visualization renders population values as horizontal bars via SVG, with a linear scale for the x-axis and a band scale for the y-axis. The code employs `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, compute scales, and draw axes.

Dec 15, 2023

Intro to D3: Happy Face

A yellow circle face with eyes, eyebrows, and an arc-shaped smile demonstrates fundamental D3.js SVG rendering and animation. The code builds the face using D3 selections and shape generators, including `d3.arc()` for the mouth path, while positioning elements with SVG `transform` attributes derived from the viewport dimensions. Eyebrows animate through chained `transition().duration()` calls, moving them down and then up over four seconds. The example uses D3 v7 within a React project, drawing on a static SVG canvas with no external data.

Dec 14, 2023

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using CSS classes and inline attributes. It renders a static scene of colored shapes, some grouped with transforms for scaling and translation, while the CSS applies stroke, fill, and line-join styles to the line and path elements. The code uses native SVG elements directly in HTML, with CSS rules targeting shape classes and groups, without any JavaScript libraries.

Dec 14, 2023

HTML Cars Report

This example displays a static HTML cars report that lists three used vehicles with their model years, names, and prices. It uses plain CSS for styling, including a red highlighted class applied to the first list item, and a monospace font for the body text. The page is built with standard HTML elements like heading and list tags, with no JavaScript or external libraries involved.

Dec 14, 2023