Nino Schelcher

@ninoschelcher·10 public vizzes

Exploring RDW data - Basic chart with filtering

This example visualizes Dutch parking facility data from the RDW, displaying each location’s capacity as a bar chart. A checkbox filters out entries with unknown capacity, dynamically updating the axes and bars. The visualization loads local JSON via `d3.json` (through a helper `getData`), uses `d3.scaleBand` and `d3.scaleLinear` for scaling, and renders SVG rectangles with D3 v6 selection and data-join methods. Interactive filtering triggers `filterUnknown`, which updates domains and redraws bars with enter, update, and exit patterns.

Nov 10, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This interactive world map displays country names on hover, with countries colored light green and the ocean blue. Users can zoom and pan the map using mouse interactions. The visualization uses D3 v5's geoNaturalEarth1 projection and geoPath for rendering, with d3.zoom and d3.event handling the interaction transforms. Country names come from the world-atlas 50m TSV dataset, matched to geographic features via ISO numeric codes. The SVG rendering uses hover states to highlight countries in red.

Nov 5, 2020

Loading thumbnail…

World Population — Area Chart

This area chart visualizes world population growth from 1950 onward, with the x-axis representing years and the y-axis showing population counts in billions. The chart uses a smooth curve (via `curveBasis`) to connect data points, creating a filled area rendered in green. Population data is loaded from a CSV file and parsed with D3’s `csv` function, while the visualization leverages D3 v5 components like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The SVG output includes labeled axes, a title, and a dashed grid, all styled with custom CSS.

Nov 4, 2020

Loading thumbnail…

Temperatures in San Fransisco —Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with each green circle representing a data point plotted along time and temperature axes. The chart includes labeled axes for time and temperature, along with a title. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for ticks, and SVG circles for rendering. Data comes from a CSV file loaded via `d3.csv`, with timestamps parsed as dates and temperatures converted to numbers.

Nov 4, 2020

Loading thumbnail…

Temperatures in San Fransisco — Line Chart

This line chart displays temperatures in San Francisco over time, using a smooth curve to connect the data points. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the curved path, and `axisBottom`/`axisLeft` for the ticks. Data is loaded from a CSV file, with timestamps parsed as dates. The chart is rendered as an SVG, featuring a thick green line and labeled axes.

Nov 4, 2020

Loading thumbnail…

Temperatures in San Fransisco — Area Chart

This area chart displays hourly temperature readings in San Francisco over time, with a smooth green curve filled to a baseline. D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` produce the waveform, while `axisBottom` and `axisLeft` add labeled, grid-lined axes. The data is loaded as CSV from a remote dataset, parsed into timestamps and numeric values, and rendered as an SVG path with custom tick and title styling.

Nov 4, 2020

Loading thumbnail…

Line Chart

This line chart displays the population of seven countries, with each country on the y-axis and its corresponding population value on the x-axis. The SVG visualization uses D3 v6 functions such as `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to create a scatter plot with dark green circular markers. The vertical axis lists country names, while the horizontal axis is scaled logarithmically to accommodate population values that are multiplied by 1000 in the code before rendering.

Nov 4, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes population estimates for seven countries, with each circle positioned along a linear scale for population and a point scale for country names. The visualization renders as an SVG using React and D3 v6, employing `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the axes and plot circles with dark green fill. The data is embedded as a static array and multiplied by 1,000 before being drawn.

Nov 4, 2020

Loading thumbnail…

Bar Chart

This bar chart visualizes population data for seven countries, with horizontal bars representing each nation’s population count. The chart is rendered as an SVG using React and D3 v6, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axis labels are generated with `axisLeft` and `axisBottom`, while data is bound to rectangles using D3’s selection API. The page loads D3 from a CDN and styles text elements via CSS.

Nov 4, 2020

Loading thumbnail…

Lets make a face

A stylized face built entirely from geometric primitives, with a red circular head, two eyes, angular eyebrows, and an arc-based mouth. The example demonstrates fundamental D3 v6 SVG drawing using selection, `arc`, and attribute manipulation within a React framework. It constructs the face from a central circle, offset eye groups, rotated rectangles for eyebrows, and a path generated by the `arc` generator, translating groups to position each feature.

Nov 2, 2020