Data Visualisation

100%

Data Visualisation

✓ Published0🌍 Public

Last edited Jun 16, 2023

Created on Jun 16, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

MMbabazi Elizabeth Shirley

82% match

Loading thumbnail…

Elections Data

This visualization displays the geographic distribution of cities in Uganda on a Mercator projection map, with each city marked by a red circle. The map shows Uganda’s administrative boundaries using U.S. Atlas TopoJSON data, rendered via `d3.geoPath` and `d3.geoMercator`. City coordinates from a local CSV are plotted as circles, with zoom and pan enabled through `d3.zoom`. Tooltips appear on mouseover, though the code also includes transitions and scaling transformations for the circles.

JJOSHUA BUSINGE

71% match

Loading thumbnail…

D3 Stuff

This visualization displays the percentage of population with improved drinking water coverage for selected countries, using a horizontal bar chart where bar length represents coverage percentage. The chart employs D3 v5 with scales, specifically `scaleLinear` for the x-axis measuring coverage values and `scaleBand` for the categorical y-axis listing country names. Data is loaded from a CSV file using `csv`, with the coverage field parsed as numbers. SVG rectangles are bound to the dataset, and axes are generated with `axisLeft` and `axisBottom`.

Ddanjaruss

71% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This visualization displays population data for five African countries as horizontal bars, with each bar’s width scaled to the population value using `scaleLinear` from D3 v5. The example renders purely as SVG elements (`rect`) styled through CSS, with the data loaded from a CSV file via `d3.csv` and mapped into numeric values. The chart does not use axes or labels, emphasizing raw shape and color through a minimal layout.

AArtem Bykov

70% match

Loading thumbnail…

Plot Countries

This example visualizes religious populations across countries from a CSV file, displaying each country’s data as rectangles in an SVG. It uses D3 v5’s `csv` loader to parse the data, converts population values to numbers, and appends rectangles via `selectAll` and `data` binding through the `enter()` selection. The `scaleLinear` is configured but not applied, leaving the rectangles fixed at 300 by 300 pixels. The visualization demonstrates basic data loading and SVG element creation without implementing axes or dynamic scaling.

VVipul Gaurav

70% match

Loading thumbnail…

Fork of Let's make a Ugandan Map

This example displays a GeoJSON map of Ugandan districts, loading the data from a gist URL and logging it to the console. The visualization renders an SVG container sized at 960 by 500 pixels, with the district boundaries drawn using D3 v5’s `json` method for asynchronous data fetching. The code sets up the SVG selection and dimensions, but does not yet compute paths or render the map geometry; it only logs the fetched GeoJSON data to the console for inspection.

BBRIAN JORAM WANDOBIRE

69% match

Loading thumbnail…

Fork of Shapes with SVG

This visualization displays population data for 14 countries using horizontal bars rendered as SVG rectangles. The code loads data from a CSV file and multiplies the population values by 1000. It uses d3.scaleLinear for the x-axis scale and d3.scaleBand for the y-axis, though the bar heights are fixed at 300 pixels and the y-scale is not applied to the rectangles. The example demonstrates basic data loading with d3.csv, scaling, and SVG element creation.

Aabhimanyu-dhar

68% match

Loading thumbnail…

Shapes with SVG and CSS

This example visualizes country population data from `dataSet.csv` as simple SVG shapes, initially rendering a blank 900-by-580-pixel canvas. It uses D3 v5 to load and parse the CSV, converting the population strings to numbers. The example demonstrates styling with CSS by targeting `.lines` and `.lines path` rules, though the JavaScript only logs the parsed data to the console and does not yet draw any marks. The SVG and CSS structure suggests potential for future path-based charting, but the current code stops at data preparation.

Mmorjyooo

68% match