O

OleJRask

@OleJRask·76 public vizzes

Loading thumbnail…

Outlier Visualization 3F

This visualization presents a 2x2 matrix of heatmaps for the Old Faithful dataset, showing binned counts of four quantitative variables (1, 2, 3, 4), with color encoding the mean outlier value per bin. An interactive brush parameter allows selecting intervals across plots to conditionally highlight outlier means in green, while unselected bins appear grey. Built with Vega-Lite 5.2, Vega 5.21, and Vega-Embed 6.20, the visualization uses a repeated specification with `bin: {maxbins: 30}` for x-axes, `bin: {maxbins: 20}` for y-axes, and a `greens` heatmap color scheme, rendering as SVG within a D3.v4 environment. Data loads via `d3.csv` from a cardio-outlier dataset URL.

Loading thumbnail…

Outlier Visualization 3

This visualization uses the Old Faithful dataset to display a 2×2 matrix of binned heatmaps, comparing each pair of quantitative variables. Each cell counts data points within bin ranges, with a color scale from greens indicating density and grey marking outliers excluded by an interactive interval selection brush. The view includes a slider adjusting the maximum bin count, ranging from 2 to 50. Built with Vega-Lite 5.2.0 through the vegaEmbed API, it loads CSV data via D3.js 4.11, layering a repeat specification over four quantitative field combinations.

Loading thumbnail…

Outlier Visualization 1

This visualization uses a scatter plot matrix to reveal outliers in the Auto MPG dataset from the UCI Machine Learning Repository. It pairs a full-size scatter plot of two specific attributes with a 4×4 grid of smaller scatter plots, each comparing different attribute pairs, to expose unusual data points across multiple dimensions. The implementation leverages the vega-lite-api, building the charts via `vl.markCircle` and encoding fields with `fieldQ` and `repeat`, while customizing axis styles through `config` objects. The code fetches data as CSV using `d3.csv` and renders the main chart and navigator grid as SVGs within the browser.

Loading thumbnail…

Outlier Visualization 2E 3

This visualization presents a scatter plot matrix of the Auto MPG dataset, with each cell pairing a row attribute (1–4) against a column attribute (5–8). Circle marks are colored by an "Outlier" quantitative field, with brushed selections highlighting outliers in dark while unselected points appear light grey. Built with the vega-lite-api, it uses a repeated chart layout with interval selection parameters for brushing and panzoom for navigation. Data is loaded via d3.csv from a GitHub-hosted CSV file.

Loading thumbnail…

Outlier Visualization 2E 2

This visualization uses the Auto MPG dataset to explore outliers across 20 numeric attributes through a large scatter plot matrix, with each cell showing the relationship between two attributes. Users can brush to select a region, which highlights points identified as outliers in orange while dimming others to light gray. Built with Vega-Lite API and D3 v7, it repeats the same circle mark across rows and columns, applies a selection interval for brushing, and includes pan/zoom functionality via the panzoom library.

Loading thumbnail…

Outlier Visualization 2E

This example displays a scatter plot matrix of 36 pairwise combinations from 12 selected columns of the Cardiology dataset, with each point colored by its outlier status. Built with the Vega-Lite API and rendered using d3.v7, it uses repeated row and column encodings with `vl.markCircle`. A brush parameter allows users to select points via Ctrl-click, while the panzoom library enables zooming and panning on the entire chart.

Loading thumbnail…

Fork of Fork of Outlier Visualization 2B

This visualization presents a small-multiple scatter plot matrix of cardiorespiratory fitness data from the UCI Machine Learning Repository. Users can brush data points by holding the Control key and clicking, which highlights outliers in color while others remain grey. The view supports Alt-key zoom and pan via the panzoom library. Built with the vega-lite-api, the chart uses vega, vega-lite, and d3.csv to load and render the data.

Loading thumbnail…

Fork of Outlier Visualization 2B

This fork of Outlier Visualization 2B displays a scatter plot matrix of the Auto MPG dataset, repeating 12 columns against 3 rows to reveal pairwise relationships among numerical attributes. Circles are colored red to highlight outliers, with a user-driven brush selection (triggered by control-click) that adjusts the color mapping. The visualization is built with Vega-Lite and the Vega-Lite API, configured with a custom dark theme and interactive pan/zoom via the PanZoom library. Data is loaded as CSV from a Gist, and the tooltip handler is registered for hover details.

Loading thumbnail…

Fork of Fork of Outlier Visualization 3

This visualization presents four binned heatmaps of the Old Faithful dataset, arranged as a 2×2 grid using Vega-Lite’s repeat operator over four quantitative fields. Each cell’s color encodes the count of observations, with an interactive brush parameter that highlights highlighted regions in green while dimming unselected bins to grey. The code builds the specification programmatically via the vega-lite API, embeds it with vega-embed, and fetches CSV data using d3.csv. A slider adjusts the maximum bin count for the x-axis, re-rendering the heatmaps dynamically.

Loading thumbnail…

Fork of Outlier Visualization 3B

This visualization presents a 2D heatmap of the Old Faithful Dataset, using Vega-Lite’s binned rectangle marks to show the distribution of eruptions across four repeated dimensions (rows and columns labeled "1" and "2"). It layers two heatmap specs—one for overall counts and one filtered by a user-driven interval brush—with an outlier field controlling conditional coloring. The code uses vegaEmbed, vega-lite, and d3.csv to load data from a remote CSV, configures a green heatmap color scheme, and places the legend offset left.

Loading thumbnail…

Fork of Outlier Visualization 3

This visualization presents a 2D heatmap of the Old Faithful dataset, using a repeating grid of binned scatterplots for each pair of variables to reveal outliers. The interface includes a slider to adjust the maximum number of bins and an interval brush for selection, which highlights counts in green while unselected areas appear grey. The implementation loads data via `d3.csv` and renders the Vega-Lite specification with `vegaEmbed`, leveraging the vega-lite API and D3 v4 for interaction.

Loading thumbnail…

Outlier Visualization 3C

This visualization displays the Old Faithful dataset as a 2D heatmap using Vega-Lite’s binned rect marks, with a repeat operator to create a faceted grid of four plots comparing eruptions and waiting times. Users adjust bin counts via a MaxBins slider and brush a selection region to highlight outlier counts in green, while filtered bins render as grey. The tool uses d3.csv to load data, vegaEmbed to render the layered specification, and conditional color encodings tied to a brush parameter to reveal counts.

Loading thumbnail…

Outlier Visualization 3B

This example visualizes the Old Faithful dataset as a 2D heatmap using Vega-Lite’s faceting, repeating columns and rows for each binned variable pair. It includes a brush interval parameter that filters a second layer of counts, highlighting only the brushed region’s outliers in a green scale, while unselected bins remain grey. The code uses vegaEmbed, vega-lite, and d3.csv to load the remote cardio_out.csv, with a MaxBins slider controlling histogram resolution.

Loading thumbnail…

Outlier Visualization 2

This visualization presents a scatter plot matrix of repeated pairwise comparisons across multiple numeric attributes from the Auto MPG dataset, highlighting outliers in red through an interactive selection mechanism. The view uses the vega-lite-api to construct a faceted grid of small multiples, with each cell mapping column and row fields to positional axes. Users can pan and zoom the entire canvas using the panzoom library, while ctrl-clicking data points toggles their selection across all plots. The compact design, with tiny axes labels and minimal gridlines, prioritizes visual density over readability.

Loading thumbnail…

DOM panzoom demo 3

This example demonstrates pan-and-zoom interaction on a scatter plot of breast cancer data from a CSV file, plotting Clump Thickness against Uniformity of Cell Size. The visualization uses Vega-Lite via the vega-lite-api to render circles, with scales bound to interval selections, enabling mouse-drag panning and wheel zooming on the SVG output. It also applies the panzoom library to the DOM element for additional zoom capability, while custom configuration adjusts axis and label styling for readability.

Loading thumbnail…

LP-Explain Cardiotocograms

This example visualizes cardiotocogram data from the UCI Machine Learning Repository, presenting a scatter plot of two data fields colored by class alongside a small multiples navigator grid. The main chart uses vega-lite-api with `vl.markCircle` and encoded quantitative fields for x and y axes. A secondary chart repeats 4x4 mini plots for navigation, both rendered via vega-lite-api’s `repeat` and `config` options. Data loads asynchronously through d3.csv, and vega-tooltip provides interactive hover details.

Loading thumbnail…

Old Faithful Contour Plot B - 2

This visualization shows the relationship between eruption time and waiting time for the Old Faithful geyser dataset, using density contours to highlight areas of high data concentration. The contours are computed with `d3.contourDensity` and rendered as SVG paths via `d3.geoPath`, with colors mapped through `d3.scaleSequential` and `d3.interpolateGreens`. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the contour bandwidth updates interactively based on mouse movement across the page, demonstrating dynamic resmoothing of the density estimate.

Loading thumbnail…

Old Faithful HeatMap 15

This visualization presents the Old Faithful dataset as a 2D heatmap, using a 2x2 faceted grid to display four combinations of the dataset’s two quantitative variables. A slider allows interactive adjustment of the bin count for the x-axis, with the y-axis bin count scaling proportionally. Built with Vega-Lite and embedded via vegaEmbed, it uses the “greens” color scheme and a left-oriented legend to represent aggregated counts of the “outlier” field. The data is loaded remotely as CSV using d3.csv.

Loading thumbnail…

Old Faithful HeatMap 08

This example visualizes the Old Faithful dataset as a 2D heatmap, splitting the data into four facet panels based on two repeated row and column fields. Each panel displays binned counts of eruptions, with color intensity representing frequency, using a green color scheme. The visualization is built with Vega-Lite and Vega-Embed, leveraging the `repeat` operator and a `Maxbins` parameter bound to a slider for interactive bin-width control. Data is loaded from a CSV via D3’s `d3.csv`, and the chart renders as SVG with a transparent view stroke.

Loading thumbnail…

Old Faithful HeatMap A 03

This visualization presents the Old Faithful dataset as a binned heatmap, with eruption duration on the x-axis and waiting time on the y-axis, colored by the mean waiting time within each bin using a green color scheme. The code builds the chart through Vega-Lite’s layered API, combining rect marks for the heatmap cells and text marks to label each bin’s average value, while vegaEmbed renders the final SVG. Data is loaded via d3.tsv from the raw GitHub source, and the bin count is fixed at 10 along the horizontal axis.

Loading thumbnail…

Old Faithful HeatMap 10

This visualization presents the Old Faithful dataset as a 2D binned heatmap, with four panels showing combinations of the dataset’s numeric columns. A slider dynamically adjusts the maximum number of histogram bins for the x- and y-axes, while color intensity reflects the count of records per bin. Built with Vega-Lite and vega-embed, it uses a repeat operator to generate the grid and a `greens` color scheme for the heatmap. Data is loaded as CSV via d3.csv, and the visualization renders as SVG.

Loading thumbnail…

Old Faithful HeatMap 09

This visualization displays the Old Faithful dataset as a binned heatmap, using a 2x2 grid of repeated charts to explore relationships between four quantitative variables. Each cell shows the count of data points within binned ranges, colored on a green scale. The code uses Vega-Lite’s `repeat` operator and `bin` encodings, with an interactive slider controlling the `Maxbins` parameter. Data is loaded from a CSV via `d3.csv`, and rendering is handled by `vegaEmbed` with Vega-Lite specifications.

Loading thumbnail…

Old Faithful HeatMap 07

This visualization displays the Old Faithful dataset as a grid of small multiples, each a binned heatmap that compares one of three eruption duration variables (rows) against one of six waiting time variables (columns). The code uses the Vega-Lite API to construct the repeated chart specifications, with vegaEmbed handling rendering. It computes bin counts from the data and colors rectangles by frequency using a greens scheme, drawing from a remote CSV file.

Loading thumbnail…

Old Faithful HeatMap 06

This visualization presents a multi-panel heatmap of the Old Faithful dataset, using a small multiples layout that repeats across six columns and three rows of binned scatterplots. Each panel encodes the count of eruptions and waiting time observations as a green color intensity, with count labels overlaid as text. The code builds the specification programmatically using Vega-Lite 5 and renders it with vega-embed, while loading the CSV data through d3.csv. The repeating structure is generated via Vega-Lite’s repeat operator, and color uses the “greens” scheme with a custom legend offset.

Loading thumbnail…

Old Faithful HeatMap A 02

This visualization displays the Old Faithful dataset as a binned 2D heatmap using Vega-Lite. It shows the relationship between eruption durations and waiting times, with each rectangular bin colored by the mean waiting time. The code builds a layered specification including a rect mark for the heatmap and a text mark for mean values. It uses `vegaEmbed` to render the chart, with `d3.tsv` loading the raw data from a Gist. The bin count is configurable via a `bins` parameter, and the color scheme is set to "greens".

Loading thumbnail…

Old Faithful HeatMap A

This interactive heat map visualizes the Old Faithful geyser dataset, showing the relationship between eruption duration and waiting time through a grid of colored rectangles. Using Vega-Lite’s binned aggregation, each cell’s color encodes the mean waiting time for eruptions within that bin, with a greyscale heatmap color scheme. The visualization is rendered as SVG via `vegaEmbed`, with the bin count dynamically adjusted based on mouse X position, triggering a re-render through the `d3.select` mousemove handler. Data is loaded from a TSV file using `d3.tsv`.

Loading thumbnail…

Old Faithful Contour Plot B

This visualization displays the Old Faithful geyser dataset as a smooth contour plot, with eruption time on the x-axis and waiting time on the y-axis. The code uses d3.contourDensity to compute density contours from the data, then renders them as filled SVG paths via d3.geoPath, with a sequential color scale from d3-scale-chromatic using interpolateGreens. Interactive bandwidth adjustment occurs on mousemove, altering the contour smoothing level dynamically. Axes are drawn using d3.axisBottom and d3.axisLeft, with data loaded via d3.tsv from a GitHub gist.

Loading thumbnail…

Old Faithful HeatMap 05

This interactive visualization displays the Old Faithful dataset as a grid of binned scatterplots, with rows and columns representing repeated variable pairs. Each cell renders a binned heatmap using Vega-Lite’s rect mark, where color intensity reflects outlier counts. The interface responds to mouse movement, dynamically adjusting the maximum bin count via `d3.csv` loading and `vegaEmbed` re-rendering with updated specifications. The example relies on the Vega-Lite API and D3 v4 to fetch data and handle events.

Loading thumbnail…

Old Faithful HeatMap 04

This interactive heatmap visualizes the bivariate distribution of eruption durations and waiting times in the Old Faithful dataset, using a green color scale and rectangular bins. The visualization is built with Vega-Lite, embedded via vega-embed, and loads data asynchronously through d3.tsv. Moving the mouse updates the bin count for both axes, recomputing the entire chart in real time by calling vegaEmbed with new specifications that adjust the maximum number of bins dynamically based on cursor position.

Loading thumbnail…

Old Faithful HeatMap 03

This interactive heatmap visualizes the Old Faithful dataset, showing the relationship between eruption duration and waiting time through binned rectangular cells colored by count on a green scale. Rendered as SVG via Vega-Lite’s `rect` mark, the visualization updates dynamically as the mouse moves across the page, adjusting the maximum number of bins on the x-axis based on cursor position. The code uses Vega-Embed, Vega-Lite’s API, and d3.tsv for data loading, with the view’s legend offset to the left.

Loading thumbnail…

Cars HeatMap 01

This interactive visualization displays the performance of various car models across multiple dimensions, specifically showing the relationship between a selectable metric, such as Acceleration, Displacement, or Horsepower, and fuel efficiency (Miles_per_Gallon). The view is structured as a small multiples grid, with each panel representing a different country of origin. The visualization uses Vega and Vega-Lite’s API to perform a KDE2D density estimation, which is then rendered as a heatmap using the `viridis` color scheme. Users can dynamically adjust the smoothing bandwidth, cell size, and color scale resolution, while a legend shows the normalized density probability.

Loading thumbnail…

Old Faithful HeatMap 01

This example shows the Old Faithful dataset as a 2D heatmap, binning eruption duration versus waiting time and coloring cell counts with a green scheme. It uses Vega-Lite’s specification API to define the chart, with `d3.tsv` loading the data. A mousemove listener updates the chart by re-rendering with new maximum bin counts based on the cursor’s x position. The code leverages `vegaEmbed` to render the visualization as SVG.

Loading thumbnail…

Cars HeatMap 02

This interactive visualization presents small multiples of 2D density heatmaps for automobile statistics, showing the relationship between variables like Acceleration, Displacement, and Horsepower against Miles per Gallon, faceted by the car’s Origin. Built with Vega-Lite and Vega specifications, it uses the `kde2d` transform for kernel density estimation and a `heatmap` transform to render colored grids. Users can adjust bandwidth, cell size, resolution (independent or shared scales), and toggle between count and probability density via bound signals. The data comes from the cars.json dataset, rendered through Vega’s image marks with a viridis color scheme.

Loading thumbnail…

Outlier scatter matrix 10

This visualization displays a scatterplot matrix of 12 columns by 3 rows from the Auto MPG dataset, where each cell is a binned heatmap tinted by the mean outlier indicator. Built with the Vega-Lite API in d3.v7, it uses `markRect` with binning on repeated row and column fields, and colors cells by the average outlier value. The panzoom library enables navigation, though zoom triggers only with the alt key held.

Loading thumbnail…

Outlier scatter matrix 09

This scatter matrix reveals patterns in the Cardiotocography dataset by plotting 12 column attributes against 4 row attributes, with each point colored by its quantitative outlier score. Built with the vega-lite-api and rendered through vega-lite and vega, the visualization repeats a circle mark across rows and columns using vl.repeat(). Panning and zooming is enabled via the panzoom library, only activating with the Alt key. Data loads asynchronously from a CSV using d3.csv, and the appearance is customized through a shared configuration object.

Loading thumbnail…

Outlier scatter matrix 08

This visualization shows a scatter plot matrix of 36 pairwise combinations across 12 columns and 3 rows from a cardio dataset, with points colored by an "Outlier" quantitative field to highlight anomalous observations. Users can select data points by clicking with the Ctrl key held down, which toggles their color to red across all plots via a union resolution selection parameter. The code uses the vega-lite-api library to define the repeat-based matrix, d3.csv for data loading, and panzoom for zooming and panning the entire chart surface.

Loading thumbnail…

Outlier scatter matrix 07

This scatter plot matrix displays a grid of pairwise comparisons between cardiovascular measurements, with each cell visualizing the relationship between two variables as a tight cluster of small points. The visualization is built using the vega-lite-api, which registers both Vega and Vega-Lite to render the chart, and pulls data from a CSV hosted on GitHub. The design employs a minimal axis configuration with hidden gridlines and tiny labels, and users can select individual points by holding the control key while clicking, highlighting them in red to identify potential outliers across the dataset.

Loading thumbnail…

Outlier scatter matrix 06

This visualization displays a scatter plot matrix of cardio patient data from the UCI Machine Learning Repository, organized as a grid of 21 columns and 2 rows. Each cell plots one variable against another, with points colored by the nominal `Class` field. The visualization uses the vega-lite-api to construct the chart, with panzoom enabled for zooming via the Alt key. Users can select outliers by Ctrl-clicking points, which highlights them in red through the `selectPoint` parameter. The chart is rendered with d3.v7 and vega-lite 5.2.0.

Loading thumbnail…

Outlier scatter matrix 05

This scatter plot matrix visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying pairwise relationships across six numeric attributes. Each cell shows a scatter plot where points are colored by vehicle class, with hover selection highlighting outliers in red. The visualization uses the vega-lite-api to construct a repeated hexagonal grid of plots, combining vega-lite specifications with d3.csv for data loading. Pan and zoom navigation is enabled through the panzoom library, allowing users to explore the matrix in detail while maintaining a small-font, compact design.

Loading thumbnail…

DOM panzoom demo INTERACTIVE! 02

This interactive demo shows a scatter plot of breast cancer dataset attributes, plotting Clump_Thickness against Uniformity_of_Cell_Size. Users can pan and zoom the entire DOM by holding the Alt key, using the panzoom library to control both wheel-zoom and mouse-drag interactions. The visualization is built with Vega-Lite API and rendered as SVG, with D3 v7 fetching the CSV data. The plot fills the viewport and includes linked scale-brushing via a selection parameter bound to the axes.

Loading thumbnail…

Outlier scatter matrix 04

This scatterplot matrix visualizes multivariate outliers across 16 pairwise combinations of four numeric variables from the UCI Auto MPG dataset, with points colored by vehicle class. Built with the vega-lite-api wrapper for Vega-Lite, the small multiples repeat rows and columns via `vl.repeat()`, while d3.csv loads the data. The visualization supports pan and zoom through the panzoom library, with interaction requiring the Alt key.

Loading thumbnail…

Outlier scatter matrix 03

This interactive visualization displays a 2x2 scatter plot matrix of paired numeric variables from the Auto MPG dataset, colored by vehicle class. Each cell in the matrix shows a different combination of row and column variables, with points sized at 2 pixels and 50% opacity to reveal overlapping densities. The visualization uses the vega-lite-api library with a repeat specification to generate the grid, while config.js customizes axis appearance and font sizes. Data is loaded via d3.csv from a GitHub Gist, and pan/zoom functionality is enabled through the Panzoom library.

Loading thumbnail…

DOM panzoom demo INTERACTIVE!

This interactive demo shows a scatterplot of breast cancer tissue measurements, with Clump Thickness on the x-axis and Uniformity of Cell Size on the y-axis. The visualization uses Vega-Lite’s interval selection bound to scales to enable brushing, while the panzoom library adds wheel-zoom and mouse-drag panning, restricted to Alt-key activation. Data is loaded via d3.csv from a remote GitHub dataset. The chart fills the viewport and uses custom config for larger axis labels and tooltips.

Loading thumbnail…

Outlier scatter matrix 04

A scatter plot matrix displays pairwise relationships between four numeric measurements, colored by class, with selectable points that coordinate across all panels. Built with the vega-lite-api, the visualization uses `vl.markCircle` and `vl.repeat` to generate the grid, while `vl.selectPoint().bind('scales')` enables scale-based brushing. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`, rendered through a custom dark-themed `config` for readability, output as an SVG within a full-screen chart container.

Loading thumbnail…

DOM panzoom demo SelectPoint

This example demonstrates interactive pan and zoom on a scatterplot of breast cancer data, where each circle represents a sample plotted by Clump Thickness against Uniformity of Cell Size. The page applies the `panzoom` library to the entire DOM container, allowing users to navigate the visualization, while Vega-Lite’s `selectPoint` parameter binds a point selection to the axes’ scales for dynamic filtering. Built with Vega-Lite API and D3 v7, the code loads CSV data from a GitHub gist and renders the marks as SVG, with the visualization sized to fill the browser window.

Loading thumbnail…

DOM panzoom demo 4

This example demonstrates how pan-and-zoom interaction can be applied to a scatter plot of breast cancer data. The visualization uses a circle mark for each data point, mapping `Clump_Thickness` and `Uniformity_of_Cell_Size` to x and y axes, with fixed domains. Built with vega-lite-api and registered with vega-lite and vega, the chart fills the viewport. The panzoom library enables smooth zooming and panning of the entire DOM container, while the data is loaded from a CSV via d3.csv.

Loading thumbnail…

Outlier scatter matrix 02

This is a small-multiple scatter plot matrix that compares pairs of numeric columns, labeled "1" and "2", against each other to reveal outliers and clusters in the data. The plot uses color to distinguish classes and drops the legend for a cleaner view. It is built with the vega-lite-api and vega-tooltip, loading CSV data from the UCI Auto MPG dataset. The chart is embedded in a full-screen HTML page, with its size dynamically set to a fraction of the window dimensions.

Loading thumbnail…

DOM panzoom demo 2

This interactive scatterplot visualizes the Wisconsin breast cancer dataset, plotting Mitoses against Bland_Chromatin with points colored by tumor class. Built with Vega-Lite and rendered via D3, the visualization uses the Panzoom library to enable smooth panning and zooming of the entire DOM area. The chart fills the browser window and includes tooltips for exploring individual data points, with a configurable axis style to improve readability.

Loading thumbnail…

DOM panzoom demo

This example demonstrates pan-and-zoom interaction on DOM elements. A page of placeholder Latin text can be dragged and scaled using the `panzoom` library, which manipulates CSS transforms. The rendering uses plain HTML and D3 v5 for setup, while the interaction logic relies on the external `panzoom` API. The visualization is purely a DOM manipulation demo, with no data binding or charting involved.

Loading thumbnail…

Pan

This example demonstrates a basic panning interaction within a bounded viewport. A draggable map area, containing an SVG red circle, can be moved by clicking and dragging with the mouse. The implementation uses plain JavaScript event handlers, specifically `onmousedown`, `onmousemove`, and `onmouseup`, to track cursor movement and update the map's absolute `left` and `top` CSS properties. The map's movement is constrained to a 400-pixel range in both axes, and it uses a Google logo image as its background.

Loading thumbnail…

Outlier scatter matrix 03

This example displays an outlier scatter matrix of cardio data, highlighting relationships among numeric attributes with a dense grid of small multiples. A draggable viewport lets users pan across the rendered scatterplot, shifting an oversized SVG map containing a red circle to explore off-screen portions. The visualization is built with the Vega-Lite API and D3, using d3.csv to load the dataset. The viewport interaction is implemented by manually tracking mouse events with onmousedown, onmousemove, and onmouseup, adjusting the map’s absolute position within a clipped container.

Loading thumbnail…

Outlier scatter matrix 01

The main scatter plot maps two numeric attributes from the Auto MPG dataset, encoding vehicle class by color. A smaller, navigator-style scatter matrix repeats four variable pairs across rows and columns, using half-transparent circles to reveal outliers. Built with the vega-lite-api, both views configure axes via shared `config` objects and load CSV data asynchronously through d3.csv. The navigator’s tiny label and title fonts make it a compact overview, while the main chart uses larger text for readability.

Loading thumbnail…

Vega-Lite API Template 9

This example pairs a large scatter plot of Auto MPG data with a smaller navigator chart, both built using the Vega-Lite API and rendered with D3’s SVG support. The main view encodes horsepower and acceleration on x and y axes, colored by vehicle class, while the navigator repeats the same encoding across a grid of attribute pairs from the dataset. The code registers Vega-Lite with vega-tooltip for interactivity, loads data via `d3.csv`, and applies separate appearance configurations for each chart.

Loading thumbnail…

LP-Explain Cardiotocograms_AirQuality

This example uses the Vega-Lite API with D3.js to visualize the Air Quality UCI dataset, plotting Absolute Humidity against Relative Humidity and coloring points by class. The main chart offers a detailed scatter plot, while a secondary navigator panel displays a 4x4 repeated small-multiple grid of all attribute combinations for orientation. Both views use `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` encodings, with `vl.repeat()` in the navigator to iterate over column and row fields. Data loads via `d3.csv`, and rendering uses vega-lite-api with custom configuration objects for appearance.

Loading thumbnail…

Vega-Lite API Template 10

This visualization uses the Vega-Lite API with D3 to display a scatter plot of Auto MPG data from the UCI Machine Learning Repository, encoding horsepower and acceleration on the axes while coloring points by vehicle class. A second miniature chart, generated with repeated row and column facets, serves as a navigation overview. The code customizes axes and label styling through separate config objects and fetches data via D3’s CSV loader. Both charts are rendered as SVG using Vega-Lite’s API.

Loading thumbnail…

Vega-Lite API Template I

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with each point colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API, the example constructs chart specifications programmatically, encoding tooltips for car names and customizing axis styling through a config object. The implementation uses `vl.markCircle` with field encodings for quantitative and nominal data, while `getData` imports the dataset via d3's `csv` function, and the `run` function renders the visualization directly into the document body.

Loading thumbnail…

Vega-Lite API Template 8

This visualization displays two scatter plots of Auto MPG data from the UCI Machine Learning Repository. The main chart plots two quantitative fields against each other, colored by vehicle class, while a smaller repeater panel shows multiple combinations of the same fields. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode variables, with D3’s `csv` loader for data parsing. The code configures custom axes, tooltips via vega-tooltip, and responsive sizing that adapts to the window dimensions.

Loading thumbnail…

Matrix Scatter

This matrix scatterplot uses the Vega-Lite API to visualize relationships among four automobile attributes from the UCI Auto MPG dataset. The repeated small multiples layout plots horsepower and displacement on the x-axes against mpg and acceleration on the y-axes, with each circle’s position encoding the measured values. The visualization is built with vl.repeat() to generate the grid of charts, while the vega-tooltip handler provides hover interactions. Data is loaded asynchronously via d3.csv.

Loading thumbnail…

Matrix Scatterplots in Vega-Lite API 1

This example displays a small matrix of scatterplots comparing horsepower and displacement against fuel efficiency, with points colored by country of origin. Built with the Vega-Lite API, it uses the `repeat` operator to generate plots from a specification, encoding quantitative axes and a nominal color field. The visualization loads automobile data from the UCI Machine Learning Repository via a CSV fetched with d3’s `csv` function, and renders as SVG with custom axis styles and tooltips provided by Vega-Tooltip.

Loading thumbnail…

Vega-Lite API Template 7

This example visualizes automobile data from the UCI Auto MPG dataset, plotting two numeric attributes as a scatter plot with points colored by vehicle class. The main chart fills the viewport, while a smaller overview version in the corner provides navigation context. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, with `vl.color().fieldN()` for categorical coloring. Data loads via D3’s `csv` function, and the configuration customizes axis styling and label appearance.

Loading thumbnail…

Vega-Lite API Template 6

This interactive scatter plot visualizes the relationship between temperature (T) and relative humidity (RH) from the UCI Air Quality dataset, rendering thousands of overlapping semi-transparent points to reveal density patterns. Built entirely with the Vega-Lite API, the visualization uses `vl.markCircle` and encodes quantitative axes with configurable scales. The code imports data via D3's `csv` method, then renders the chart using Vega and Vega-Lite engines with an SVG renderer and tooltip support, while custom configuration adjusts axis styling and typography for readability.

Loading thumbnail…

Vega-Lite API Template 5

This example presents two scatter plots of the Auto MPG dataset, visualizing relationships between different cellular attributes. The main chart maps Mitosis against Bland Chromatin, while a smaller navigation chart shows Bare Nuclei versus Uniformity of Cell Shape, both colored by class. The visualization uses the vega-lite-api to construct the plots, d3 to load the CSV data, and vega-tooltip for interactive tooltips. The plots are rendered using Vega's SVG renderer with a custom configuration for improved readability.

Loading thumbnail…

Vega-Lite API Template 4

This example uses the Vega-Lite API to render two scatter plots of the Wisconsin Breast Cancer dataset, with the main chart showing the relationship between Mitoses and Bland_Chromatin while a smaller overview chart displays Bare_Nuclei against Uniformity_of_Cell_Shape. The visualization uses `markCircle` with low opacity and size 300 to reveal density distributions, with points colored by class and tooltips showing the class label. The main chart resizes to fit the window while the navigator view occupies one-third of the width and one-fifth of the height, both using `vega-lite-api` with a dark styled config that removes axis domains and applies small gray guide labels.

Loading thumbnail…

Fork of HTML Starter

This example shows a simple HTML page with a large centered greeting text and two overlapping text elements positioned using CSS. The page uses inline styles to set the body font size to 5em and positions the “Hallo” label absolutely in the top-right corner. It demonstrates basic CSS styling and layout techniques within a static HTML document, with no interactive behavior or data-driven content. The code relies entirely on native HTML and CSS, without any JavaScript libraries or external data sources.

Loading thumbnail…

Vega-Lite API Template III

This example visualizes the relationship between Mitoses and Bland_Chromatin measurements from the UCI Auto MPG dataset, with points colored by Class and tooltips revealing the class label. Built using the Vega-Lite API with D3.js for data loading, it renders an interactive scatter plot as SVG. The visualization uses `vl.markCircle`, `vl.x().fieldO()`, `vl.y().fieldO()`, and `vl.tooltip()` to encode the data, with a custom config adjusting axis and label styles for readability.

Loading thumbnail…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and parse CSV data in a React application using D3’s `csv` function. It displays the file size in kilobytes, the number of columns, and the total row count from a remote CSS named colors dataset. The React component uses the `useState` hook to store the parsed data asynchronously and conditionally renders either a loading message or the computed statistics. The visualization is intentionally minimal, focusing on the data-loading workflow rather than graphical output.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web browser. It fetches a CSS named colors dataset from a GitHub gist, then displays the file size, column count, and row count in large text. The code uses the browser’s Fetch API to retrieve the raw text and D3 v7’s `d3.csvParse` to convert it into structured data. The final version reads the metrics from the parsed result and updates the page content accordingly.

Loading thumbnail…

RSA

The visualization plots two series from a tab-separated dataset, example2.tsv, using d3.tsv to load the data. A green step-curve and red natural-curve line chart display the y1 and y2 values against the shared x-axis, each with circular point markers. The SVG rendering uses d3.scaleLinear, d3.line with d3.curveStep and d3.curveNatural, and d3.axisTop, d3.axisLeft, and d3.axisRight for separate scales. Two overlaid groups handle the series, with custom stroke and fill colors distinguishing them.

Loading thumbnail…

D3 Example 3

Two interactive D3 examples demonstrate HTML list construction and selection. The first version displays the phrases “From East,” “to West,” “at Home,” and “is Best” as clickable list items; each click toggles the text color between red and blue using a 500-millisecond transition applied via D3’s `transition()` method. The second, simpler version uses `d3.select`, `append`, `selectAll`, and `data().enter()` to build the same static list without interactivity. Both rely on D3 v7, initiated through the `body` element’s onload event.

Loading thumbnail…

D3 Example 2B

This visualization compares two datasets, y1 and y2, sharing the same x-axis from a tab-separated TSV file. It renders both series as SVG circles and paths using distinct color schemes: y1 appears in green and black, while y2 uses red and blue. The chart applies two curve interpolation methods, `d3.curveStep` for y1 and `d3.curveNatural` for y2, to show different line shapes. Axes are generated with `d3.axisTop`, `d3.axisLeft`, and `d3.axisRight` using linear scales created via `d3.scaleLinear` with `d3.extent` and `.nice()` for domain calculation.

Loading thumbnail…

D3 Example 2

Two datasets, `y1` and `y2`, are plotted against a shared `x` axis, showing how their values diverge over the same input range. The visualization uses a single SVG canvas with green and blue circles for each dataset, and red and black line paths connecting the points. Built with D3 v7, it loads tab-separated data from `example2.tsv` using `d3.tsv`, scales both axes with `d3.scaleLinear`, and computes the line paths with `d3.line`. The layout positions axes within a 700×400 pixel light-gray SVG.

Loading thumbnail…

D3 Example 1

This example plots five red circles on a light grey SVG canvas, with each circle’s position determined by x and y coordinates loaded from a tab-separated values file (`example1.tsv`). The visualization uses D3 v7, fetching the data via `d3.tsv()` and binding it to circle elements through `selectAll().data().enter().append()`. The circles are styled with fixed radius and fill color, while their `cx` and `cy` attributes are set directly from the data values, producing a simple scatterplot without any scales or axes.

Loading thumbnail…

Mouse

A black circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates React's `useState` and `useCallback` hooks to manage and update the circle's coordinates based on `mousemove` events, while D3.js v7 is loaded but not directly used. The visualization shows a minimal interactive pattern, where the circle moves fluidly with cursor movement and renders via React's declarative JSX syntax.

Loading thumbnail…

Let's Make a Face

A grid of 171 randomly generated faces fills the screen, each built from SVG circles and arcs. The React components—BackgroundCircle, Eyes, and Mouth—draw a yellow smiley with black outline, while the Face container uses the d3 `arc` generator for the mouth shape. Each face randomizes eye offset, mouth radius, and vertical translation, creating a playful, varied wall of cartoon characters. The example demonstrates modular React composition with d3-generated paths inside an SVG renderer.

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a React SVG component scales to fill the browser window. The code defines circle elements for the head, eyes, and mouth using fixed offsets and radii, with the face centered via a transform. ReactDOM renders the SVG tree to the page, using hard-coded numeric values instead of external data. The example demonstrates declarative SVG composition within React’s rendering pipeline.