J

Johanna Magdalena

@johannamag·19 public vizzes

Loading thumbnail…

SVG Fundamentals

This example is a minimal HTML page that demonstrates the fundamentals of SVG (Scalable Vector Graphics). The page itself is essentially empty, containing only a title and an empty body, with no visible visualization content. It serves as a starting point for understanding how SVG, CSS styling, and JavaScript interact within a web document. The code references vanilla HTML, CSS, and JavaScript, providing a bare-bones foundation for building more complex data visualizations. It is intended as a template or learning resource rather than a complete, functional visualization.

Loading thumbnail…

Line Chart

This line chart displays temperature readings over time, with each point marked by a circle and connected by a smooth, curved path. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `line().curve(curveNatural)` for the path, and native SVG `<circle>` elements with `<title>` tooltips. Data comes from a CSV of weekly San Francisco temperatures, loaded via `d3.csv`, with reusable axis and mark components rendering the visualization.

Loading thumbnail…

Working with Time

This visualization displays temperature readings over time, using SVG circles to represent individual data points across a week-long period. The scatterplot employs D3.js v5 for scales and formatting, with React components rendering axes and marks. The time-based x-axis uses `d3.scaleTime()` with day-of-week labels, while the temperature y-axis uses `d3.scaleLinear()`. Data comes from a CSV file fetched via `d3.csv()` and parsed into JavaScript Date objects, with tooltips showing the formatted time on hover.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the classic Iris dataset, loaded via `d3.csv`. The SVG chart uses `d3.scaleLinear` with `.nice()` to set axes, rendered through React components (`AxisBottom`, `AxisLeft`) and circle marks with tooltips. The `scaleLinear` domains derive from `d3.extent`, while tick labels use `d3.format` for compact display. The iris data originates from a GitHub gist URL, parsed with numeric coercion in a row function.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization uses React with D3 v5 scales and SVG rendering, with the data loaded asynchronously via d3.csv. The code includes custom axis components that generate tick marks and labels, while circular marks display each data point with a tooltip showing the exact petal length value. The chart incorporates a Poppins font and muted color palette for a clean, stylized appearance.

Loading thumbnail…

Styling bar Chart

This example shows the top 10 most populous countries as horizontal bars, with country names on the y-axis and population on the x-axis, formatted in billions. The chart uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format to abbreviate tick labels. Axes are drawn via custom React components that map scales to SVG lines and text, while bars include a native SVG `<title>` for tooltips. Data comes from the United Nations World Population Prospects 2019.

Loading thumbnail…

Refactor bar Chart

The visualization displays a horizontal bar chart of the top 10 most populous countries, based on United Nations World Population Prospects 2019 data. It shows population values using rectangles scaled with `d3.scaleLinear` and categorical country names positioned with `d3.scaleBand`. The React application uses `useData` to fetch the CSV, then renders SVG elements including custom `AxisBottom` and `AxisLeft` components, with the `Marks` component mapping data to `rect` elements. Rendering leverages ReactDOM and D3 utilities such as `csv`, `max`, and `scaleBand` for a clean, axis-annotated layout.

Loading thumbnail…

Axes bar Chart

This example displays the top 10 most populous countries for 2020 as horizontal bars, with x-axis ticks and y-axis country labels rendered as SVG text. The chart uses React state to load and filter CSV data from the United Nations World Population Prospects 2019, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. The code explicitly draws axis lines and tick labels using d3’s scale functions, rather than relying on built-in axis generators.

Loading thumbnail…

Margins bar Chart

This example displays a bar chart of the ten most populous countries, with vertical bars representing population sizes but no axes or labels. The code uses React to manage state and render SVG elements, while d3’s `scaleBand` and `scaleLinear` position and size the rectangles. It loads data from the United Nations World Population Prospects 2019 via `d3.csv`, and applies a fixed margin to a 960×500 SVG canvas. The chart emphasizes the importance of margins for visual framing, though it omits chart furniture.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each country’s bar length proportional to its 2020 population from the United Nations World Population Prospects 2019 dataset. The chart uses React with hooks (`useState`, `useEffect`, `useCallback`) to fetch CSV data via `d3.csv`, then renders SVG rectangles positioned using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The visualization intentionally omits axes and labels, making it a "pathetic" bar chart. The code loads React and D3 v5 from CDNs and renders within a fixed 960×500 SVG.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a radial burst of CSS named colors as an SVG, using React to manage the component state and D3 utilities to handle data loading and geometry. The code fetches a CSV of color names and hex values with `d3.csv`, then applies `d3.pie` and `d3.arc` to compute wedge shapes around a central point. Each colored path is filled with the corresponding hex value, while React’s `useState` and `useEffect` hooks coordinate loading and rendering.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This visualization displays a large, emoji-style smiley face as a playful backdrop, while the foreground presents a text summary of a CSV dataset loaded live from a GitHub gist. The summary reports the data’s size in kilobytes, row count, and column count. Built with React hooks `useState` and `useEffect`, it fetches the data using D3’s `csv` function and renders the message via JSX. The smiling face is initially drawn as commented SVG circles in the HTML, though the active view replaces it with the data brief.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file size, row count, and column count of the CSS Named Colors dataset. The visualization uses D3.js v5’s `d3.csv` and `d3.csvParse` functions to convert the remote CSV text into a structured array, while also showcasing the equivalent approach with the browser’s native `fetch` and `async`/`await` syntax. The code computes summary statistics from the parsed data and renders them as large text within an HTML `<pre>` element. A React-based implementation is also noted in the project metadata.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single circle that follows the mouse cursor across an SVG canvas. The circle begins at the center of a 960-by-500 pixel viewport and updates its position in response to every mousemove event. The application is built with React 16.9, using the useState and useCallback hooks to manage and update the mouse coordinates. Rendering is handled declaratively through ReactDOM, with the circle’s cx and cy attributes bound directly to the current mouse position state.

Loading thumbnail…

Mouse Follower

A smiling face fills the browser window, rendered as yellow SVG circles with black outlines. The component uses React and ReactDOM to render an SVG viewport sized to the window’s dimensions, calculating the face’s position from the center coordinates. Eye and mouth radii are defined as constants, while the mouth is omitted from the final output despite being referenced in the code, leaving only the two eyes on the yellow disc.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading a CSV file containing CSS named colors using the Fetch API and async/await syntax. It displays the raw, unparsed text content of the data in the browser console, with a large empty <pre> element prepared for potential visualization. The code uses d3.v5 only for its library reference, while the actual data retrieval relies on native `fetch()` and `response.text()`. The visualization shows the process of asynchronously fetching remote CSV data rather than rendering a chart.

Loading thumbnail…

Fork of Let's Make a Face Part II

A parameterized smiley face built with React and D3 v7 renders as layered SVG circles and an arc-based mouth. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting numeric props for position, size, and stroke width. The mouth uses D3's `arc` generator to draw a partial annulus between inner and outer radii, with angles set to a half-turn. The React app instantiates a single 960×500 face centered at the midpoint, with fixed eye offset and radius values.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as a responsive SVG that fills the browser window. The face’s circular head, eyes, and mouth are built with React components using JSX, with positions and dimensions calculated from `window.innerWidth` and `window.innerHeight`. The drawing relies on ReactDOM to mount the SVG into the DOM, and while the code defines a `mouthRadius` and `mouthWidth`, it only renders the head and two eyes, leaving the mouth unimplemented in the final output.

Loading thumbnail…

Face

A smiling face rendered as a simple SVG graphic, built with React components. The visualization displays a yellow circle with a black outline for the head, and two smaller black circles positioned as eyes. The code uses React and ReactDOM from UMD bundles to manage the rendering, while the SVG elements (circle tags) are written directly in the index.html file. The face is centered on a 960x500 canvas with fixed pixel coordinates, and the page is styled with a hidden overflow to remove scrollbars.