T E Simon

@tesimon·3 public vizzes

Fork of Parallel Coordinates with Brushing

An interactive parallel coordinates plot visualizes the Iris dataset, with each line representing a flower sample across four quantitative measurements and its categorical species. Users can brush along any vertical axis to filter the displayed lines across all dimensions. The visualization implements responsive resizing and animated transitions between filter states. Built with React, it uses the D3.js library’s `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line`, and `brushY` APIs, alongside CSS `mix-blend-mode` for line rendering.

Mar 16, 2024

Loading thumbnail…

Choropleth Map with zoom,rotation and hover

This choropleth map visualizes World Bank GDP per capita data on a world atlas, using D3's `geoOrthographic` projection and `geoPath` to render countries color-coded with a quantile `schemeYlGnBu` scale. Users can rotate the globe by dragging, zoom with the mouse wheel, and hover over countries to see tooltips with the country name and GDP value. A color legend indicates low and high values, and the visualization responds to window resizing.

Feb 26, 2024

Loading thumbnail…

let's animate the face

A yellow smiley face is drawn as an SVG circle with eyes, eyebrows, and a mouth, all positioned using D3.js selections and attribute helpers. The eyebrows and mouth animate via chained `transition.attr` calls, moving vertically and scaling over two-second intervals, demonstrating fundamental DOM manipulation with `d3.select`, `d3.arc`, and transition methods. The example uses D3 v5 and renders entirely in SVG.

Feb 2, 2024