Prayagvin

@Prayagvin·4 public vizzes

Making a bar graph!

A simple bar chart displays population data for ten countries from a CSV file. The bars extend horizontally, with their lengths scaled proportionally to each country's population. The visualization uses D3.js, employing the `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` APIs. The SVG canvas is 960 by 500 pixels, and the rendering is done directly in SVG. The code converts the population values from thousands to actual numbers before mapping them to pixel widths.

Jul 29, 2020

Loading thumbnail…

Lets make a face!

A smiling face made of SVG shapes animates its eyebrows upward and downward in a loop. The yellow circular head, two eyes, and arc-shaped mouth are drawn with D3 selections and an `arc()` path generator. Eyebrow motion uses chained `transition().duration(2000)` calls to shift the group’s `transform` attribute. The example runs in React, rendering static SVG elements with D3 v5.

Jul 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes such as circles, rectangles, lines, and paths can be styled and transformed using SVG attributes and CSS. It shows the interaction between inline presentation attributes like `fill` and `stroke`, CSS classes, and nested `<g>` elements for grouping. The code uses the React framework to render a static SVG with a scale transform and a translate transform. CSS rules in the stylesheet apply stroke and fill styles to line and path elements, illustrating the layering of SVG styling methods.

Jul 28, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello" in the browser, centered with a very large font size, alongside a minimal HTML document structure. It serves as a bare-bones template for starting a visualization, using the native HTML5 `<!DOCTYPE html>` declaration, a `<style>` tag for CSS styling, and a `<script>` tag that outputs "Hello JavaScript" to the console. No external libraries are loaded. The page is rendered directly by the browser, and the data is static, defined entirely within the HTML and CSS.

Jul 21, 2020