B

BKirst3

@BKirst3·27 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how color and size legends can be created using D3.js v6, displaying three categorical items (apple, lemon, lime) mapped to distinct colors. It shows two legends: one for color encoding using a categorical color scale and another for size representation through circle radius. The implementation uses a custom `colorLegend` function that leverages D3's selection API with `selectAll`, `enter`, `merge`, and `exit` patterns to manage SVG groups of circles and text labels. The legend items are vertically spaced and annotated with text labels, with the entire SVG rendered using vector graphics.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The chart uses D3 scales (scaleLinear), axes (axisBottom, axisLeft), and SVG circles to render the data. A dropdown menu, built with a custom d3 module, lists dataset columns but currently only logs selections to the console rather than updating the chart. The visualization includes labeled axes, grid lines, and a title, with styling applied via CSS classes.

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries using a natural Earth projection, with country boundaries rendered as interactive SVG paths. The visualization uses D3 v6 and TopoJSON to load and convert world-atlas data from unpkg, employing `d3.geoNaturalEarth1` and `d3.geoPath` for projection and path generation. Hovering over a country changes its fill from green to red, while a zoom behavior (`d3.zoom`) allows panning and scaling the entire map. The sphere background is filled blue, and country names appear as tooltips via SVG title elements.

Loading thumbnail…

Line Chart

This line chart visualizes world population over time by region, with each region drawn as a distinct colored line on an SVG canvas. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curveBasis, and `d3.nest` to group data. Population estimates from 1950–2014 and medium-variant projections from 2015–2100 come from UN datasets loaded via `d3.csv`. A color legend using `d3.scaleOrdinal` maps regions, and a vertical line marks the year 2021, with mouse interaction logging hovered years to the console.

Loading thumbnail…

Selecting a Year on a Line Chart

This example shows a line chart of population over time for world regions, using a vertical grey line to highlight a selected year (2021). The chart is rendered with SVG, and the code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest to group data by region. A transparent rectangle covers the plot area, and its mousemove event uses d3.mouse and xScale.invert to log the year under the cursor. Data comes from the UN population estimates and medium variant CSV datasets, processed with d3.csv and d3.timeParse.

Loading thumbnail…

Line Chart with Multiple Lines (Square Root)

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. It uses D3's `scaleTime` and `scaleSqrt` to map time and temperature, with multiple lines colored via `scaleOrdinal` and `schemeCategory10`. The visualization emphasizes Rio de Janeiro by showing its data points as circles and value labels, while a legend indicates rank. The code leverages D3's `nest` for grouping, `line` with `curveBasis` for smoothing, and renders as an SVG with styled paths and axis labels.

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, organized by continent and region, in a tidy tree layout. The code uses D3.js v6 with the `d3.tree` and `d3.hierarchy` to calculate node positions, and `d3.json` loads the nested country data from data.json. Horizontal links connect parent and child nodes, while text labels display each country or region name, with font size scaled by tree depth. Panning and zooming are enabled through the `d3.zoom` behavior, rendered as an SVG.

Loading thumbnail…

Blank Canvas

This example displays a single rounded rectangle filling the entire browser viewport, adapting its dimensions to the window’s client area. The visualization uses D3 v6 selections via the `d3.select` API to target the SVG element, then appends a `rect` with corner radius (`rx`) set to 40. The SVG’s width and height are derived from `document.body.clientWidth` and `document.body.clientHeight`, with CSS fixing the body to the screen edges and hiding overflow.

Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and the sphere outline in blue. It uses a Natural Earth projection to display the globe. The visualization loads geographic data from the World Atlas TopoJSON file and applies D3’s `geoPath` to generate the country shapes. The code demonstrates a straightforward pipeline with `d3.json`, `topojson.feature`, and simple SVG path elements, styling the map for clear visual separation.

Loading thumbnail…

Fork of Bowl of Fruit (Hover to Select)

This example demonstrates a dynamic fruit bowl visualization where apples and lemons appear, transform, and disappear over time. A black stroke highlights the currently hovered fruit, with the selection state cleared on mouseout. The code uses d3 v6 APIs including `scaleOrdinal` for color and radius mapping, `selection.enter`/`exit` with `transition.attr` for smooth size changes, and `selection.on` for mouse events. The SVG circles are bound to data objects with unique IDs via `data(fruits, d => d.id)`.

Loading thumbnail…

Bowl of Fruit (Click to Select)

Circles representing apples and lemons animate into a bowl-like row, with each fruit shrinking or disappearing as data updates over timed intervals. Clicking any circle selects it, highlighting its stroke in black. The example uses D3 v6 with `scaleOrdinal` for color and radius mapping, and combines enter, merge, and exit selections with 1000ms transitions. SVG rendering and click handlers drive the interactive state changes.

Loading thumbnail…

Nested Example

A fruit bowl visualization demonstrates nested selections in D3.js, showing five fruit shapes in a brown bowl that updates over time. Apples appear as red circles, and one changes to a yellow lemon while another fruit is removed. The code uses `selection.selectAll`, `selection.enter`, and `selection.merge` to bind fruit data to SVG groups, with `d3.scaleOrdinal` mapping fruit types to colors and radii. Animated updates occur via `setTimeout` calls that modify the fruits array and re-render the scene.

Loading thumbnail…

Bowl of Fruit

Animating a bowl of fruit, this example demonstrates D3’s enter, update, and exit pattern on SVG circles. Apples and lemons, distinguished by red and yellow fills, shrink and expand their radii over one-second transitions as items are removed, replaced, or changed. The code uses `d3.scaleOrdinal` for color and size, `selection.data` with an id accessor, and chained `transition().attr` calls to morph circle properties.

Loading thumbnail…

Fork of Line Chart with Multiple Lines (Log)

This fork of a line chart visualizes one week of temperature readings in cities worldwide, sourced from the Data Canvas - Sense Your City project. The chart uses `d3.scaleLog` for the temperature axis and `d3.scaleTime` for time, with SVG rendering via D3 v5. A legend is rendered with a `colorLegend` function, and circles with value labels are added every 10th data point for Rio de Janeiro. The code nests data by city using `d3.nest` and draws smooth lines with `d3.line` and `d3.curveBasis`.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays a week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Multiple colored lines represent each city, with a highlight on Rio de Janeiro showing temperature values at regular intervals. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, along with d3.nest to group data by city. A custom colorLegend function renders the legend, while axes are generated using d3.axisBottom and d3.axisLeft. The SVG rendering applies d3.line with curveBasis for smooth paths.

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, sourced from the Data Canvas - Sense Your City project. Each circle represents a temperature reading, rendered as an SVG using D3 v5. The code employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with gridlines and labeled axes.

Loading thumbnail…

Temp in San Fran Scatter Plot

A multi-line time-series chart displays temperature readings across several cities, with each city’s data drawn as a colored, semi-transparent smooth curve. The visualization uses d3.scaleTime, d3.scaleLinear, d3.nest, and d3.line with curveBasis to generate the paths in an SVG. Data comes from a CSV file loaded via d3.csv, and axes are rendered using d3.axisBottom and d3.axisLeft with gridlines.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of eight countries, with each circle positioned along a horizontal axis scaled by population and a vertical axis listing country names. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and labeled axes. Data from a CSV file is parsed, with population values multiplied by 1000, and formatted using a custom tick formatter that converts abbreviations to billions. The chart includes gridlines, axis labels, and a title, all styled via external CSS.

Loading thumbnail…

Org Network Graph

This visualization uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to display three organizational nodes from the Arts Web dataset as gray circles connected by black lines. The SVG rendering positions node labels directly on top of each circle, with circle size representing the node’s size value. During each simulation tick, the positions of circles, text, and lines update dynamically, showing the network’s layout as forces pull connected nodes together.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the eight most populous countries, using population data from a CSV file. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles. Axis ticks are formatted with `format('.3s')`, and the y-axis labels are cleaned by removing domain lines. The visualization also includes a custom title and an axis label for population, with all styling handled through CSS.

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with D3.js, rendered as SVG shapes. The face uses circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. The eyebrows animate by moving downward and back upward over six seconds using chained `transition` calls with a 3000-millisecond duration. The code constructs the face using `d3.select`, `d3.arc`, and `d3.transition` APIs on the SVG canvas.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A D3.js smiley face animates its eyebrows in a looping vertical motion, shifting up and down every two seconds. The face is drawn entirely with SVG primitives: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc` generator for the mouth. The code uses `d3.select` to manipulate the SVG canvas, handles mouse events implicitly through transitions, and relies on D3 v5's `transition().duration()` method to animate the eyebrow group's transform attribute. The layout is centered via a translation transform based on the viewport dimensions.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS styling to create a static graphic. It shows circles, rectangles, a line, and a path, with some shapes inheriting presentation attributes like fill, stroke, and stroke-width from a group, while the line and path are styled through a CSS class. The SVG element has a scale transform applied, and the code uses native SVG elements and a linked stylesheet.

Loading thumbnail…

HTML Cars Report

This example displays a simple list of three used cars with model names, years, and prices, highlighting one vehicle in red. It is a static HTML report that relies on standard web technologies: plain HTML for structure, an external CSS file for styling, and CSS class selectors to apply the red highlight. The page uses no JavaScript libraries or data-loading mechanisms; the entire dataset is hardcoded directly in the markup. Its straightforward layout and monospace font emphasize readability over interactivity.

Loading thumbnail…

Fork of Cars Report

This example shows a simple asynchronous report generator for a car inventory. It displays a filtered list of cars under a given price threshold, formatted as text lines. The code uses JavaScript modules and Promises: `getCars()` returns a Promise that resolves a parsed JSON array after a simulated delay, while `generateReport()` filters and maps the data using `Array.filter` and `Array.map` with a custom `formatCar` function. The final message is written into the DOM via `textContent`.

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, shown as large text on a blank HTML page. It imports a JSON array of car objects via a custom `cars.js` module and parses it with `JSON.parse`. The React-based `index.js` selects the first element and writes its `make` property into the page using `document.getElementById` and `textContent`. The visualization is minimal, relying on plain CSS inline styling for font size rather than any charting library.