vcabgar

@vcabgar·5 public vizzes

Arrays

This example demonstrates how to generate and log an array of sequential integers using JavaScript. The code defines a `range` function that constructs an array of numbers from 0 up to (but not including) a specified length, then calls it with the argument `4` and prints the result to the browser console. The visualization relies on native JavaScript array methods and the `console.log` API, with no external libraries or rendering framework involved.

May 19, 2022

Loading thumbnail…

D3 Starter

This example shows the minimal setup for rendering text with D3 version 7. The code selects the body element and sets its text content to “Hello D3 version 7”, demonstrating the core `select` API from the `d3` module. The page uses a CDN-loaded D3 library and a bundled JavaScript file, with a large font size applied via inline CSS. It highlights the basic structure for starting any D3 project.

May 19, 2022

Loading thumbnail…

vcabgar pseudo sactter plot

Five black circles are positioned on a white background, each with a distinct x and y coordinate, creating a sparse pseudo-scatter plot. The SVG also contains a single text label, "assdfgf," placed near the first circle. The page is built with a minimal HTML structure and uses inline SVG elements for all shapes. The included JavaScript only writes console output, showing a loop from 0 to 5, and does not affect the visual.

May 18, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart uses SVG rendering within a React component, leveraging D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Axes are drawn with custom React components (`AxisBottom`, `AxisLeft`), while `Marks` renders each bar with a tooltip. Population values are formatted with D3’s `format` function, converting large numbers to billions with a "B" suffix.

May 15, 2022

Loading thumbnail…

SVG Fund

This example displays a single red circle on a blank canvas. The visualization is rendered as an SVG element, using a basic circle shape with center coordinates and a radius. The source data is a static HTML file, with the circle drawn directly within the SVG markup. The code relies solely on standard SVG syntax, with the circle element defining the visual, and no external JavaScript libraries or data-processing APIs are used. It shows a simple geometric form without any interaction or animation.

May 15, 2022