shahbaj1999

@shahbaj1999·6 public vizzes

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses plain JavaScript to insert dynamic text into a paragraph element. The code selects the paragraph with `document.querySelector` and sets its content, showing how basic DOM manipulation works with JavaScript. The page uses no external libraries, relying only on native browser APIs, and is structured as a simple starter template with an HTML file and a separate `main.js` script. The rendered output is a single line of text updated by the script, illustrating the core pattern of client-side scripting without additional frameworks.

Feb 18, 2021

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization highlights custom axis styling, including formatted tick labels that convert large numbers to abbreviations (e.g., "1.4B") and removal of default axis lines. Built with D3 v5, the chart uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements. Gridlines extend from the x-axis ticks, while the y-axis labels are simplified by removing tick marks and domain lines.

Nov 3, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates a visualization that adapts to the browser window’s size by redrawing a green X-shaped pair of lines whenever the window is resized. The chart container is positioned with CSS to fill the viewport, and the code extracts its computed `clientWidth` and `clientHeight` to set the SVG dimensions. It uses D3 v5’s selection and merge operations, along with a window `resize` event listener, to update two line elements dynamically.

Nov 3, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js, featuring circular eyes, a curved mouth, and animated eyebrows that move up and down in a repeating transition. The SVG elements are positioned using D3's `select` and `append`, with the face centered via a `g` transform. The eyebrows animate through chained `transition` calls, and the mouth uses the `arc` generator from D3's shape module. The code demonstrates fundamental DOM manipulation and SVG rendering, using d3.v5 to build and animate the face entirely in the browser.

Nov 3, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling for static vector graphics. It shows circles and rectangles with explicit fill colors, a grouped set with a shared fill and black stroke, and a polyline path connected by thick, rounded lines. The code directly uses SVG elements like `circle`, `rect`, `line`, and `path`, with CSS classes controlling stroke properties. Rendering relies on the browser’s native SVG support, with a `transform` scale applied to the entire drawing.

Nov 3, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes, presentation attributes, and CSS classes. It shows shapes with explicit fills, a group using inherited fill with black strokes, and a separate group for lines with round stroke caps and joins. The code uses raw SVG elements, the `g` transform for scaling and translation, and a linked CSS stylesheet to define stroke properties for the `.lines` class, with no JavaScript or external libraries.

Nov 3, 2019