Skip to main content
SimilarExport ZIP
100%

Quantatieve vs Categorical

✓ Published0🌍 Public
BBart van Pelt
Last edited Jan 31, 2023
Created on Jan 21, 2023

An interactive scatter plot compares food products by quantitative attributes like carbohydrates, fat, and calories, sourced from koolhydraten.nl. Dropdown menus let users switch the x- and y-axis variables or filter by product, and the plot animates transitions between selections using D3 v7 transitions. The visualization uses `scaleLinear` and `scalePoint` to handle quantitative and categorical dimensions, rendered as SVG circles with tooltips showing product details.

AI-generated description

Exercise

Added tooltip based on:

MIT Licensed

Similar vizzes

Loading thumbnail…

Quantatieve vs Categorical

This interactive scatter plot explores the relationship between quantitative and categorical variables from Dutch housing market data, showing how visual encoding changes based on data type. Users select columns for the x- and y-axes via dropdown menus, with categorical values positioned using `d3.scalePoint` and quantitative values using `d3.scaleLinear`. Points animate smoothly between configurations using `selection.join` with `transition`. The plot renders as SVG using D3 v7, drawing from CBS Statline data on house prices and sales volumes across new and existing properties.

BBart van Pelt
80% match
Loading thumbnail…

1 dimensional Scatter Plot

A one-dimensional scatter plot displays discrete quantities for categorical food items, with each circle positioned along a linear scale for quantity and a point scale for item names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering circles as SVG elements. Data loads from a local CSV file containing item and quantity pairs. The chart includes labeled axes, a title, and horizontally aligned tick marks that extend across the plot area to aid comparison.

FFhouston17
73% match
Loading thumbnail…

Added timescales Quantatieve vs Categorical

This interactive scatter plot visualizes Dutch housing market data from CBS Statline, comparing price indices, sales volumes, and average prices for new and existing homes from 2015 to 2022. Users can select any quantitative or categorical variable for the x- and y-axes via D3 menus. The visualization handles mixed data types using `d3.scalePoint` for categorical variables and `d3.scaleLinear` for quantitative ones, with smooth transitions via `selection.join` and `transition.attrTween`. Circles are drawn as SVG elements with animated radius growth on entry and exit.

BBart van Pelt
73% match
Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Ssrrajendran
73% match
Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes cereal data, showing the relationship between two user-selectable nutritional attributes (such as sugars and calories) via dropdown menus. Points are colored by manufacturer using a categorical scale with an interactive legend; clicking a legend entry highlights that manufacturer’s cereals and filters out others. The visualization uses D3.js v5 with SVG rendering and animated transitions, leveraging `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateViridis` for colors. Data comes from a CSV file of cereal ratings.

Ssrrajendran
73% match
Loading thumbnail…

Fork of Exersice Episode 8 - Scatter plot + tooltips

This scatter plot visualizes nutritional data from koolhydraten.nl, plotting kilocalories on the x-axis against fat content on the y-axis for a range of food products. Each circle represents a product, with native SVG tooltips displaying the product name, carbohydrate, fat, and kilocalorie values on hover. The visualization uses D3 v6 to load the CSV dataset with `d3.csv`, scales the data with `scaleLinear`, and renders the circles and axes via SVG elements. Interactive tooltips are added by appending `title` elements to each circle, providing detailed information without requiring additional DOM manipulation.

BBart van Pelt
72% match
Loading thumbnail…

Food Color Categories

This interactive scatter plot, built with React and D3, visualizes the nutritional profiles of foods from the USDA FoundationFoods dataset. Users can select nutrients for the x- and y-axes, toggle between logarithmic and linear scales, and optionally map point size to a chosen nutrient. The visualization uses D3's `scaleLog` and `scaleLinear` for axes, and color-codes points by food category. Optionally, it can fetch food images from Wikipedia via a web API and use them as point patterns within the SVG.

RRyan Offstein
71% match
Loading thumbnail…

Scatter plot with menus

A scatter plot displays the relationship between two numeric attributes from a dataset of 1970s cars, encoded as circles positioned by linear scales. Two dropdown menus let viewers switch which columns appear on the x- and y-axes, triggering a smooth animated transition of all points via `d3.transition`. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, rendering as SVG with interactive menus built through a reusable `dropdownMenu` module.

Aarieltonglet
70% match