shuksbhoney

@shuksbhoney·5 public vizzes

BarChart

This example displays a blank SVG canvas, with the page title and a reference video indicating it is a D3 bar chart demonstration. The code imports the `select` function from D3 and changes the body text to a simple greeting, while a separate stylesheet establishes global margin and stroke styles for elements with the class `lines`. The rendered output does not yet include any bars or data, as the JavaScript only sets text content and the SVG container remains empty.

Feb 12, 2022

Loading thumbnail…

BarChart

This example demonstrates a simple bar chart, but the code shows no bar chart implementation. Instead, an SVG canvas of 960 by 500 pixels is empty, and a separate "Cars Report" page lists car items with CSS styling. The primary visualization technique is static SVG rendering, yet no data is bound or drawn. The code includes a CSS rule for black lines with a 10-pixel stroke width, but fails to apply it. The example uses vanilla HTML, CSS, and JavaScript without any charting library.

Feb 12, 2022

Loading thumbnail…

D3js practice

This example draws a simple face using D3 version 7. A yellow circle serves as the head, with two black circles for eyes, and a path created with the `d3.arc` function forms a smile. The SVG canvas is 960 by 500 pixels, and all shapes are positioned and scaled relative to these dimensions. The code demonstrates basic SVG rendering and shape manipulation with D3's selection and attribute methods.

Feb 12, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shape elements with CSS styling to create static graphics, showing circles, rectangles, lines, and paths arranged in nested groups with various fills, strokes, and transforms. The code uses D3 version 6's `select` API from the `d3` module to modify the page content, while the visual output relies entirely on inline SVG markup and an external stylesheet. Shapes are positioned and scaled using SVG attributes like `transform`, `translate`, and `scale`, with CSS classes controlling stroke properties for the line and path elements.

Feb 12, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of geometric shapes—circles, rectangles, lines, and a path—arranged on an SVG canvas, with some shapes inheriting styles from CSS classes and groups. The SVG elements use direct attributes for fill, stroke, and positioning, while the `.lines` class applies stroke styling via CSS. The code uses vanilla JavaScript within an HTML page, linking to a separate stylesheet, and demonstrates how SVG and CSS work together without any external visualization libraries.

Feb 12, 2022