blkhar

@blkhar·6 public vizzes

HTML Starter

This example demonstrates the absolute minimal setup for rendering styled text in a web browser, using plain HTML and CSS without any external libraries. The page displays the phrase "Hello HTML" in the center of the viewport, with the text size set to an extremely large 13em via a CSS style block within the document head. It serves as a baseline for comparing against more complex visualization frameworks, such as the React starter referenced in the accompanying README.

May 8, 2020

Loading thumbnail…

Selecting a Year on a Line Cart

This interactive line chart displays population projections from 1950 to 2100 for different world regions, differentiated by color. A vertical black line marks the currently selected year, and hovering over the chart updates this selection. The visualization uses D3 v5 APIs such as `scaleTime`, `axisBottom`, and `line` to render the data, sourced from CSV files for historical estimates and medium-variant projections.

May 8, 2020

Loading thumbnail…

Stylized Line Chart

This example plots a week of temperature readings from the Data Canvas Sense Your City dataset. It renders a smooth, stylized line chart using React and D3, with a natural curve applied via `d3.curveNatural`, custom axis components, and SVG paths for the line. The chart omits data-point circles, focusing entirely on the clean, bold stroke that maps timestamps to temperatures using `d3.scaleTime` and `d3.scaleLinear`. Styling uses the Poppins font with muted ticks and labels for a polished look.

May 8, 2020

Loading thumbnail…

Stylized Line Chart

This interactive line chart visualizes temperature readings over time, drawn as a smooth, natural curve against labeled time and temperature axes. The visualization uses the Data Canvas Sense Your City sensor dataset, rendered with React and D3 v5 SVG elements, including `scaleTime`, `scaleLinear`, `line`, and `curveNatural`. Styled with the Poppins font, the chart displays teal axes, tick marks, and a four-pixel-wide stroke, with axis labels rotated for readability.

May 8, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the data points, rendered as an SVG path using D3’s `line` and `curveNatural` generators, with teal strokes and circular marks (commented out) available for point emphasis. The chart uses `scaleTime` and `scaleLinear` axes, with tick marks and labels generated by custom React components `AxisBottom` and `AxisLeft`. The React app loads CSV data via the `csv` function from d3.v5.

May 8, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” centered on the screen. It demonstrates the fundamental structure of an HTML document, including a `<head>` with a `<title>` and embedded CSS styling via a `<style>` tag. The page uses no external libraries or JavaScript, relying solely on plain HTML and CSS to center and size the text. It serves as a bare-bones starting point for building more complex data visualizations or web applications. The rendering approach is static, with no data sources or interactive elements involved.

May 8, 2020