SuperweedMan

@SuperweedMan·4 public vizzes

HTML Starter

This example displays the text “Hello HTML” centered on a blank page using inline CSS with a 13em font size. The underlying code is a minimal HTML document that demonstrates the basic structure of a web page, including a `<head>` with title and style tags, and a `<body>` containing the displayed text. A `<script>` tag logs “Hello JavaScript!” to the browser’s console when the page loads, illustrating how to add client-side scripting alongside static content.

Jun 28, 2020

Loading thumbnail…

Making a Bar Chart

This example shows the process of building a bar chart from scratch using D3 v5, loading data from a CSV file via `d3.csv` and rendering it as SVG elements selected with `d3.select`. The chart is constructed within an HTML page that imports the D3 library, with the visualization created dynamically through JavaScript in `index.js`. The accompanying CSS defines chart styling, including a red highlight for specific elements, while the SVG canvas is set to fixed dimensions of 960 by 500 pixels.

Jun 28, 2020

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates how to create a smiling face using basic SVG shapes—circles for the eyes and an arc for the mouth—positioned within a 960x500 viewport. The code uses D3 v5’s `select` and `arc` functions to append elements to the SVG, while CSS styles handle page margins and a red highlighted text class. The arc is generated using inner and outer radii with a start angle of zero and an end angle of π, producing a half-circle smile centered in the composition.

Jun 28, 2020

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled using CSS. It shows three shapes on an SVG canvas: two circles and a rectangle, with the second circle explicitly filled red via an attribute. The code uses plain SVG markup within an HTML page, linked to an external stylesheet. The stylesheet defines a highlighted class with a red text color, although no elements in the markup currently apply this class, and sets the body margin to zero with hidden overflow. No JavaScript or additional libraries are involved.

Jun 24, 2020