nwhalen2

@nwhalen2·4 public vizzes

Fork of HTML Starter

This example demonstrates a minimal HTML page displaying the text "Hello HTML" in enormous, center-aligned type. The page uses plain CSS to set the font size to 13em and body text alignment. A JavaScript `<script>` block logs "Hello JavaScript!" to the browser's developer console on load. It relies solely on native HTML, CSS, and JavaScript APIs, with no external libraries, serving as a bare-bones introduction to structuring a web page with inline styling and client-side scripting.

Apr 28, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3 visualization starter, displaying a blank SVG canvas with clearly outlined margin areas. The code uses React 16.13.1 and D3 v6, loaded via CDN, to construct a `VizContainer` component that abstracts SVG group elements following the margin convention. The container renders gray outer and inner rectangles to visualize the chart area, with the margins toggleable via a `showMargins` prop. The visualization itself contains no data or marks, serving purely as a foundation for building future charts.

Apr 28, 2021

Loading thumbnail…

bar graph

This bar graph displays the population of each country by religious affiliation, with horizontal bars representing the population for each country. The visualization uses React and D3 v6, loading data from a CSV file and rendering it as SVG elements. The code employs `d3.csv`, `d3.scaleBand`, and `d3.axisLeft` and `d3.axisBottom` to map country names and population values, though the axes and data binding are incompletely implemented.

Apr 17, 2021

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Apr 7, 2021