James Song

@nothors2·6 public vizzes

SVG TEST

This example displays a static collection of SVG primitives, including circles, rectangles, lines, and paths, arranged in groups with transforms. The composition showcases basic shapes with hard-coded fills, strokes, and coordinate positions within a 960 by 500 pixel canvas. The rendering relies on raw SVG elements defined directly in the HTML, with CSS classes like `.lines` applying stroke properties and line joins. The code uses plain SVG APIs (`<circle>`, `<rect>`, `<line>`, `<path>`, and `<g>`) alongside CSS styling, without any JavaScript libraries for layout or interaction.

Jul 20, 2020

Loading thumbnail…

D3.js Starter

This example shows a simple yellow face with eyes, eyebrows, and a mouth, all drawn with SVG shapes inside a D3.js selection. The eyebrows animate by shifting their vertical position through chained `transition` calls, moving down and back up once. The code uses `d3.select` to grab the SVG, `d3.arc` to generate the mouth path, and attributes like `attr` to position circles and rectangles. The rendering relies on SVG elements within a 960x500 viewport, with the face centered via a translated group.

Jul 19, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several countries using a horizontal layout, with the United Nations population data loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles and axes via `axisBottom` and `axisLeft`. Population values are formatted with `format('.3s')` for compact labels, and the chart is drawn within an SVG container using margins and a translated group element.

Jul 18, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Promise Test” in large, centered type using basic HTML and CSS styling. It demonstrates JavaScript Promise usage in a minimal page context, logging “Hello JavaScript!” to the console on load and resolving a delayed Promise after two seconds. A second Promise, created with setTimeout, logs a message after five seconds. The code uses vanilla JavaScript’s Promise API alongside the console.log method, with no external libraries or data sources.

Jul 17, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” prominently in the center of the browser window. It demonstrates the simplest possible setup for a web-based visualization, using raw HTML and CSS without any external libraries. The page also includes a small JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The CSS `text-align` property and `font-size` are used to style the output, while the script executes upon page load.

Jul 17, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that displays the text "안녕" by replacing the content of an HTML element with the ID `message`. The page is styled with centered, large text. The code imports car data from a JavaScript module, but this data is not used in the displayed output. The core functionality relies on the Document Object Model (DOM) API via `document.getElementById` to update the page, with the initial HTML containing a static placeholder.

Jul 17, 2020