C

cornshoots

@cornshoots·32 public vizzes

Loading thumbnail…

d3Force experiment

A force-directed network graph visualizes the relationships between emerging technology topics and their subtopics from the EmTechTopics.csv dataset. The example shows a sparse, exploratory interface where data loading and processing occur through d3.csv, with topic and subtopic connections parsed for simulation. The visualization uses d3.forceSimulation but has no rendering implementation, leaving the SVG element blank and the force layout unexecuted. The code demonstrates the setup phase of a force simulation without completing the visual output.

Loading thumbnail…

Knowledge Map Experiment

Five labeled points drift around an SVG canvas in this minimal force-directed network experiment. The visualization uses d3.forceSimulation with forceManyBody and forceCenter to position the nodes, while a tick handler updates their x and y coordinates. Each circle is drawn as an SVG element with a radius of five pixels, and the simulation runs continuously over a fixed 300-by-300 viewport. The example demonstrates a basic setup for dynamic node placement using D3 v5's force layout.

Loading thumbnail…

Selecting a year on a line chart

This line chart shows population growth over time for multiple regions, with a vertical line marking a selected year. Users can move the mouse across the chart to select a different year, which updates the line’s position. The visualization uses D3 v5 to render SVG elements, including axes, line paths with a curve basis, and a color legend. Population data is sourced from UN estimates and medium-variant projections, processed from CSV files. The chart includes interactive mouse events and uses D3’s `scaleTime` and `scaleLinear` for axes.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows how regional populations change over time from 1950 to 2100, with each region drawn as a smooth multi-line path using d3.line with curveBasis. The data comes from UN population estimates, processed by melting wide-format CSV files into tidy long-form data. A color legend using d3.scaleOrdinal with schemeCategory10 identifies each region, while axes are generated with d3.axisLeft and d3.axisBottom with custom tick formatting. The code demonstrates key d3 patterns including nested data grouping via d3.nest and reusable legend components.

Loading thumbnail…

Circles on a map

This map visualization displays the global population distribution for 2018 using circles sized by population count, placed at each country's geographic centroid over a natural Earth projection. The map uses `d3.geoPath` for rendering country boundaries and `d3.scaleSqrt` for circle sizing, with a legend showing population ranges. Users can zoom and pan using `d3.zoom`. Population data comes from a UN dataset (medium variant estimates), joined with TopoJSON world geometry via `d3.json` and `d3.csv`. A color legend marks missing data countries in red.

Loading thumbnail…

LineChart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with each city represented by a distinct colored line and a color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file, and the chart is drawn as SVG with a title and a custom color legend.

Loading thumbnail…

Making a barchart

This bar chart displays the populations of the world’s ten most populous countries, sorted in descending order from China to Mexico. A linear scale maps population values to bar widths, while a band scale positions each country along the vertical axis. The chart renders as SVG using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with data loaded from a CSV file via d3.csv and population values converted to thousands.

Loading thumbnail…

Interactive Map

This interactive map displays country boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using d3.geoPath and an equirectangular projection. Hovering over a country highlights it in blue via CSS, while d3.zoom enables pan and zoom transforms on the map group. Country names from the accompanying TSV file appear as tooltips through SVG title elements, all loaded asynchronously with d3.json and d3.tsv.

Loading thumbnail…

Scatterplot with Menus

An interactive scatterplot displaying the auto-mpg dataset, with dropdown menus that let the user select which data columns to plot on the x and y axes. The visualization updates smoothly with a staggered transition, animating each circle from the center to its new position. The code uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions, along with a custom `dropdownMenu` component that binds options to menu elements. SVG rendering handles the plot, with axis labels and gridlines styled via CSS.

Loading thumbnail…

Chloropleth Map with Interactive Filtering

A choropleth map colors countries by income group, with an interactive legend that filters the map to highlight selected categories and dim others. The map uses d3.geoEquirectangular and d3.geoPath to render countries from TopoJSON world-atlas data, while d3.zoom enables pan and zoom. The color legend, built with d3.scaleOrdinal and schemeBlues, responds to clicks to toggle selection. Hovering a country changes its fill, and a tooltip shows its name and income group.

Loading thumbnail…

Chloropleth Map

A choropleth map colors countries by income group using an ordinal color scale with a spectral scheme. The visualization renders world geography with d3.geoPath and a Natural Earth projection, and supports pan and zoom via d3.zoom. Country names and income groups appear as tooltips, while a custom colorLegend component displays the category labels with colored circles. Data is loaded from TopoJSON and TSV files processed with topojson.feature and d3.tsv.

Loading thumbnail…

Colour and Size Legends

This example demonstrates two distinct legend types for mapping data to visual encodings. A color legend displays ordinal categories—apple, lemon, lime, and orange—paired with distinct hues using `d3.scaleOrdinal`. Adjacent to it, a size legend uses `d3.scaleSqrt` to map a continuous numeric domain from 0 to 10 to circle radii, filtering out zero and reversing tick order for display. Both legends are built with reusable D3 functions that append SVG groups, circles, and text elements, with tick styling applied via CSS classes.

Loading thumbnail…

Node Link Trees

This visualization displays a hierarchical tree of the world’s countries, organized by continent and region, as a node-link diagram. The layout uses a horizontal tree structure, with text labels at each node and connecting paths. Built with D3 v5, it uses the `tree` layout, `hierarchy` to process the JSON data, and `linkHorizontal` to draw the edges. The SVG rendering includes text with a white shadow for readability, and zoom functionality is implemented via the `zoom` event.

Loading thumbnail…

Tree Retry

A tree diagram renders hierarchical data as a horizontal layout of curved links, with the root on the left and leaf nodes extending rightward. The visualization loads JSON data via `d3.json` and computes the layout using `d3.tree` and `d3.hierarchy`, then draws each link with `d3.linkHorizontal` positioned through the tree’s x- and y-coordinates. All elements are rendered as SVG paths scaled to the full viewport, with the body fixed to prevent scrolling.

Loading thumbnail…

Blank Canvas

This example displays a blank, rounded rectangle that fills the entire browser viewport against an empty page. Built with D3 v5 and rendered as SVG, the code uses `select` and `append` to create a single `rect` element. The visual’s dimensions are derived directly from `document.body.clientWidth` and `clientHeight`, and the CSS fixes the body to prevent scrolling. No data or interaction is present; the piece functions purely as a minimalist canvas.

Loading thumbnail…

Lets make a map

This example displays a world map using a natural Earth projection, with countries filled in light green against a dark blue sphere. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` function. The visualization relies on D3 v5’s `geoPath` and `geoNaturalEarth1` for rendering, while the projection path is drawn for the entire sphere. The map is rendered as SVG elements, with country paths and a separate sphere path added to the canvas.

Loading thumbnail…

Bowl of Fruit - Hover to select

A row of fruit circles animates as apples shrink and disappear or transform into lemons, with a black outline highlighting whichever fruit is hovered. The example demonstrates D3 v5 data joins and transitions, using `scaleOrdinal` for color and radius, plus mouse events to update a selected fruit state. SVG circles enter, update, and exit with 1-second transitions as the underlying array changes over time.

Loading thumbnail…

Bowl of Fruit - Click to select

A dynamic bowl of fruit shows five circles—apples and lemons—that rearrange and resize over time as items are removed or change type. Clicking any fruit selects it, highlighting the chosen circle with a black stroke. The visualization uses D3 v5’s `select`, `range`, `scaleOrdinal`, and transitions to animate circle positions and radii, with an SVG render and JavaScript timers driving the scripted state changes.

Loading thumbnail…

Bowl of Fruit General Update Pattern

This example demonstrates D3’s general update pattern for smoothly adding, modifying, and removing SVG circles over time. Using `d3.scaleOrdinal` for color and radius, the code binds fruit data to circles with a key function on `id`. Enter, update, and exit selections are merged, with 1000ms transitions animating positional and size changes. A series of `setTimeout` calls triggers state changes, showing an apple consumed, a lemon replacement, and a removal.

Loading thumbnail…

Singular elements

Five pieces of fruit sit in a bowl as a circle or lemon shape, with apples colored red and lemons yellow. The example demonstrates a D3 data join with enter, update, and exit selections using `selection.data`, `selection.enter`, and `selection.exit`. Over timed intervals, a fruit is removed, a type changes from apple to lemon, and another fruit is filtered out, updating the SVG via the custom `fruitBowl` module. D3 scales `scaleOrdinal` map fruit types to colors, radii, and positions.

Loading thumbnail…

Nested Update Patterns

This example demonstrates nested update patterns for D3 data joins, showing how fruit shapes (apples and lemons) are added, removed, and modified over time. Using the fruitBowl module and local ES6 imports, it applies ordinal color and radius scales to differentiate fruit types. The SVG rendering updates through setTimeout triggers, which pop, replace, and filter items from the fruits array, while the merge pattern handles enter and exit selections for groups containing circles and text elements.

Loading thumbnail…

World Pop Areachart

This areachart displays global population growth over time, using a filled path to emphasize the rising trend from historical data to 2015. The visualization loads a CSV dataset, parses years as dates, and renders an SVG using D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create a smooth, filled curve. Axis grids and labels are generated with `axisBottom` and `axisLeft`, while population values are formatted with abbreviations like “B” for billions. The title and axis annotations are drawn directly on the SVG.

Loading thumbnail…

SF AreaChart

This SF AreaChart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart renders an area path filled in maroon, using a smoothed curve (d3.area with curveBasis) and labeled axes for Time and Temperature. Data is loaded via d3.csv from a remote file and parsed into JavaScript Date objects. The visualization employs d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with tick lines extending across the plot for a grid effect.

Loading thumbnail…

SF Linechart

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The chart uses d3.scaleTime and d3.scaleLinear to map data from a CSV file, rendered as SVG via a d3.line generator with curveBasis. Axis labels, tick marks, and a title are styled through CSS, while d3.axisBottom and d3.axisLeft provide the scales.

Loading thumbnail…

Temp in SF Scatterplot

A scatterplot visualizes a week of hourly temperature readings in San Francisco, plotting temperature against time on axes with gridlines. The chart uses D3 v5’s scaling and axis APIs (`scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`) to map the data, which is loaded via `d3.csv` from a remote dataset. Circles are rendered as SVG elements, with axis labels, a title, and styled ticks. The code removes axis domain lines to emphasize the grid and applies margins to position the plot area.

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a vehicle. Built with D3 v5, the visualization uses `scaleLinear` to map data values to SVG coordinates, `axisBottom` and `axisLeft` for the axes, and `extent` to compute domains. Data is loaded from a CSV via `csv`, and the SVG output renders circles with fixed radius, axis labels, and a title.

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of the ten most populous countries, with circles arranged along a y-axis ordered by country name and an x-axis scaled by population size. The visualization uses D3 v5’s `scaleLinear` for population values, `scalePoint` for country positions, and `axisLeft` with `axisBottom` to render axes. Data loads from a CSV via `csv`, and the SVG circles are appended with fixed radii, while tick labels use the `format` function to abbreviate large numbers.

Loading thumbnail…

Customizing Axes

This example uses a bar chart to display the top ten most populous countries, with population values read from a CSV file and scaled by a factor of one thousand. The chart customizes both axes by removing domain lines, applying a tick format that abbreviates large numbers (converting "G" to "B"), and adding a population label and title using SVG text elements. It builds the visualization with d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The y-axis ticks are styled with a larger font, and the chart includes a grid-like effect with horizontal tick lines.

Loading thumbnail…

Making a face

A yellow cartoon face is drawn on an SVG canvas, with eyes, eyebrows, and a mouth formed by D3 shape primitives. The eyebrows animate upward and downward in a looping transition, while the mouth is rendered using the `d3.arc` path generator. The example demonstrates importing `select` and `arc` from the D3 v5 module, manipulating SVG attributes, and applying chained `transition` calls with a two-second duration.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a hand-coded SVG composition within an HTML page, presenting a static arrangement of primitive shapes, including circles, rectangles, lines, and a path. The visualization is rendered directly in the browser using SVG markup, with a parent group applying a scale transform and a nested group showcasing a translation. The page imports D3 via UNPKG in the README, though the visible code does not use it for data processing or drawing. Styling is applied through a linked stylesheet, which defines classes for highlighting and line attributes, showing the use of CSS selectors on SVG elements.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, using a predefined dataset. It demonstrates asynchronous data loading and modular JavaScript organization. The code imports `getCars` and `generateReport` from local modules, and uses standard JavaScript promises and string formatting to generate a list of vehicles under a specified price threshold. The report is rendered inside an HTML `<pre>` element with a large font size, showing simple data-processing without relying on external visualization libraries.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible starting point for a D3 version 6 project. It renders the text "Hello D3 version 6" prominently in the center of the browser window, using a massive font size. The visualization relies on the `d3.select` API to locate the `body` element and directly set its textual content. The code imports only the `select` function from the D3 library, while the `index.html` file loads the complete D3 v6 library and an external `bundle.js` script. No data source is involved; the output is purely static text.