S

SchmittYannic

@SchmittYannic·53 public vizzes

Loading thumbnail…

Boxplot testing

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

Loading thumbnail…

Linechart Version 5

This interactive visualization lets users explore temperature data over time through either a line chart or an area chart, with dropdown menus to select axes and a grouping variable that triggers a color legend. The charts are rendered as SVG with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes from `axisBottom` and `axisLeft`, and a tooltip that updates on mouse movement. A slider adjusts point opacity, a number input changes line width, and a button toggles between chart types.

Loading thumbnail…

updated donutchart

This example shows an animated donut chart that displays a percentage value at its center and updates its arc and color gradient automatically. The chart visualizes a data array where the third element (80%) drives the arc length and determines a six-stop linear gradient color scheme ranging from red to green based on the value. Built with D3 v5 and React, it uses `d3.arc` for the donut geometry, `transition.attrTween` with an interpolator to smoothly animate the arc between states, and a toggle button to switch between two datasets. The SVG rendering includes a static gray background arc and a foreground path filled via a dynamically configured `linearGradient`.

Loading thumbnail…

Histogram

This histogram displays the distribution of a selected weather-related column, such as temperature, from a San Francisco weather dataset. The chart updates with smooth transitions when a different input column is chosen from a dropdown menu or when the bin count is adjusted via the number input. Built with React and D3 v5, it renders as SVG and uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`. Interactive tooltips highlight each bar and show its class range and frequency on mouseover.

Loading thumbnail…

Scatterplot Version 2

This example shows how an interactive scatterplot lets users explore relationships between variables in the classic 1970s automobile fuel-efficiency dataset. Through dropdown menus, users select which numeric columns (such as miles per gallon, horsepower, or weight) map to the X and Y axes, and optionally group points by model year or origin via a categorical legend. A slider and numeric input control circle size and opacity. Built with React and D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with animated transitions on SVG circles, plus a custom tooltip that appears on mouseover, displaying the values for the currently selected axes.

Loading thumbnail…

Linechart Version 4

This interactive visualization explores San Francisco weather data, allowing users to switch between line and area charts for different variable combinations. Built with React and D3 v5, it features animated transitions between chart types, dropdown menus for selecting axes and grouping, and a slider to adjust point opacity. The implementation uses D3 scales, axes, and SVG paths with transitions, while a custom tooltip provides detailed values on mouseover. A color legend appears when data is grouped by category.

Loading thumbnail…

barChart and pieChart V3

This example shows how interactive bar charts and pie charts can be built with React and D3 v5, allowing users to switch between chart types and select different categorical columns from a dropdown menu. The visualization displays absolute frequencies of student grades and degree programs, with hover tooltips showing values or percentages, and animated transitions when switching data. It uses D3’s scaleBand, scaleLinear, scaleOrdinal, nest, pie, arc, and axis components, rendered as SVG with transitions and animation delays, plus custom tooltip handling via mouse events.

Loading thumbnail…

Boxplots V2

This example shows a set of boxplots for multiple numerical columns from a small dataset. Users can toggle checkboxes to include or exclude columns, and the chart updates with an animated transition. The visualization is built with React and D3 v5, using `d3.quantile` to compute quartiles, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG with a custom tooltip that displays summary statistics on hover. Data is hardcoded in the script.

Loading thumbnail…

barChart and pieChart V2

This interactive visualization lets users explore categorical data through bar and pie charts, dynamically switching between chart types and selecting which data column to aggregate. It displays absolute frequencies for university student grades across different degree programs. The implementation uses React with D3 v5, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for the bar chart, and `d3.pie` with `d3.arc` for the pie chart. Both charts feature animated transitions via `transition().duration()`, hover tooltips, and interactive dropdown menus for column selection.

Loading thumbnail…

multiple boxplots with Scale changing buttons and Deselection options through checkboxes... toolkit broken

This example displays multiple boxplots for four categories of numeric data, with controls to switch the y-axis between linear and log10 scales. Users can toggle entire categories on and off using dynamically generated checkbox labels. The visualization renders as SVG and uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. A tooltip is partially implemented but not functional; the code references d3.v5 and is adapted from an external bar chart and toolkit example.

Loading thumbnail…

bar and pieChart

This interactive visualization lets users explore the absolute frequencies of categorical values within a dataset, specifically looking at student grades and degree types. The main view is a bar chart that can be toggled to a pie chart, with a dropdown menu to select which category to display. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `schemeCategory10` for the bar chart, and `d3.pie`, `d3.arc`, and custom `attrTween` animations for the pie chart. The implementation includes hover tooltips and animated transitions when switching chart types or data columns.

Loading thumbnail…

pieChart

This example shows a pie chart for absolute frequencies of categorical data, with an animated sweep-in effect for each slice and a dropdown menu to switch between the "note" and "student" columns. It uses React with D3 v5, rendering SVG paths via `d3.pie()` and `d3.arc()`. The animation is driven by `transition.attrTween` with `d3.interpolate` for angle changes. A button-styled tooltip appears on hover, and data is aggregated with `d3.nest()` before being passed to the chart.

Loading thumbnail…

neues barchart v3

This interactive bar chart displays the absolute frequencies of categorical values from a dataset of student grades and degree programs. Users can switch the category displayed on the x-axis via a dropdown menu, which triggers a re-render of the chart. Built with D3 v5 and React, the visualization uses `d3.nest()` for aggregation, `d3.scaleBand()` and `d3.scaleLinear` for axes, and animated transitions on hover to highlight bars and show value differences. Tooltips appear on mouseover, while axis labels and titles update dynamically.

Loading thumbnail…

neues barchart v2

This interactive bar chart visualizes survey responses across six categorical grades, from "sehr gut" to "ungenügend," with each bar's height encoding the count of responses. Built with React and D3 v5, the visualization uses SVG rendering and includes a tooltip that displays the category and value on hover. The chart employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels and a title. Hovering a bar triggers a transition animation that highlights the selected bar while dimming others, and overlays divergence values showing the difference between the hovered bar and each other bar's value.

Loading thumbnail…

Barchart with transitions, divergence Values and toolkit changed

This bar chart displays the absolute frequencies of six ordinal categories, such as "sehr gut" and "ungenügend," with a horizontal grid and y-axis label. Built with D3 v5, the visualization encodes values as bar heights and includes interactive hover transitions that enlarge the selected bar and show a tooltip with its category and value. The chart also renders data value labels above each bar and a divergence text (not implemented in the code). Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with scales from `d3.scaleLinear` and `d3.scaleBand`, while styling is applied via CSS classes.

Loading thumbnail…

neues barchart v1

This bar chart displays the distribution of categorical grades, from "sehr gut" to "ungenügend," with bars colored in a dark blue and value labels above each bar. It uses React to render an SVG element and relies on D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. Hovering over a bar triggers a tooltip that shows the category and its numeric value, while axis labels and a title are generated dynamically. The chart uses a margin-based layout with rotated x-axis tick labels for readability.

Loading thumbnail…

test

This example visualizes the frequency of student grades (from "sehr gut" to "ausreichend") split by degree type (master or bachelor) as a stacked bar chart. The data is aggregated using `d3.nest()` and `rollup` to count occurrences per category, then transformed into a stacked layout with `d3.stack()`. The chart uses D3 v5’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering bars as SVG groups. The code is based on a bar chart from a jsFiddle and a toolkit from bl.ocks.org, with styling defined in an external stylesheet.

Loading thumbnail…

test2

A stacked bar chart displays four groups, each segmented into three fruit quantities from a hard-coded dataset. The SVG chart is rendered using React and D3 v5, with `d3.stack()` computing the series layers and `scaleBand` and `scaleLinear` positioning the bars and axes. Each fruit type receives a distinct fill color from an array, and the chart includes no interactive elements.

Loading thumbnail…

Linechart Version 3

This interactive visualization displays San Francisco weather data from December 2015, plotting temperature metrics over time with the ability to switch between line and area chart views. Users can select which weather variables to display on the x and y axes, group data by season or other categories, and adjust point transparency via a slider. Built with React and D3 v5, the chart uses scaleTime, scaleLinear, and area or line generators to render SVG paths with animated transitions. A tooltip appears on mouseover, showing the precise time and value at the cursor position using d3.mouse and d3.timeFormat. The visualization supports dynamic updates through dropdown menus and demonstrates reusable chart components that re-render when data or display options change.

Loading thumbnail…

scatterplot with menues

This interactive scatterplot allows users to explore the relationships between different attributes of cars, such as fuel efficiency, horsepower, and weight. Dynamic dropdown menus in the interface let users select which columns from the dataset to plot on the x and y axes. The visualization also includes a slider to adjust the transparency of the points and a number input to change the point size. Built with React and D3, the scatterplot uses D3's `scaleLinear` for axes and `transition().duration(1000).delay()` for smooth animated transitions of the data points.

Loading thumbnail…

Temp San Francisco Linechart

A line chart displays daily mean temperatures in San Francisco over time, with temperature on the y-axis and date on the x-axis. The code reads the CSV data using `csv()`, converts dates and temperatures, and visualizes the data with an SVG path generated by `line()` and `curveBasis`. Axes are customized using `axisBottom` and `axisLeft`, with labels styled via CSS.

Loading thumbnail…

Linechart Version 2

This interactive visualization displays San Francisco weather data, letting users explore relationships between date, temperature, and other climate variables. The chart allows switching between line and area chart types, with dropdown menus for selecting x and y attributes. Built with React and D3 v5, it renders SVG paths using d3.line and d3.area, with smooth transitions via .attrTween and d3.interpolateArray. A tooltip appears on mouseover, showing precise inverted coordinate values via d3.mouse and scale.invert.

Loading thumbnail…

Linechart Version 1

This interactive visualization displays San Francisco weather data as either a line or area chart, with dropdown menus to select the variables for the x- and y-axes and a slider to adjust point opacity. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes. Animated transitions are implemented via `transition.attrTween` and `interpolateArray`, while mouseover events generate a tooltip. The line chart includes a stroke-dasharray drawing animation.

Loading thumbnail…

Linechart

This interactive line chart displays daily temperature measurements for San Francisco across December 2015, with dropdown menus allowing selection of the x-axis, y-axis, and chart type (line or area). Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` to render SVG paths with a smooth curve. A hovering tooltip, implemented with `d3.mouse` and `d3.timeFormat`, reports precise values for any point. Data comes from the provided CSV file.

Loading thumbnail…

test 3

This example shows an interactive boxplot of a small dataset with two columns, allowing users to toggle between a linear and a log10 scale for the y-axis. The visualization uses D3 v5 within a React framework, rendering SVG elements with animated transitions. Key D3 APIs include `scaleLinear`, `scaleLog`, `scaleBand`, `quantile`, and axis components like `axisBottom` and `axisLeft`. The code computes quartiles and whiskers, and removes outlier circles when switching scales. A tooltip appears on hover over the boxplot.

Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let viewers select which data columns map to the X and Y axes, dynamically re-rendering the plot. The visualization uses D3 v5 with custom modules for the dropdown menus and scatter plot, employing D3's scaleLinear, extent, axisLeft, axisBottom, and transition features. Circles animate from the chart's center to their positions with staggered delays over two seconds, while SVG renders the axes, labels, and semi-transparent red data points.

Loading thumbnail…

Bowl of fruits - hover to select

A bowl of fruits shows five apples rendered as SVG circles, with hovering over a fruit highlighting it with a black stroke. The visualization uses d3.scaleOrdinal to map fruit types to colors and radii, and transitioned circle radii to animate fruits entering and exiting. Data updates remove an apple, replace one with a lemon, and filter out another, all driven by React state through setSelectedFruit. The code leverages d3-selection, d3-transition, and d3-scale within a React framework.

Loading thumbnail…

Bowl of fruits - click to select

This example shows a bowl of five fruits that can be clicked to select one, with a black stroke highlighting the chosen fruit and a smooth animation transitioning the selected state. The visualization updates as apples are eaten and replaced by lemons over time, demonstrating data joins in D3. Built with React and D3 v5, it uses `scaleOrdinal` for color and radius mapping, `.enter()`, `.merge()`, and `.exit()` for lifecycle handling, and `.transition().duration()` to animate circle attributes. The rendering is SVG-based, with interactive click events triggering selection callbacks.

Loading thumbnail…

test2

This example presents interactive boxplots for four data groups, allowing viewers to switch between linear and log10 scales and toggle individual columns. The boxplot elements—including IQR boxes, median lines, whiskers, and outlier points—are rendered as SVG shapes with animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to compute and draw the statistical summaries. A tooltip appears on mouseover of the median line, while Bootstrap buttons and custom checkboxes manage the scale and column selections.

Loading thumbnail…

Boxplot mit Buttons

This example shows a boxplot of a fixed dataset, with buttons to toggle between a linear and a base-10 logarithmic scale for the y-axis. It highlights how the choice of scale affects the visual representation of quartiles, median, and whiskers, while also demonstrating out-of-scale outliers. The visualization is built with React and D3 v5, using `d3.quantile` for summary statistics, `d3.scaleLinear` and `d3.axisLeft` for the axes, and SVG transitions to animate the boxplot's redraw when the scale changes.

Loading thumbnail…

scatterplot

This scatterplot visualizes the relationship between vehicle weight and horsepower using the classic cars dataset. Each circle represents a car, with the x-axis showing weight and the y-axis showing horsepower. The visualization uses D3 v5 within a React framework, rendering as SVG. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.extent` to determine the data domains. The circles are semi-transparent steel blue, with grid lines provided by axis tick marks.

Loading thumbnail…

Bowl of fruits

A bowl-shaped SVG container holds a row of red apples that transform over time, with one apple changing to a lemon and fruits being removed. The visualization demonstrates data joins in React using d3.v5, where the `fruitBowl` function manages enter, update, and exit selections. Ordinal color and radius scales map fruit types to visual properties, while the `index.js` script mutates the fruit array with `setTimeout` calls to trigger re-renders.

Loading thumbnail…

Bowl of fruits

A bowl of fruits demonstrates animated enter, update, and exit transitions for SVG circles. Initially five apples appear, then one is removed, another becomes a lemon, and a third is filtered out. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and radius mappings, `selection.data` with key functions, and chained `transition().duration()` calls to animate circle attributes. Random IDs track individual fruits through the data joins.

Loading thumbnail…

Temp San Francisco Areachart

A D3.js area chart visualizes the daily mean temperature in San Francisco over a year, with time on the x-axis and temperature in Fahrenheit on the y-axis. The chart uses the `area` generator with a basis curve to create a smooth, filled region beneath the temperature line, styled in steelblue. The SVG rendering relies on `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and gridlines, while data is loaded from a CSV file containing weather observations.

Loading thumbnail…

Temp San Francisco scatterplot

This scatterplot visualizes daily mean temperatures in San Francisco over time, with each circle representing a day’s temperature plotted against its date. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map axes, `extent` for domain calculation, and SVG circles with an opacity effect. Data is loaded from a CSV file using `d3.csv`, and axes are rendered with `axisBottom` and `axisLeft`, including custom labels and grid lines.

Loading thumbnail…

scatterplot

This visualization displays the top 10 most populous countries using a scatterplot with population on the x-axis and country names on the y-axis, rendered as circles in SVG. The code loads data from a CSV file using d3.csv, then applies d3.scaleLinear for the population axis and d3.scalePoint for the categorical country axis. It generates axes with d3.axisBottom and d3.axisLeft, formatting population values with d3.format to abbreviate large numbers. The chart is built with React and D3 v5, featuring a clear title and axis label.

Loading thumbnail…

test

This example shows a force-directed scatterplot of country data, where each circle represents a country and its horizontal position reflects a chosen numeric measure (like per-capita values). Buttons let the user switch between linear and log scales, animating the circles to their new positions. The visualization uses `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to position the circles, while `scaleLinear` and `scaleLog` define the axes. Circles are colored by continent, and hovering reveals a tooltip with details, plus a dashed vertical guide line. Rendering is SVG with transitions.

Loading thumbnail…

Lesson 3

An interactive multi-bar chart displays synthetic stream data across time, with controls for filtering by year, month, week, and zoom level. The visualization uses the NVD3 library’s `multiBarChart` model with D3.js v3 for rendering and transitions. Sidebar selectors and buttons adjust the view, while radio buttons switch between yearly, monthly, weekly, and daily granularity. Data is generated dynamically via custom `stream_layers` and `stream_waves` functions, producing three random series with bump-based distributions.

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over changed

A donut chart displays a single percentage value with a smooth animated transition, using a gradient fill that shifts from red to green as the percentage increases. The chart includes a mouseover effect that highlights the arc and bolds the percentage text. Built with React and D3 v5, the visualization uses SVG paths, `d3.arc` for the donut shape, `transition.attrTween` for the animation, and a linear gradient defined in the SVG `defs` section. The percentage updates are driven by `d3.interval`, with the input data hardcoded as zero.

Loading thumbnail…

Barchart with transitions and divergence Values

This example shows a bar chart of categorical frequencies, where hovering over a bar highlights it, enlarges its width, and displays divergence values—the difference between each other bar’s value and the hovered bar’s value—above all bars. Built with D3 v5, it uses SVG for rendering and transitions on mouseenter to animate the hovered bar’s position and size. The chart includes rotated x-axis labels, horizontal gridlines, and a title, while data is hardcoded in the script.

Loading thumbnail…

barchart basic

This bar chart displays the distribution of categorical grades (from “sehr gut” to “ungenügend”) with their absolute frequencies. Built with D3 v5, it uses scalable vector graphics (SVG) to render rectangular bars for each category, with axis scales defined via `d3.scaleLinear` and `d3.scaleBand`. The chart includes gridlines and value labels. Hovering over a bar triggers a smooth transition that enlarges the bar, increases its transparency, and displays the numeric difference between that bar and each other bar’s value.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart visualizes a single data series across six categorical axes (comp, con, und, red, acc, tim), with values displayed as a percentage-based polygon. The chart features five concentric grid levels, rounded strokes for the blob path, and colored dots at each data point, all rendered as SVG. Built with D3 v5, it uses a linear radial scale and a custom `RadarChart` function based on Nadieh Bremer’s design. The visualization includes responsive sizing and a static steelblue color scheme, with basic styling via CSS.

Loading thumbnail…

Customizing Axis

This example presents a horizontal bar chart of the top 10 most populous countries using data from a CSV file. Customized axes include a formatted population scale that abbreviates numbers with “B” for billions, and grid lines extending across the chart. The code imports specific D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering the visualization as SVG within a React framework.

Loading thumbnail…

Barchart

This bar chart displays the population of ten countries, sorted alphabetically along the vertical axis with horizontal bars scaled proportionally to population values. The visualization uses React with D3 v5, employing `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. Bars are rendered as SVG rectangles with a steelblue fill, and population values are multiplied by 1000 to reflect actual counts.

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over

This example shows a donut chart displaying a percentage value, where the foreground arc animates to its final angle using a repeating transition. The arc’s color shifts through a gradient that changes based on the input percentage, with hover effects highlighting the path by increasing its stroke width and color. Built with D3 v5 in a React framework, the visualization uses `d3.arc`, `transition.attrTween` for smooth angle interpolation, and `linearGradient` definitions for the dynamic color stops.

Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over

A donut chart visualizes a percentage value with a smooth animated transition, shifting the arc from zero to the given input over 750 milliseconds. The chart uses gradient colors that change based on the percentage range, from red for low values to green for high values. Hovering over the arc highlights it with a black stroke. The implementation uses D3 v5 with SVG rendering, leveraging `d3.arc`, `d3.interval`, and `transition.attrTween` for animation, alongside a linear gradient definition for color transitions.

Loading thumbnail…

pie chart transition example

This example shows a single, animated pie chart where the foreground arc transitions to a new random angle every 1.5 seconds, with the background arc remaining fixed at 100%. Built with D3 v5, it renders two SVG path arcs using a custom `d3.arc` generator with bound inner and outer radii. The animation is driven by `d3.interval` and `transition.attrTween`, which interpolates the `endAngle` value in data space before computing the new path string, ensuring smooth angular transitions.

Loading thumbnail…

Pie Chart

This example shows an interactive pie chart that displays fruit quantities by region, with radio buttons to switch between fruit types. The chart renders as an SVG using React and D3 v5, employing `d3.pie` and `d3.arc` to generate the donut-shaped paths with an inner radius of 200 and outer radius of 300. Color encoding is handled by `d3.scaleOrdinal` with the Tableau10 scheme, while `d3.nest` groups the tab-separated fruit data, which originates from the World Bank population dataset.

Loading thumbnail…

first boxplot

This example demonstrates a classic boxplot visualization of a numeric dataset, highlighting the median, interquartile range, whiskers, and any potential outliers. The chart computes the five-number summary using `d3.quantile` and draws the box, median line, and whiskers as SVG shapes, with circles marking values beyond 1.5 times the interquartile range. The y-axis is rendered with `d3.axisLeft`, and the scaling is handled by `d3.scaleLinear`. The dataset is hardcoded in the script, and the entire visualization is built with React and D3 v5, outputting to SVG.

Loading thumbnail…

Lets make a face with d3

This example shows a simple cartoon face built with SVG shapes—a yellow circle for the head, two eyes, and an arc-based mouth—that animates its eyebrows up and down over time. The face is centered using a translated group, and each facial feature is positioned relative to that center. The code uses D3 v5 selection methods like `select` and `append`, along with `transition().duration()` to animate the eyebrow group’s `transform` attribute. The mouth is drawn using the `d3.arc()` generator with specified inner and outer radii and angular ranges.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars under a given price threshold, displayed in a large preformatted element. It asynchronously loads a hardcoded JSON dataset of five vehicles via a Promise, then filters and formats the results using `filter`, `map`, and `join`. The report lists each car as a formatted string, and the interface initially shows a loading message before the data appears.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic SVG shapes—circles, rectangles, lines, and paths—using a combination of inline SVG attributes and external CSS rules. It shows how CSS classes can control stroke color, width, and line join styling, while SVG group elements apply global transforms and presentation attributes like `fill` and `stroke` to multiple children. The rendering uses raw SVG markup within an HTML page, with styles defined in a separate stylesheet.