Anna Xu

@annaxu9·4 public vizzes

Zoomable Bar char

This visualization displays the long-term trend of global CO₂ concentration in parts per million, plotted as a zoomable bar chart that highlights historical fluctuations from over 800,000 years ago to the near present. The chart uses the D3 library (v6) to load CSV data, parse it with `d3.csvParse`, and filter for the World entity before mapping the year and concentration values. Bars are rendered in an SVG via `d3.create`, with zooming enabled to allow users to inspect dense early periods or recent dramatic increases. The data comes from the provided `co2-concentration-long-term.csv` file, processed entirely client-side.

Aug 3, 2022

Loading thumbnail…

Bar Chart Attempt

This example attempts to render a bar chart from a CSV dataset containing position and count values. Using D3.js, it selects all existing `rect` elements, binds the data, and appends new rectangles as needed, setting each bar’s width to 1 pixel, height to the count value, and x-position to the position field. The bars are filled black and rendered inside an SVG that fills the entire browser window. No axes or labels are included, leaving the raw data points as a scattered, vertical line pattern.

Aug 3, 2022

Loading thumbnail…

Fork of HTML Starter

This example uses SVG masks to create an intersecting grid of horizontal and vertical lines, revealing a circular window at the center. The code employs `d3.select` and `d3.range` to generate two sets of 100 rectangles, one for each orientation, and applies a mask with a white circle over a black background to the horizontal lines, and a mask with a black circle over a white background to the vertical lines. The result is a cross-hatched pattern that becomes visible only inside the central circle.

Aug 1, 2022

Loading thumbnail…

Untitled

This example demonstrates a minimal setup for running React within a single HTML page, using CSS for styling and JavaScript for logic. It relies on the classic `d3.js` library but does not include any explicit visualization; instead, it consists solely of a blank rendering area with no active data processing or graphical output. The page includes a link to a more comprehensive React starter template for further exploration, while the core functionality here is limited to laying out the foundational structure for a development environment. The code imports React and ReactDOM to mount a trivial component that renders static content, with no state changes, user interaction, or data fetching. The visible behavior is essentially an empty canvas, serving as a scaffolding example rather than a functional chart or graph. The presentation is static, with no animations, tooltips, or dynamic updates, focusing purely on the technical boilerplate rather than any actual visualization.

Jul 29, 2022