F

Fhouston17

@Fhouston17·21 public vizzes

Loading thumbnail…

Intro to D3

This D3.js example renders a static SVG emblem centered on a dark olive green circle with a black outline. Two beige banner arcs, created using the `d3.arc` API, frame the circle’s upper and lower sections. Text is placed along curved paths using SVG `textPath` elements, with the phrase “SEMPER PATIENS” following a lower wavy path and “2 0 0 3” positioned along an upper arc. The visualization demonstrates a declarative SVG construction approach, relying on absolute coordinates and D3’s arc generator for precise path definition.

Loading thumbnail…

Data Tree

A hierarchical data tree displays the geographic structure of World, Asia, and subregions down to individual countries. D3's `tree` layout and `hierarchy` function organize the JSON data, while `linkHorizontal` generates curved path connections between parent and child nodes. The visualization uses d3.v5 with SVG rendering, featuring adjustable pan and zoom through d3's `zoom` event handler, and labels sized according to tree depth using the `text` elements.

Loading thumbnail…

Basic Map with D3

This example displays a world map using an SVG projection, with countries filled in green and the surrounding sphere rendered in turquoise. It uses the d3.geoPath and d3.geoNaturalEarth1 projection APIs from D3 v5, along with the topojson feature function to extract country boundaries from the world-atlas 110m dataset. The map renders by appending SVG path elements for each country, with a sphere outline drawn first to shape the background.

Loading thumbnail…

Chorpleth Map

This choropleth map colors countries by income group using an ordinal color scale from the `d3.scaleOrdinal` and `d3.schemeSpectral` APIs. It projects the world with `d3.geoNaturalEarth1` and `d3.geoPath`, drawing each country as an SVG path. The map is interactive, supporting zoom and pan via the `d3.zoom` event handler, and includes a custom legend generated with `colourLegend`. Data combines TopoJSON country boundaries with TSV attributes from the World Atlas dataset.

Loading thumbnail…

Colour and Size Legends

This example demonstrates two types of legend components rendered as SVG in D3 v5: a colour legend using `scaleOrdinal` with discrete fruit categories, and a size legend built on `scaleSqrt` for continuous numeric values. The colour legend maps domain values to colored circles with labels, while the size legend displays tick marks with circle radii proportional to data values. Both legends reuse enter/merge/exit selections for dynamic updates, with tick text and circles styled via CSS. The code defines reusable `colourLegend` and `sizeLegend` functions, called with custom spacing, offsets, and tick counts.

Loading thumbnail…

Blank Canvas

This example fills the browser viewport with a single rounded rectangle rendered in SVG. The visualization is a blank canvas, created by selecting the `svg` element and setting its width and height to match the document body’s client dimensions, then appending a `rect` with a corner radius. The code uses D3 v5’s `select` function to manipulate the SVG and relies on CSS to fix the body’s position and hide overflow, ensuring the canvas spans the entire screen.

Loading thumbnail…

TC Analysis

A scatterplot shows monthly aviation accident totals in Canada from 1978 to 2019, plotting each month against its total count. The chart uses D3 v5 with SVG rendering, scaling both axes via `scaleLinear` and applying `axisLeft` and `axisBottom` for tick marks. Circles are appended to the SVG and animated on hover using `transition` to enlarge their radius. Data is loaded from a CSV file, with totals parsed as numbers and rendered with axis labels and a title.

Loading thumbnail…

TC Analysis

A scatter plot of annual aviation accidents in Canada from 2000 to 2019 uses D3 v5 with an SVG rendering. It maps the Year and Total columns from a CSV file onto linear scales, with axis labels “Year” and “Annual Accidents.” Circle elements represent data points, and mouseover events trigger transitions that increase the circle radius, while mouseout returns it to normal. The chart title, axis text, and formatting are defined within the index.js file.

Loading thumbnail…

2 dimensional Scatter Plot testing data labels and mouse hover

This scatter plot displays aircraft price against manufacture year from a seven-row CSV dataset. Each aircraft type appears as a semi-transparent svg circle with a tooltip title showing its name; hovering triggers a d3 transition that enlarges the circle radius. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv for data loading, with margins and labels specified in the index.js file.

Loading thumbnail…

Interactive Map

This interactive map displays world countries on a natural Earth projection, rendered as SVG paths using d3-geo’s `geoNaturalEarth1` and `geoPath`. It loads geographic data from the World Atlas TopoJSON and matches country names via TSV metadata. Users can pan and zoom using d3.zoom, which applies a transform to the map group. Countries are styled with silver fills and turn orange on hover via CSS.

Loading thumbnail…

Bowl of Fruit General Animated Transitions

Five fruit circles render in an SVG bowl, with apples in red and lemons in yellow. Users can click a fruit to highlight it with a black stroke. Over time, fruits are removed and one apple changes to a lemon, with `transition().duration(1000)` animating radius and x-position changes. The code uses D3 v5 selections, `scaleOrdinal` for colors and radii, and `merge` to coordinate enter-update-exit transitions.

Loading thumbnail…

Bowl of Fruit General Update Pattern

A bowl of fruit visualizes a dynamic dataset of apples and lemons as circles inside a grey bowl, with each fruit's type encoded by color and radius using D3's `scaleOrdinal`. The example demonstrates D3's general update pattern, where `selection.selectAll` and `.merge()` handle entering, updating, and exiting elements as the fruit array changes over time. Through timed `setTimeout` calls, the code removes fruit, swaps an apple for a lemon, and filters the array, animating the SVG circles and labels to reflect the data mutations.

Loading thumbnail…

Basic Area Chart

This basic area chart visualizes daily maximum temperatures across the first 14 days of a month, with the x-axis mapping the day and the y-axis mapping temperature in degrees Celsius. The area is filled in maroon beneath a curved line generated using d3.area with a basis curve, while d3.scaleLinear and d3.axisLeft and axisBottom construct the axes. Data is loaded from a CSV file, and the SVG rendering includes axis labels and a title, with tick lines extended across the chart for readability.

Loading thumbnail…

Basic Line Chart

This basic line chart visualizes temperature readings over the first ten days of a month, with each day plotted on the x-axis and temperature in Celsius on the y-axis. The chart includes labeled axes, a curved trend line, and semi-transparent data point circles, all rendered as SVG. The code uses D3 v5 functions including `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to generate the scales, axes, and smoothed path from the CSV data.

Loading thumbnail…

2 dimensional Scatter Plot

A two-dimensional scatter plot displays the relationship between aircraft price and year of manufacture, with each data point representing a specific aircraft model. The visualization uses D3 v5 with SVG rendering, plotting seven aircraft types across a linear scale for both axes. The chart includes labeled axes, gridlines, and a title, with interactive hover effects that enlarge data points using D3 transitions. Data is loaded from a CSV file using the `csv` function, and the code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to construct the visualization.

Loading thumbnail…

Basic Bar Chart

This example displays a basic horizontal bar chart comparing quantities across different aircraft types. The chart uses D3 v5 to render SVG rectangles, with margins, axis labels, and a title. It reads data from a CSV file and utilizes `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for the axes. The bars are filled in steelblue, and tick lines are styled with a light gray color.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. It shows how shapes can be grouped and transformed using SVG’s `g` elements with `transform` and `translate` operations. The rendering uses pure SVG embedded directly in the HTML, with a linked `styles.css` file applying stroke color, width, and line-join properties to the line and path elements. No external data or JavaScript libraries are involved; the visualization is static and relies entirely on markup and CSS styling.

Loading thumbnail…

Aircraft Accident Report

This example presents a static review of aircraft accidents in Canada, organized by province, aircraft type, and year. The page displays a title and a simple list of sorting options, with the current selection clearly highlighted in red. Built with plain HTML and CSS, it uses a monospace font at a large size for readability. The interface provides a minimal, text-based overview of the data categories, though no interactive charts or visualizations are yet implemented.

Loading thumbnail…

1 dimensional Scatter Plot

A one-dimensional scatter plot displays discrete quantities for categorical food items, with each circle positioned along a linear scale for quantity and a point scale for item names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering circles as SVG elements. Data loads from a local CSV file containing item and quantity pairs. The chart includes labeled axes, a title, and horizontally aligned tick marks that extend across the plot area to aid comparison.

Loading thumbnail…

Bar Chart

A horizontal bar chart displays the number of engines for various commercial aircraft models, from single-engine PC-12s to four-engine A340s and B747s. The visualization uses D3 v5 with an SVG renderer, reading aircraft and engine counts from a CSV file. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate labeled axes with gridlines.

Loading thumbnail…

Intro to D3

This example demonstrates how to build a simple face using basic SVG shapes in D3, with a lime circle for the head, black circles for eyes, and an arc-based mouth. The left eye remains static while the right eye animates horizontally through chained `transition().duration()` calls. All elements are created using D3 selections and the `arc` generator from the d3-shape API, rendered as SVG within a 960x500 viewport.