Kaavya Lakshmanan

@kaavyalakshmanan·6 public vizzes

Making A Bar Chart

A bar chart displays population data for ten countries, encoded as a sequence of SVG rectangles. The chart uses D3 v5 to load a CSV file with `d3.csv`, parse the population values, and bind the data to SVG `<rect>` elements via D3's `selectAll('rect').data()` join. The visualization renders at a fixed 960 by 500 pixel SVG canvas without additional layout or axis logic.

Jan 13, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible web page: a single HTML file that renders the text “Hello HTML” in the center of the browser window using plain CSS. It uses no external libraries or JavaScript, relying solely on the HTML `<style>` tag to set the body’s text alignment and a large font size. The page serves as a minimal starting point for understanding the structure of an HTML document before adding interactive visualizations.

Jan 10, 2020

Loading thumbnail…

Shapes with SVG and CSS

This gallery example demonstrates drawing basic geometric shapes and lines within a web page. The SVG element positions circles and rectangles, which are then styled with CSS for color, stroke, and line-join properties. The code uses HTML5's `svg` API and a linked stylesheet to directly manipulate vector shapes, showing how coordinate transforms, like `scale` and `translate`, can group and reposition elements within the canvas.

Jan 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in an SVG using D3.js v5. The face consists of a circle, two eyes, animated rectangular eyebrows, and a mouth created with the d3.arc path generator. The eyebrows transition their vertical position over two seconds using chained transition calls, moving downward and back upward. The code uses d3.select and attribute manipulation to position elements relative to the SVG’s center.

Jan 10, 2020

Loading thumbnail…

HTML Cars Report

This example shows a plain HTML page titled “Cars Report” that displays three car listings as bulleted text, with the first item highlighted in red. It demonstrates basic document structure using an HTML `<ul>` list for the data entries and a separate CSS file (styles.css) that sets the body font size to 3em, uses a monospace font, and applies a `highlighted` class to color one entry. The visualization relies solely on static HTML markup and CSS styling, with no JavaScript libraries or data-loading mechanisms. The data is hardcoded directly in the HTML, listing each car’s year, model, and price.

Jan 9, 2020

Loading thumbnail…

Cars Report

This example shows a formatted text report of cars filtered by price. It displays a loading message, then fetches a hardcoded JSON dataset of five cars via a simulated network request using Promises. The report lists each car’s year, make, model, and price for those under $2,000, generated with a custom `formatCar` function and `generateReport` that filters and maps the array. The React-based code uses native JavaScript array methods and string concatenation, writing results into an HTML `<pre>` element via `textContent`.

Jan 9, 2020