F

ferneyhoughedward@gmail.com

@pa-stuh·18 public vizzes

Loading thumbnail…

table

This example demonstrates how to populate an HTML table by binding sample data objects to table rows and cells using D3 version 7. The code selects the table body and iterates through an array of data objects, appending a row for each entry and filling six columns with values from the object’s properties. It relies on D3’s selection and data-binding methods (`d3.select`, `selectAll`, `.data`, `.enter`, `.append`, and `.text`) to dynamically generate the table structure. The page also uses a simple CSS style to center the content with a large font size.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for a D3 visualization, using the classic Iris flower dataset. It loads the data from a CSV file and logs it to the console, displaying a blank page with centered text. The code utilizes the D3 v7 library, specifically the `csvParse` and `select` APIs, to parse and access the data. The visualization's primary purpose is to show how to set up a basic D3 project and handle external data files.

Loading thumbnail…

Fork of D3 Starter

A dynamic bar chart animates ten rectangles across the screen using D3 v7. The bars scale in height and width based on their index, with positions computed from the data values. The code selects the body, appends an SVG sized to the window, and uses `d3.range` to generate the dataset. Each rectangle’s position and size are set with attribute functions, creating a diagonal, staggered layout with light-blue fills.

Loading thumbnail…

Fork of D3 Starter

A starter template for D3 version 7, this example demonstrates the basic pattern of importing D3 modules and manipulating the DOM. The page displays the text "Hello D3 version 7" in a large font, using `select` from the d3 package. The code also logs a demonstration array and references remote data sources, including a GeoJSON file of local authority boundaries and a CSV about the Titanic, though these are not rendered visually. The HTML includes the D3 library via a CDN and a separate bundled JavaScript file.

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes World Bank GDP per capita (PPP) data for 2020, assigning colors to countries based on their economic output. The map renders d3.geoPath shapes with a natural Earth projection and a YlGnBu color scheme, using a d3.scaleQuantile scale to bin the data into nine quantile-based classes. Countries missing data appear gray. The visualization fetches both a world atlas TopoJSON file and a CSV dataset via Promise.all, parsing the latter after skipping an initial header offset.

Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Loading thumbnail…

Check

This example demonstrates a scatterplot with five circles positioned on an SVG canvas, each sized according to a numerical value. The visualization is built using D3 version 7, specifically leveraging `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers. The chart maps data from an inline array of objects with `xVal`, `yVal`, and `rVal` properties to positions and radii. The code uses the declarative scale functions to compute the mapping and appends the resulting circles to the SVG element, with the axes rendered at the left and bottom edges.

Loading thumbnail…

Untitled

This example presents a bar chart of total COVID-19 cases by location, using data from a remote CSV file. The chart uses an SVG rendering with a band scale for the categorical x-axis and a linear scale for the numeric y-axis, both configured with d3.scaleBand and d3.scaleLinear. Bars are drawn as SVG rect elements with a fixed fill color, and the x-axis labels are rotated for readability. The code loads data via d3.csv and applies margins to position the visualization.

Loading thumbnail…

Dot & Line Chart Method

This example demonstrates a dot and line chart that plots five data points with varying radii, connecting them with a blue line while rendering each point as a red-stroked white circle. The chart includes linear scales for x and y axes, with axis labels generated via `axisLeft` and `axisBottom`. Built with D3 v7, the visualization uses `scaleLinear`, `extent`, `line`, and `select` to map data values to screen coordinates, drawing SVG paths and circles at full window dimensions. The data is hardcoded as an array of objects with `xVal`, `yVal`, and `rVal` properties.

Loading thumbnail…

Line Chart Method

This example demonstrates how to build a basic line chart using D3 v7. It plots a small dataset of five points with varying radii, rendering a single steelblue path using the `d3.line()` generator alongside axes created with `d3.axisLeft()` and `d3.axisBottom()`. The scales are defined with `d3.scaleLinear()` and `d3.extent()` to map data coordinates to the full browser viewport. Circle radii from the data are divided by 2.5 and stored in marks but are not rendered. The SVG output fills the entire window.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the palmerpenguins dataset, mapping flipper length on the x-axis against body mass on the y-axis. Each circle represents a penguin, with its color indicating species (yellow for Adelie, green for Gentoo, and brown for Chinstrap), and the circle's rx and ry attributes encode bill length and depth, though these do not affect the rendered radius since `r` is set to 5. The visualization uses D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load the data and render SVG circles and axes, with labels styled in cursive and bold fonts.

Loading thumbnail…

"Javascript Practice"

An example of basic SVG circle placement using D3 version 7. The code creates three circles positioned via groups at different screen coordinates, with contrasting stroke and fill colors. It uses `select` to append an SVG element sized to the window, then applies explicit `attr` calls for circle positions and styling, demonstrating straightforward group transforms and child element creation in a D3 SVG canvas.

Loading thumbnail…

Fork of D3 Starter

A static set of overlapping blue, white, red, and yellow circles is arranged on an SVG canvas, with each circle drawn four times at progressively smaller radii to create a layered, target-like appearance. The example demonstrates basic D3 data joins and transitions, using `d3.select`, `d3.range`, and array data to bind circle elements. A brief transition animates the entire SVG group by shifting it via `transition.attr('transform')`, moving the composition diagonally twice. All rendering is done with inline SVG attributes, with no external data source.

Loading thumbnail…

Map

This example visualizes an isochrone map, showing a blue, semi-transparent polygon that represents the area within a 5,000-meter radius of a central point in East Grinstead, UK. The polygon is generated by creating a grid of candidate points and filtering them based on distance. The code uses the Turf.js library for distance calculations and convex hull generation, and renders the result with D3’s `d3.geoMercator` projection and `d3.geoPath`.

Loading thumbnail…

Heart D3

A smiley face built from SVG circles and rectangles in red on a blank canvas demonstrates basic DOM manipulation and animation with D3.js. The eyebrows shift upward over one second, then return to their original position over eight seconds using chained transitions. The code constructs elements by appending to groups, calculates positions from window dimensions, and leverages D3’s `select`, `append`, `attr`, and `transition().duration()` APIs, with a custom triangle symbol added via `d3.symbol()`.

Loading thumbnail…

Heart

A large yellow smiley face rendered with SVG. The face is centered on the screen, with its radius and the positions of the eyes and mouth calculated from the window dimensions. The code uses React and ReactDOM to draw the face, composing a circle for the head and two smaller circles for the eyes within a single SVG element. The stroke width and eye offset are predefined constants, and the face is positioned using an SVG transform.

Loading thumbnail…

D3 Kandinsky Lite

This example builds a generative abstract composition from simple geometric primitives. Red and blue line groups, created with `d3.range` and joined via `selectAll(...).join('line')`, radiate outward with deterministic, linear coordinate formulas. Purple circles and smaller white circles, positioned and sized by `d3.range`, layer over them, creating a playful, Kandinsky-inspired interplay of shapes. Rendered as SVG, the artwork fills the browser window, with `d3.select` driving all element creation and positioning.

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. All data points are rendered as red circles using SVG. The code loads CSV data via `d3.csv`, scales the axes with `d3.scaleLinear` and `d3.extent`, and draws the axes using `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window and uses a fixed margin layout.