J

Joachim Klug

@joachimklug·35 public vizzes

Loading thumbnail…

Cars 2

A scatterplot displays the relationship between car year and horsepower for a dataset of automobiles, with red semi-transparent circles marking each vehicle. The visualization uses D3 version 6 with SVG rendering. It employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct the axes, which include grid lines stretching across the plot. Axis labels and a title are added manually. Data is loaded from a CSV file using `csv` and parsed with numeric type coercion before rendering.

Loading thumbnail…

Fork of Stylized Line Chart

A temperature time series for one week in San Francisco is shown as a smooth, stylized line chart. The visualization uses React to render SVG elements and D3 (d3.scaleTime, d3.scaleLinear, d3.line, d3.curveNatural) to compute scales and the path. Axis ticks and labels are generated with custom React components, and the data is loaded as CSV via d3.csv.

Loading thumbnail…

Fork of Polished World Map

This map visualizes global country boundaries using a Natural Earth projection rendered as SVG. It displays landmasses in teal, graticules in gray, and interior borders in lighter teal, all styled through CSS. The code leverages React with d3-geo functions `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic shapes. Data comes from the World Atlas TopoJSON, processed via `topojson.feature` and `topojson.mesh` to extract land polygons and interior boundaries.

Loading thumbnail…

Fork of Points on a Map

A world map displays cities with populations exceeding 50,000 as small teal circles, projected using the Natural Earth projection via `d3.geoNaturalEarth1` and rendered as SVG paths with `d3.geoPath`. Country boundaries and graticules come from World Atlas TopoJSON data, styled with muted gray fills and strokes. React fetches city coordinates from a CSV using `d3.csv` and renders them as `circle` elements, while `topojson`’s `feature` and `mesh` functions process the atlas topology for landmasses and interior borders.

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, using React to construct SVG marks and D3.js scales for positioning. The plot maps petal length and petal width to the x and y axes, while species determines the color of each circle, drawn with D3’s `scaleOrdinal` and `scaleLinear`. Axes are rendered via custom SVG components, with tick marks and labels styled through CSS. Data is loaded asynchronously using D3’s `csv` method, and a tooltip is provided via SVG `<title>` elements.

Loading thumbnail…

Fork of Stylized Line Chart

This visualization shows a line chart of weekly temperature readings over time for San Francisco, with the data sourced from the Data Canvas Sense Your City dataset. The chart displays the temperature variable against a timeline, using a smooth natural curve to connect data points, rendered as an SVG within a React application. The code leverages d3.v5 APIs including `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` for scaling and path generation, while the `csv` function loads the remote dataset, and custom React components handle axis and mark rendering. The chart features labeled axes, a minimal color palette of teal and gray, and tick marks styled via CSS.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020 based on United Nations World Population Prospects data. Using React with SVG rendering, it employs d3.scaleBand for the categorical y-axis and d3.scaleLinear for the x-axis population values, with d3.format to convert raw numbers into abbreviated tick labels. The visualization includes left and bottom axes, horizontal bars with native SVG tooltips showing population magnitude, and a clear axis label for the quantitative dimension.

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars with x-axis ticks and y-axis country labels. Built with React and D3, it loads United Nations population data for 2020 from a CSV file, then uses `scaleBand` and `scaleLinear` to position the bars and axis ticks. The SVG output is rendered through React's `ReactDOM.render`, with the chart dimensions and margins defined in the code.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial pie chart, with each slice colored according to its corresponding hex value. The code uses React hooks (useState, useEffect) to fetch and store the data from a CSV file listing CSS color names, then applies D3’s pie and arc generators to compute the layout. The resulting SVG paths are rendered by React, with each color’s name shown as a tooltip via a title element. The chart uses an outer radius spanning the full width of the viewport.

Loading thumbnail…

Fork of Vega-Lite API Template

A stacked bar chart displays the distribution of religious affiliations across countries, using a dataset of the top 20 countries by religious population. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, and incorporates D3 for data loading. The chart encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing religion details. The design is customized via a config object for axis and label styling, and the visualization fills the browser window.

Loading thumbnail…

Modify the face

A stylized face composed of overlapping SVG shapes is rendered with React, using the D3 `arc()` generator to create a mouth and basic circle elements for the head and eyes. The face is drawn as a yellow circle with a black stroke, positioned at the center of the viewport, and includes a Gaussian blur filter applied to the head. The eyes are simple circles offset from the center, while the mouth is an arc path generated with D3’s `arc()`. The example demonstrates how D3’s geometry helpers can be integrated within a React component to build a static, SVG-based illustration.

Loading thumbnail…

Fork of React Starter

This example renders a simple yellow smiley face as an SVG graphic inside a React application. The face, eyes, and mouth are drawn using D3’s `arc()` generator and basic SVG shapes, with all styling handled in CSS. The component uses React’s `ReactDOM.render()` to mount the visualization, while D3 v6 supplies the arc path for the mouth. The graphic fills the entire viewport, with the face radius calculated from the window dimensions.

Loading thumbnail…

Smilie face part I

A simple smiley face is drawn as three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The example uses plain SVG elements created directly in the HTML markup, with CSS classes styling the face and eyes. No JavaScript libraries or data sources are involved; the rendering relies solely on SVG’s native circle elements and positioning attributes within a 960×500 viewBox. It demonstrates basic geometric composition and styling without interactive or dynamic behavior.

Loading thumbnail…

Let's make a map D3.js

This example displays world countries on a rotating orthographic globe rendered as an SVG sphere with light green landmasses. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON using TopoJSON’s `feature` method. D3’s `geoOrthographic` projection and `geoPath` generate the country outlines, while the sphere background is drawn using a GeoJSON Sphere object. The code imports specific D3 modules (`select`, `json`, `geoPath`, `geoOrthographic`) and styles the map with CSS classes.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries according to their economy, using a categorical color scale and an interactive legend to filter by income group. Built with D3 v5, it projects geographic data from the world-atlas topojson using `geoNaturalEarth1` and renders each country as an SVG path via `geoPath`. The legend, generated through a separate module, allows clicking to highlight or dim countries by color value, while a zoom interaction adjusts the projection transform.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature measurements in San Francisco, plotting timestamps along the x-axis against temperature values on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, with d3.axisBottom and d3.axisLeft rendering the labeled axes. A smooth line is generated using d3.line with the curveBasis interpolation, and the data is loaded asynchronously from a CSV file using d3.csv. The SVG output includes axis labels, a title, and styled grid lines.

Loading thumbnail…

Color and size legend vertical

This example shows two vertical legends in a single SVG: a color legend mapping four fruit names to distinct colors, and a size legend mapping a numeric scale to circle radii. The color legend uses `d3.scaleOrdinal` with a custom domain and range, while the size legend uses `d3.scaleSqrt` to generate five tick values via `ticks`. Both legends are built through reusable functions that render groups of circles and text using D3’s selection and merge API, with spacing and text offsets controlled by parameters passed in the `call` method.

Loading thumbnail…

Color and size legend horizontal

A horizontal legend displays ordinal color and size encoding for two fruit categories, apple and lemon, using distinct red and yellow circles. Built with D3 v6, the visualization applies `scaleOrdinal` to map domain values to colors and a custom `colorLegend` function to position each legend item along the x-axis. SVG groups contain circles and text labels, with spacing and offsets controlled by passed properties, while the legend updates cleanly through enter/merge/exit selections.

Loading thumbnail…

Bowl of fruit WITH BOWL

Five fruit circles representing apples and lemons sit in a rounded rectangular bowl on an SVG canvas, with apples colored red and lemons yellow. Using D3 v6 data joins with transitions, the visualization animates changes over time: apples disappear, one apple transforms into a lemon, and a fruit is removed entirely, with the bowl width adjusting dynamically. A color scale (scaleOrdinal) maps fruit types to fill colors, while transitions animate radius and position changes over one-second durations.

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion using a horizontal tree layout. The code renders an SVG with d3.tree and d3.hierarchy to position nodes, while d3.linkHorizontal generates the curved connecting paths. Interactive zooming is enabled through d3.zoom, and text labels display country names with font sizes decreasing by depth level. The data comes from a nested JSON file containing geographic groupings, and nodes are labeled with d3 selections appending text elements styled with Playfair Display font.

Loading thumbnail…

Zoomable map

This example displays an interactive world map with countries colored in green and oceans in blue. The map automatically zooms and pans when the user scrolls or drags, smoothly adjusting the projection within a defined scale range. The visualization uses d3.geoNaturalEarth1 for the projection, d3.geoPath to render geographic shapes, and d3.zoom for pan and zoom controls. It loads country boundaries from the `world-atlas` GeoJSON dataset and uses `topojson.feature` to convert them into GeoJSON features.

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the browser window, rendered as an SVG canvas. The visualization demonstrates a minimal scene setup using D3 v6, where the page dimensions define the SVG’s width and height. The code selects the SVG element, sets its attributes, and appends a single styled rectangle via D3’s `select` and `append` methods. No data is loaded or mapped; the focus is purely on establishing an empty visual field with the d3 library and inline SVG markup.

Loading thumbnail…

Bowl of fruit - Hover to select

Five pieces of fruit sit in a row on a neutral background. Hovering over a fruit selects it with a black outline. A timed script removes fruit, converts an apple to a lemon, and filters the list, using D3’s selection API with merge, exit, and transition methods to animate the changes over one-second durations via `.attr('r', 0)` and `.attr('r', d => radiusScale(d.type))`. The fruit types are distinguished by ordinal color and radius scales.

Loading thumbnail…

Bowl of fruit - Click to select

Five fruit circles render as apples and lemons in a bowl, with a click selecting a fruit and highlighting it with a black outline. The D3.js code uses a data join with enter, update, and exit selections, animating radius changes via `transition().duration(1000)`. Ordinal scales map fruit types to colors and sizes, while a random ID identifies each element for stable updates across timed data mutations.

Loading thumbnail…

Bowl of fruit animated

Five fruit circles animate inside an SVG canvas, with apples in red and lemons in yellow. A series of timed mutations removes, replaces, and filters the data, demonstrating enter, update, and exit transitions. The `fruitBowl` function uses D3's `scaleOrdinal` for color and radius mapping, while the `transition()` API animates circle radii and x-positions over one second. Data is generated in `index.js` with `range` and random IDs.

Loading thumbnail…

Nested Elements Animated

This example demonstrates animated transitions for a set of fruit items, where apples and lemons are represented as colored circles with labels, scaling in and out as items are added, removed, or modified over time. Built with D3 v6 and using the `select`, `range`, and `scaleOrdinal` APIs, the visualization applies a custom `transition().duration(1000)` to animate the `transform` attribute for scale effects. The data is a simple in-memory array of fruit objects, and rendering uses SVG elements (`g`, `circle`, `text`) managed through D3’s selection and merge operations.

Loading thumbnail…

Nested Elements

Five circles, alternately sized and colored red or yellow to represent apples and lemons, are arranged horizontally. The visualization demonstrates nested SVG elements, using D3 v6 to manage dynamic updates. Data updates trigger transitions: an apple is eaten, one apple is replaced by a lemon, and finally an apple is removed, showing how the chart handles changes in data over time. The code uses D3's `select`, `range`, and custom `scaleOrdinal` functions to create and update the SVG groups, circles, and text labels.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year up to 2015, using a smooth curve filled in maroon. The x-axis maps time via `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` with tick formatting that abbreviates billions. Data is loaded from a CSV using `d3.csv`, and the path is generated with `d3.area()` and `curveBasis`. Axes and labels are built with `d3.axisBottom` and `d3.axisLeft`, rendered as SVG.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays a week of temperature fluctuations in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a curve basis to create the filled path. Data is loaded from an external CSV file via `d3.csv`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled axes and a title, with gridlines styled through tick marks.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. Circles represent individual data points, colored steelblue, set against a clean white background with gridlines and labeled axes. The visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for ticks, and loads CSV data from a remote URL. Rendering is done via SVG, with styling applied through external CSS.

Loading thumbnail…

Cars

This scatterplot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() for both axes, and d3.axisLeft and d3.axisBottom to render ticks with grid lines. Axis labels and a title are added as SVG text elements, while the chart is drawn using SVG circles within a margin-based layout.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the nine most populous countries, with each circle positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, with circles rendered as SVG elements. Data comes from a CSV file and is formatted with tick labels using the `.3s` format specifier, converting values like billions to a readable scale. Grid lines are created through negative tick sizes, and the chart includes custom axis labels and a title.

Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of the nine most populous countries, using population values loaded from a local CSV file. The chart customizes the bottom axis with a tick formatter that converts large numbers into abbreviated units (e.g., "G" becomes "B"), draws light gray grid lines, and removes the default axis domains. It uses D3 v6 APIs like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the scales and axes, with SVG rectangles for the bars and styled text for labels and title.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population data for nine countries, using a CSV file as the data source. The visualization scales the bars with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, rendering axes via `d3.axisLeft` and `d3.axisBottom`. It loads data with `d3.csv`, multiplies population values by 1000, and appends SVG rectangles to the chart.

Loading thumbnail…

Let's make a face with D3.js

A yellow smiley face is drawn in SVG, with circles for eyes, rectangles for eyebrows, and a path created using the d3.arc generator for the mouth. The face animates as the eyebrow group performs a transition.attr on its transform, moving up and down over two seconds in each direction. Built with D3 v6, the code uses select to target the SVG element and applies geometric attributes like cx, cy, r, and rotation transforms to compose the facial features.