martvdmarel

@martvdmarel·3 public vizzes

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities around the world, sourced from Data Canvas - Sense Your City. Each city appears as a smooth curve, colored by a categorical scale and sorted by its final temperature. The visualization uses D3 v5 with SVG rendering, employing `d3.line` with `curveBasis`, `d3.nest` for grouping, and `scaleTime`/`scaleLinear` for axes, plus a custom color legend component.

Sep 11, 2020

Loading thumbnail…

Dinner App

Two interactive panels let a user select ingredients to filter a list of dinner recipes. Clicking an ingredient toggles it between required, excluded, and neutral; the recipe list updates instantly to show only meals matching those constraints. The interface uses D3 v5 with SVG rendering, building ingredient buttons and recipe rows as groups of text and rectangles. Filtering logic in `filterRecipes.js` compares ingredient arrays, while `renderIngrs.js` and `renderRecps.js` manage the visual updates. All recipe data comes from an embedded JSON array in `recipes.js`.

Jul 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is built entirely with D3.js v5 selections and SVG elements. The code uses `d3.select` to target an SVG container, `d3.arc` to draw the mouth as a path, and chained `transition.attr` calls to repeatedly move the eyebrows up and down over 2-second intervals. Circles and rectangles form the eyes and brows, with positions calculated relative to the SVG center.

Jun 18, 2020