Added timescales Quantatieve vs Categorical

100%

Added timescales Quantatieve vs Categorical

✓ Published0🌍 Public

Last edited Jan 23, 2023

Created on Jan 23, 2023

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.

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…

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

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

73% 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

70% match

Loading thumbnail…

CBS Dataviz nL

This visualization shows the number of Dutch people vacationing in the Netherlands per quarter, comparing 2019 data with 2020 (the Corona year) via an interactive checkbox. D3 v6 renders animated SVG bars that grow from the baseline when switching between years, using `d3.scaleLinear` and `d3.scaleBand` for axes. The data comes from a GitHub-hosted CBS JSON endpoint, with all bars transitioning smoothly over two seconds via D3's `.transition()` method.

NNathan Neelis

70% match

Loading thumbnail…

rvasp2

This example visualizes two time series of housing affordability indices—new and used asking prices—as separate line charts overlaid on a shared time axis. The data spans 2013 to 2016, sourced from a small CSV file. The visualization uses D3.js v4 to parse the dates, scale the x- and y-axes with `d3.scaleTime` and `d3.scaleLinear`, and draw smooth lines with `d3.line` and `d3.curveBasis`. Two independent y-scales (left and right) are defined, with gridlines and axis ticks generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. The rendering is done in SVG, with line strokes colored MidnightBlue and Orange.

335degrees

69% match

Loading thumbnail…

Seattle House Price Scatter Plot with Menus

This interactive scatter plot visualizes 2015 Seattle house prices, with each circle representing a home colored by number of floors. Users select X and Y axes from dropdown menus to explore relationships between attributes such as year built, price, living area, and lot size. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components handle rendering. The data loads via D3’s `csv` parsing from a GitHub Gist.

GGeniXiong

67% match

Loading thumbnail…

hw6

This visualization shows quarterly median property prices for houses with 2 to 5 bedrooms from 2007 to 2019, using a stacked area chart to compare price trends across these groups. The chart uses D3 v6’s `csv` loader to fetch data from an external URL, `scaleLinear` for the axes, and `stack` with `stackOffsetSilhouette` for layering, though the offset is commented out. Each bedroom category is rendered as a distinct SVG path via `d3.area`, with an ordinal color scale distinguishing the series. The y-axis displays a fixed range of -100,000 to 100,000, and the x-axis uses five ticks for readability.

Kkenny-wq

67% 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

67% match