Skip to main content
SimilarExport ZIP
100%

Quantatieve vs Categorical

✓ Published1🌍 Public
BBart van Pelt
Last edited Jan 23, 2023
Created on Jan 21, 2023

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

Using dataset from https://opendata.cbs.nl/statline/portal.html?_la=nl&_catalog=CBS&tableId=84064NED&_theme=384

Observations:

  • data available, but not in form direct usable by scatterplot
  • some data have 'missing' values - how to handle them
MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Quantatieve vs Categorical

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.

BBart van Pelt
80% match
Loading thumbnail…

Fork of Scatter Plot

A scatter plot visualizes house sale prices over time, with each data point colored by property type and bedroom count. Interactive dropdown menus let users choose which columns to map to the X and Y axes. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and d3.transition with attribute tweening for animated circle placement. Data comes from a CSV file containing sale dates, median prices, property types, and bedroom counts.

Ddaniel
72% match
Loading thumbnail…

categorical/quantitative transitory dynamic resusable d3 scattermap with options

This interactive scatterplot displays Fisher’s Iris dataset, with dropdown menus to select categorical or quantitative attributes for the x- and y-axes. Built with React and D3.js, the visualization uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates the points and axes as the user changes selections. The SVG rendering includes colored species markers with tooltips, and a dynamic legend updates accordingly.

SSuperShreejit
71% match
Loading thumbnail…

Interactive Scatter Plot for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, with dropdown menus to select X and Y axes. Points encode Charles River proximity via color and pupil-teacher ratio via size. Hovering over legend items filters and highlights matching points by adjusting opacity (20%, 50%, 80%). Built with React and D3 v5, it uses `scaleLinear` for positioning and size, `scaleOrdinal` for color, and SVG rendering. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Yyuzhang21
70% match
Loading thumbnail…

Scatter Plot with Menus for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, which includes 14 attributes such as crime rate, room count, and median home value. Users select any two variables from dropdown menus to map to the X and Y axes, while point color encodes proximity to the Charles River, size reflects pupil-teacher ratio, and 35% opacity reveals overlapping points. The visualization uses React with d3.scaleLinear and d3.scaleOrdinal for scaling, SVG for rendering, and fetches CSV data via d3.csv, with tooltips showing median home value.

Yyuzhang21
70% match
Loading thumbnail…

Scatter Plot with categorical data

An interactive scatter plot explores the Iris dataset, letting users choose which quantitative or categorical measurements appear on the x-axis via dropdown menus. The visualization updates smoothly with animated transitions between selections, using D3 v6's `selection.join` to handle entering, updating, and exiting circles. The chart renders as SVG, with axes from `d3.axisLeft` and `d3.axisBottom`, while the menu system is built with a reusable `d3.dispatch` pattern. New points grow from radius zero, and updates stagger with a slight delay.

LLouis Astorg
70% match
Loading thumbnail…

Scatter Plot w. 2 Quantitative Attributes

A scatter plot displays the relationship between two quantitative attributes, population and price, for three countries. Each circle represents a country, with its position determined by these values and its size scaled by mileage. The visualization uses D3 v5 to load CSV data from a Google Sheet and render an SVG. It employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the data mapping occurs through the `csv` and `select` functions.

Jjf1978
70% match