Mbabazi Elizabeth Shirley

@Shirley-Liz·3 public vizzes

Fork of Let's make a face with D3.js!

This visualization maps water quality measurements from a CSV file across villages in Uganda, rendering turbidity data as colored rectangles. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, and `max` functions to load the data, compute a domain based on maximum turbidity, and append SVG rectangles with fixed dimensions. A smiley face design with animated eyebrows serves as the visual framework, while the data-driven rectangles are positioned without explicit coordinates, leaving placement to the default SVG layout. The page includes a linked tutorial video and uses a minimal SVG container with CSS styling.

Jun 16, 2023

Loading thumbnail…

Data Visualisation

This visualization displays water quality measurements from villages in Uganda, plotting each sample as a rectangle positioned by latitude and longitude. The SVG rendering uses D3 v5’s `csv` loader to parse the tab-delimited data and `scaleLinear` for coordinate mapping. Each rectangle is appended via `selectAll('rect').data().enter()`, though the current code only sets a fixed 300-pixel width and height without encoding other variables. The example serves as a basic template for geospatial data plotting with D3’s data-binding approach.

Jun 16, 2023

Loading thumbnail…

Fork of Fork of Hello D3 Version 6

This example demonstrates the simplest possible D3.js v6 visualization: a single HTML element displaying the text “hello word!” in large green letters. The page loads D3 from a CDN and uses the `d3.select` method to target the body element, then chains `.text()`, `.style()`, and `.style()` to set the content and formatting. The code relies entirely on D3’s selection API, with no data binding or scales, and the styling is applied directly via inline CSS properties like `color` and `font-size`.

Jun 16, 2023