Manoj

@prasadManoj·5 public vizzes

Make charts with D3.js

This example shows a minimal HTML page that uses D3.js to select an SVG element and change its background color to red. The code loads D3 v7 from a CDN, then uses `d3.select` to target the `<svg>` and the `style` method to apply the background color. It also logs the selection to the console for inspection. The page demonstrates basic D3 selection and styling with a simple, declarative approach, serving as a starting point for building more complex charts.

Mar 21, 2023

Loading thumbnail…

Fork of Fork of Shapes with SVG and CSS

This example uses raw SVG elements and CSS to demonstrate basic shapes and styling. It shows circles, rectangles, and a path, with both inline attributes and CSS classes controlling appearance. The first circle is red, the second green, and a group with a transform moves shapes while adding a stroke. A separate group defines a line and path, with CSS applying black strokes and a yellow stroke-linejoin to the path. All shapes are hardcoded in HTML, with no JavaScript or data binding, relying purely on SVG presentation attributes and stylesheet rules.

Mar 20, 2023

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example shows basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG canvas, with some shapes grouped and styled through CSS. The SVG markup defines the shapes’ positions, sizes, and inline fill colors, while an external stylesheet applies stroke properties and line-join rounding to elements within the `lines` class. The page uses no JavaScript libraries; it relies solely on static HTML, SVG, and CSS, as visible in the provided `index.html` and `styles.css` files.

Mar 20, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create shapes using SVG elements styled with CSS. It shows circles, rectangles, lines, and a path rendered on a 960x500 canvas, with CSS classes controlling stroke properties like color and width. The code uses inline SVG attributes for basic positioning and fill colors, while the `lines` class applies black strokes and a yellow stroke with round line joins to the path. The `g` element groups shapes and applies a translation transform, and the CSS resets body margins and hides overflow.

Mar 20, 2023

Loading thumbnail…

Fork of Hello HTML

This example displays the text "heloo World" in a web page. It demonstrates the minimal structure of an HTML document with a heading and a paragraph, where the paragraph's content is set dynamically. The code uses plain JavaScript to select the paragraph element by its ID and assign the message string to its text content. No external libraries or data sources are involved; the message is hardcoded in the script.

Mar 19, 2023