class-sikh

@class-sikh·9 public vizzes

circle

This example shows a single green circle with a blue stroke rendered on a blank SVG canvas. The visualization demonstrates basic D3 version 7 usage by importing the `select` function from the `d3` module and updating the page text. The circle is defined directly in the HTML markup with fixed `cx`, `cy`, `r`, and fill attributes, while SVG provides the rendering surface. The code illustrates how to begin a D3 project, though it does not yet bind any external data.

May 17, 2023

Loading thumbnail…

Shapes with CSS & SVG

This example demonstrates how to draw basic SVG shapes—specifically a rectangle—using the CSS styling and SVG elements directly in an HTML document. The code defines an SVG canvas with a yellow rectangle outlined in black, showcasing the interplay between HTML, CSS, and SVG markup. It also imports the `select` function from D3 version 7 to update the page body’s text content, illustrating a minimal D3 integration for DOM manipulation. The rendering relies on inline SVG, with no external data source, providing a straightforward introduction to combining D3 with SVG graphics.

May 17, 2023

Loading thumbnail…

Creating a line

This example shows how to create a basic line element in an SVG canvas using D3 version 6, drawing an orange stroke from one coordinate to another. The page renders the line directly in the HTML markup with the `<line>` tag, specifying the x and y positions and stroke styling inline. The accompanying `index.js` file imports the `select` function from D3 and updates the page text to confirm the library is loaded. The code demonstrates a simple, static SVG rendering approach without data binding or interactive features.

Apr 27, 2023

Loading thumbnail…

Shapes with CSS & SVG

This example shows two geometric shapes drawn on an SVG canvas: a red circle with a black stroke and a green rectangle with a blue stroke. The HTML page uses inline SVG elements (`<circle>` and `<rect>`) to render the shapes, with CSS properties for fill and stroke applied directly as SVG presentation attributes. The code uses the native SVG API within a plain HTML document, requiring no external libraries, and demonstrates basic vector shape creation with explicit coordinate and dimension attributes.

Apr 27, 2023

Loading thumbnail…

making a bar graph using text file

This example shows a bar graph of country populations from a CSV file, displaying each nation’s population as a blue vertical bar. It reads the data using `d3.csv` from the D3 v7 library, then renders the SVG chart with `d3.select`, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis, with bars drawn via `svg.append('g').selectAll('rect').data(data).join('rect')`.

Apr 13, 2023

Loading thumbnail…

Making a Bar Chart

This bar chart displays the scores of four individuals—Simon, Mary, Jo, and Peter—on a fixed scale from 0 to 100. Each name is plotted as a blue rectangle using D3.js v7, with the chart rendered in SVG within a React-free HTML page. The code constructs an SVG canvas with specified dimensions and margins, then uses d3.scaleBand to position bars along the x-axis and d3.scaleLinear for the y-axis. Rectangles are appended and sized via data joins, with heights calculated from the score values.

Apr 12, 2023

Loading thumbnail…

face

This example shows a simple cartoon face constructed from basic SVG shapes: a yellow circle for the head, two smaller black circles for eyes, and a black line for a mouth. The code uses inline SVG elements—`circle` and `line`—with explicit `cx`, `cy`, `r`, `x1`, `y1` attributes to define positions and sizes. The rendering is static and entirely client-side, with no data source or interaction. The HTML page provides the minimal structure, while inline CSS or JavaScript is not used beyond the SVG markup itself.

Apr 12, 2023

Loading thumbnail…

Creating a line

This example shows how to create both a straight line and a polyline using SVG elements within a React-driven HTML page. It uses raw SVG `<line>` and `<path>` tags, with explicit coordinates for each point and styling via the `stroke` and `stroke-width` attributes. The code demonstrates a static vector rendering approach, without any interactive or dynamic behavior, and the visualization is defined directly in the markup rather than through a charting library.

Apr 10, 2023

Loading thumbnail…

Cars Report

This report lists three used cars with their prices in a plain HTML page. It shows a highlighted entry for a 1986 Toyota AE86 in red, while the other vehicles appear in default black text. The page uses standard DOM elements, including an unordered list with a `highlighted` class, and relies on a linked CSS stylesheet for typography and color styling. No JavaScript libraries or data sources are involved.

Apr 10, 2023