Swetha Susan George

@SwethaGeo·8 public vizzes

Bar charts

This example displays a bar chart of population counts for five countries—China, India, USA, Indonesia, and Brazil—loaded from a CSV file. The code uses D3 v5 APIs `select` and `csv` to fetch and parse the data, converting population values to numbers. An SVG element occupies the full viewport, though bar rendering is not yet implemented. The visualization currently only logs the parsed data to the console, with CSS classes defined for potential line styling.

Aug 13, 2020

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face drawn with SVG shapes in D3.js v5, featuring two black circular eyes and a curved arc-based mouth rendered as a path. The code uses `d3.select` to target an SVG element, `d3.arc()` with inner and outer radii and angular values to construct the smile, and attribute setters like `.attr()` for positioning. The face is centered via a translation transform, with static dimensions set in the HTML. This example highlights fundamental D3 shape generation and SVG manipulation.

Aug 13, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, featuring two eyes that enlarge over time and a smiling mouth shaped by an arc. The example demonstrates SVG rendering and animation in a React framework using D3.js v5. It uses `d3.select` and `d3.arc` to construct the shapes and applies `transition().duration(2000)` to animate the eyes from a radius of 20 to 30 pixels. The face is centered via a translation transform.

Aug 13, 2020

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js to draw a simple cartoon face out of SVG shapes, including a yellow circle for the head, black eyes, and a mouth formed with an SVG path built from an arc generator. The eyes animate by using D3’s `transition().duration()` to smoothly increase their radius from 20 to 30 pixels. The code imports `select` and `arc` from D3 v5, centers the group using a translate transform, and renders everything within a static SVG canvas. The face is purely illustrative, with no external data source.

Aug 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, including circles, a rectangle, a line, and a freeform path composed of straight line segments. The illustration shows how SVG’s group element can apply transform attributes such as scaling and translation, while a CSS class can be used to set stroke color and width properties on shapes. The code relies on direct SVG markup for the drawing and a connected stylesheet for presentation, using no external libraries or JavaScript.

Aug 12, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic geometric shapes—circles, rectangles, lines, and paths—rendered within an SVG canvas. It demonstrates how CSS classes, such as `.lines`, can control stroke color and width, while SVG presentation attributes like `fill`, `stroke`, and `transform` (including `scale` and `translate`) style individual elements. The code uses raw SVG markup in an HTML file, linked to an external stylesheet, to combine vector graphics with cascading style rules.

Aug 12, 2020

Loading thumbnail…

Different Cars

This example displays a simple list of car brands—Benz, Jaguar, BMW, and Ferrari—with the first item highlighted in red. The page is built with plain HTML and styled using CSS, featuring a powder-blue background, monospace font, and large text. The React framework is listed as the environment, though the visible code relies directly on HTML elements and a dedicated CSS class for the highlight effect.

Aug 12, 2020

Loading thumbnail…

HTML Starter

This example shows how to display a single value from a static JSON dataset in a web page. It parses an embedded array of car objects using `JSON.parse` and writes the first car’s make to the page via `document.getElementById` and `textContent`. The page structure is defined in HTML with a `<pre>` element, styled by inline CSS, and the JavaScript logic runs in the browser without any external libraries or frameworks.

Aug 12, 2020