jwu534@gmail.com

@jwu534·7 public vizzes

SVG Fundamentals

This example demonstrates fundamental SVG shapes—rectangles, text elements, and a polyline path—arranged to form a simple horizontal bar chart with category labels A through D. The SVG markup uses inline styling and CSS classes to control fill colors, stroke widths, and font properties, with a Google Fonts import for the Protest Riot typeface. The chart displays varying bar lengths on a 960×500 canvas, mixing red, black, and white fills with rounded stroke caps on a connected path line.

Aug 10, 2024

Loading thumbnail…

Something creative with SVG

This example demonstrates basic SVG shape construction by composing a stylized watermelon from circles, rectangles, and a polygonal path. The visualization uses raw SVG elements—including `<circle>`, `<rect>`, and `<path>`—to layer green rind, red flesh, white highlights, and dark seeds. Rendered directly in the browser via inline SVG within an HTML page, the code sets explicit coordinates and fill colors for each shape, while commented-out elements show unused alternatives like lines and strokes. No external libraries are employed.

Feb 13, 2024

Loading thumbnail…

Making a bar chart

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 uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Bars are drawn as SVG rectangles whose widths are proportional to population values, with a steelblue fill and a left margin accommodating country labels.

May 3, 2021

Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

May 3, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the static text “Hello HTML” in a large, centered format on a plain web page. It uses a minimal HTML structure with embedded CSS for styling and JavaScript for browser interaction. The JavaScript logs the message “Hello JavaScript!” to the console as a demonstration of basic scripting. The page relies solely on standard HTML, CSS, and JavaScript APIs, without any external libraries or data sources.

May 2, 2021

Loading thumbnail…

Cars report

This example displays a minimal "Cars report" page with the text "Hello" rendered in a preformatted HTML block by the index.html file. The accompanying index.js file initializes a JavaScript string variable called `message` but does not use it to alter the page content. Built with React and plain HTML/CSS, it demonstrates a bare-bones starter template for embedding JavaScript in a web document. The visualization shows no data or charts, serving only as a scaffold for future development.

Feb 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text "Hello HTML" in large, centered type using CSS, while also logging "Hello JavaScript!" to the browser console. It shows how CSS styles the body with a 13em font size and text alignment, and how a script tag executes JavaScript. The code uses plain HTML, CSS, and the built-in `console.log` API, with no external libraries or data sources.

Feb 12, 2021