Christian

@glarkstoat·6 public vizzes

Hello HTML

A simple interactive SVG circle follows the mouse pointer across a 960-by-500 blank canvas, updating its position in real time. The visualization uses React 17 with the `useState` hook to manage the circle’s coordinates, which are updated on every `mousemove` event on the SVG element. The circle’s center is set via the `cx` and `cy` attributes, while D3 v5 is loaded but not directly used in the rendering logic. The example demonstrates state-driven updates in a React-rendered SVG without any external data source.

May 2, 2021

Loading thumbnail…

jhjhj

This example displays the text “Hello HTML” in large, centered type on a plain page. The code uses raw HTML and CSS for styling, with a JavaScript script that calls `fetch` on an empty URL string. No data is loaded or rendered, and there are no visualizations, charts, or interactive elements; it is a minimal demonstration of basic web technologies without any framework.

May 2, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a stylized face from a set of React components, laid out as SVG shapes within a 960-by-500 viewport. A yellow background circle, two eyes, and a mouth drawn with the d3.arc generator form the central figure, alongside an ellipse and a rounded rectangle. The code imports React, ReactDOM, and the d3 arc function, with all geometry positioned relative to a translated group. The README indicates the visualization represents the number of VizHub users over time, though the plot explicitly shows static shapes rather than a temporal trend.

May 2, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" centered on a blank page, rendered with a massive 13em font size using CSS. The page is a minimal HTML document that demonstrates the foundational structure of web content, combining inline styling with a JavaScript script element. Upon loading, the code executes `console.log('Hello JavaScript!')`, which writes a message to the browser's developer console, illustrating basic client-side scripting.

May 2, 2021

Loading thumbnail…

Fork of Untitled

This example tracks the cumulative number of VizHub users since the platform’s launch on August 14, 2018. It displays a streamgraph where stacked, colored areas represent user growth over time, with a moving vertical cursor that highlights the current date. The visualization uses D3’s `d3.stack()` and `d3.area()` to construct the layered paths, while `d3.brushX()` and a custom `d3.scaleTime()` axis enable interactive time-window selection. Data is loaded from a local CSV file and rendered as an SVG with smooth transitions between brushed states.

May 2, 2021

Loading thumbnail…

Untitled

This visualization shows the growth of VizHub users over time since the platform launched on August 14, 2018. A line chart traces cumulative user counts across the date range, with the data drawn from a static source. The chart is rendered using D3.js, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.line` generating the path. Axes are added via `d3.axisBottom` and `d3.axisLeft`, while interactive hover effects are handled through mouse events and `d3.select` for tooltip display.

Apr 28, 2021