CasperHogenboom

@CasperHogenboom·6 public vizzes

Heatmap

A heatmap displays the value of a product across five countries, with each cell color-coded by the numeric value. The visualization uses a threshold color scale to map values into three colors, while missing data appears as blank cells. The code loads data from a CSV file and renders the heatmap as SVG rectangles using d3.csv, d3.scale.ordinal, d3.svg.axis, and d3.scale.threshold.

Nov 1, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The code uses D3 v5 to load CSV data from a VizHub dataset, parse numeric fields, and render an SVG visualization. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and appends circles with a fixed radius to encode the data points. The chart includes labeled axes and a title, styled with custom CSS for fonts and circle opacity.

Nov 1, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot visualizes the relationship between sneaker shoe size and sale price for Yeezy and Off-White brands, using data from a custom CSV file. The chart displays individual data points as semi-transparent circles, with shoe size on the x-axis and sale price on the y-axis, allowing viewers to see price variations across different sizes. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and SVG circle elements for rendering. The code loads data via `csv()` and parses numeric fields before rendering.

Oct 7, 2019

Loading thumbnail…

Ordinal Scatter Plot

An ordinal scatter plot displays the population of the top 10 most populous countries from the 2017 United Nations World Population Prospects estimate. The visualization uses d3.scaleLinear and d3.scalePoint to map population values to x-coordinates and country names to y-coordinates, rendering circles with d3.select and SVG. Population data is loaded from a CSV file and converted to numeric values before the chart is drawn.

Oct 7, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays the population of the top 10 most populous countries in 2018, with each country represented by a circle on an unlabeled ordinal scale. The visualization renders SVG circles using d3.v5, employing `scaleLinear` for the population axis and `scalePoint` for country positioning, while `axisLeft` and `axisBottom` generate the tick marks. The code loads data from a CSV file via `d3.csv`, multiplies each population value by 1,000, and binds the resulting array to circle elements. The chart uses empty styling for circles, showing data points without connecting lines or additional annotations.

Oct 7, 2019

Loading thumbnail…

Lets make a face

This example assembles a smiling cartoon face from basic D3 shapes, including a bright yellow circular head, black eyes, and a curved arc mouth. It showcases manual SVG construction through D3 selections and the `d3.arc` generator for the mouth’s path. The face is centered by translating a group element, while eyes are positioned with explicit `cx` and `cy` offsets. The code relies on D3 v5’s `select`, `arc`, and attribute methods, rendering entirely in SVG with no external data source, demonstrating coordinate math and layout composition.

Oct 3, 2019