RonaldKaweesi

@RonaldKaweesi·7 public vizzes

Making a Bar chart

This bar chart displays population figures for ten countries, using horizontal rectangles positioned along an SVG canvas. The example demonstrates a basic D3 data-join workflow: it loads a CSV file with `d3.csv`, converts the population strings to numbers, and scales the data with `d3.scaleLinear`. However, the current implementation only appends empty rectangles with fixed dimensions; it does not yet bind the scaled data to the bar heights or widths, leaving the visualization incomplete.

Oct 6, 2019

Loading thumbnail…

Lets make a face with D3.js

This chart displays population data for the top ten countries by comparing their respective values. The visualization presents a simple bar chart with a fixed width of 300 pixels for each bar, rendered using the Scalable Vector Graphics (SVG) element within an HTML page. Built with D3.js v5, the code selects the SVG element and appends rectangle shapes to represent each data point. The population figures are read from a CSV file, parsed, and multiplied by 1000 to convert from thousands to actual population counts before being rendered.

Oct 6, 2019

Loading thumbnail…

Lets make a face with D3.js

A yellow SVG face is drawn with D3.js v5, featuring a circular head, two eyes, eyebrows, and a mouth created using `d3.arc`. The eyebrows animate vertically via `transition().duration()`, shifting downward over two seconds. The face is centered using an SVG group transform, with eye positions spaced by fixed pixel offsets. The code uses `select`, `arc`, and SVG shape elements like `circle`, `rect`, and `path`. Population data in `data.csv` is loaded but not rendered in the visualization.

Oct 6, 2019

Loading thumbnail…

Shapes with SVG and CSS

A large black circle spans the full height of an SVG canvas, centered with its radius set to half the viewport height. Two smaller circles serve as eyes, positioned symmetrically with fixed spacing and a vertical offset, creating a simple face-like composition. The example demonstrates basic SVG shape creation and styling using D3 v5’s selection and attribute methods, such as `svg.append("circle")` and `.attr()`, alongside CSS resets that remove page margins and hide overflow. Rendering relies entirely on SVG elements manipulated through D3’s declarative API.

Oct 5, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes can be arranged and styled within an SVG canvas, using both inline attributes and CSS classes. It demonstrates a red circle, a green rectangle, and a blue group containing two rectangles and a circle, with a black line and a yellow path outlined. The rendering relies on SVG elements like `<rect>`, `<circle>`, `<line>`, and `<path>`, while the linked `styles.css` file provides global styling, including a `.highlighted` rule. Shapes are positioned directly via absolute coordinates and transformed using the `translate` attribute.

Oct 5, 2019

Loading thumbnail…

Cars Report

This example shows a list of cars that costs less than $2,000, rendered as a text report on a webpage. It demonstrates how to use JavaScript modules and asynchronous data handling to generate a text-based visualization. The code uses `JSON.parse` to process embedded car data, a `Promise` to simulate a delayed data fetch, and exports functions like `formatCar` and `generateReport` to filter and format the output. The result is displayed in an HTML `<pre>` element.

Oct 5, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering a dataset of five vehicles by price and formatting each entry into a readable string. The code parses embedded JSON data using `JSON.parse`, applies a filter to exclude cars above a maximum price, and maps each car object to a formatted line with `formatCar`. The resulting report is rendered in a large font within an HTML `<pre>` element, styled with CSS, and assembled through JavaScript modules that export and import functions.

Oct 5, 2019