S

sheafallick

@sheafallick·18 public vizzes

Loading thumbnail…

Temperature in San Francisco Scatterplot

This chart shows daily temperature readings in Sheatown over a month, rendered as a scatterplot with a smoothed line overlay. The x-axis maps time using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` for temperature values. The data is loaded from a CSV file via `d3.csv`, with dates parsed and temperatures converted to numbers. The visualization includes gridlines, axis labels, and a title, all drawn as SVG elements using D3 v7. A `d3.line` generator with `curveBasis` creates the connecting path, while circles are styled via CSS with steelblue fill and transparency.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Loading thumbnail…

color and size legends

Two D3 legend components display color and size scales side-by-side in a single SVG. The color legend uses `scaleOrdinal` with named fruit categories and a `colorLegend` function, while the size legend uses `scaleSqrt` and a `sizeLegend` function. Both legends generate groups with circles and text labels, positioned via `spacing` and `textOffset`. The size scale filters out zero values and uses `ticks` to determine displayed values.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion using a horizontal tree layout rendered as SVG with D3.js. The interactive visualization supports pan and zoom navigation through D3’s zoom behavior. Node labels are scaled by depth level, with links drawn using d3.linkHorizontal. The data is loaded from a JSON file containing nested country groupings under a World root node.

Loading thumbnail…

D3.js map - interactive

This interactive map displays world countries shaded in light green against a light blue sphere, with hover highlighting in red. Built with D3.js v7 and TopoJSON, it projects geographic data from the world-atlas countries-50m dataset using a natural Earth projection via d3.geoPath and d3.geoNaturalEarth1. Zoom functionality is handled by d3.zoom, which applies interactive transforms to the SVG group.

Loading thumbnail…

Blank Canvas

A rounded rectangle fills the entire browser viewport, creating a minimal, blank canvas within the SVG element. The visualization uses d3.select to target the SVG and sets its dimensions to match the window's inner height and width. It then appends a single rect element with a 40-pixel corner radius, styled through an external CSS file. The page is fixed to the viewport with hidden overflow, ensuring the shape remains static and unresponsive to interaction.

Loading thumbnail…

D3.js map

This visualization displays a flat, natural Earth projection map of world countries, rendered as a single SVG with light green landmasses and a light blue ocean sphere. It uses D3.js v7 (with `select`, `json`, `geoPath`, and `geoNaturalEarth1`) and TopoJSON’s `feature` method to load and convert country boundaries from the world-atlas dataset. The code appends paths for the sphere and each country, styling them via CSS, and runs entirely client-side in a bare HTML page.

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A row of apples animates in using d3 transitions, with hover toggling a black stroke around the selected fruit. The code uses an ordinal color scale and radius scale, with d3 data joins handling enter, update, and exit. D3’s `transition().duration(1000)` animates circle radii and positions, while mouseover and mouseout events call a `setSelectedFruit` callback to update selection state.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit rendered as SVG circles sit in a row, and clicking one selects it with a black outline. The example demonstrates a stateful selection pattern using D3 v7’s `scaleOrdinal` for color and radius, and a 1000ms transition for entrance, exit, and updates. Over four timed steps, an apple is removed, a lemon replaces an apple, a lemon is added, and another apple is deleted. The `fruitBowl` function handles `enter`, `merge`, and `exit` selections, and `on('click')` triggers a callback to update the `selectedFruit` state.

Loading thumbnail…

Bowl of Fruit (non-animated)

A sequence of five apples and lemons sits in a row above a bowl, with each fruit rendered as an SVG circle colored by type (red for apple, yellow for lemon) and labeled with its name. The example demonstrates data joins in React with D3 v7, using `scaleOrdinal` for color and radius, `selection.enter().append()`, and `merge` to update the visualization over time. Four timed `setTimeout` calls drive changes: removing an apple, converting one to a lemon, adding a lemon, and filtering out another fruit.

Loading thumbnail…

Bowl of Fruit

This example shows a bowl of fruit as animated circles representing apples and lemons over time. Using D3’s scaleOrdinal for color and radius, the visualization updates as fruits are removed, changed, or added, with transitions animating the circle sizes. The scene is rendered in SVG via React, with circle positions calculated by index and vertical centering. D3’s selection and transition APIs handle the lifecycle of entering, merging, and exiting elements.

Loading thumbnail…

Temperature in San Francisco Areachart

This area chart shows daily temperature fluctuations in San Francisco over a month, with a smooth curve tracing values from 31 to 87 degrees. The visualization uses D3.js v7 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the filled path, while `axisBottom` and `axisLeft` add labeled axes with gridlines. Data comes from a local CSV file parsed via `csv()`, and the chart is rendered as SVG within a fixed 960×500 viewport. The maroon area fill emphasizes the temperature range beneath the curve.

Loading thumbnail…

Cars Scatterplot

A scatterplot of car models plots their weight on the x-axis and miles per gallon on the y-axis, with a fixed circle radius of 18 and a red, semi-transparent fill. Each of the five data points from the provided CSV is rendered as an SVG circle. The chart uses D3 v7’s `scaleLinear`, `axisBottom` and `axisLeft` for the axes, which include grid lines and custom tick formatting, alongside a rotated y-axis label and a title. The axes are created via the `select`, `append`, and `call` methods, with data transformed with `csv` and numeric coercion.

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of six cities, with circles positioned along a point scale for city names and a linear scale for population values. The visualization uses D3 v7’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and labeled axes. Population data is loaded from a CSV file via `d3.csv`, and tick labels are formatted using `d3.format` to abbreviate large numbers. The circles are styled with a steelblue fill, and the chart includes a descriptive title.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of six global cities, ordered by name on the y-axis and scaled linearly on the x-axis. It uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting that abbreviates millions to "m". Horizontal gridlines are drawn via negative tick lengths, while the y-axis domain and tick lines are removed. The chart is rendered as SVG, with population data loaded from a CSV file.

Loading thumbnail…

D3 Face

A stylized face is drawn using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for a mouth. The face is centered and built with D3’s `select` and `append` methods. Eyebrows animate via chained `transition().duration(2000)` calls, shifting their position twice. The mouth is created with `d3.arc()` using specified inner and outer radii and angles, demonstrating a simple, declarative approach to constructing and animating geometric compositions in a React context.

Loading thumbnail…

Shapes with SVG & CSS

This example shows how to draw basic shapes like circles, rectangles, lines, and paths using SVG elements styled with CSS. A group of shapes is transformed and recolored, while a line and path are grouped under a class that applies thick black strokes with rounded joins. The code uses plain HTML, CSS, and JavaScript within a React starter template, rendering all graphics via inline SVG markup. The shapes demonstrate layering, coordinate transforms, and cascading style inheritance.

Loading thumbnail…

HTML Cars Report

This example demonstrates a basic HTML cars report, displaying a simple list of three car descriptions in large monospace text. The page uses plain HTML for structure, a linked CSS file for styling, and highlights the first car with the class `.highlighted` in red. It serves as a minimal demonstration of standard web technologies—HTML, CSS, and JavaScript—without any data processing or interactive features. The report shows static, hardcoded content rather than external data.