daria.daria

@daria-z·11 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3 v7 starter template that displays a single large text element in the browser body. The code primarily focuses on JavaScript asynchronous patterns, using the Fetch API to request GitHub user data from the `api.github.com/users/${name}` endpoint and handling HTTP errors through a custom `HttpError` class. The page also runs a `wait()` function that uses `Promise.resolve` and `setTimeout` to illustrate async/await behavior, showing a result after a one-second delay. No data visualization is implemented; the example instead serves as a foundational setup for D3 projects while exploring promise-based workflows.

Jan 10, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example renders an interactive scatter plot of cyclist performance data, fetched as JSON and positioned using D3 scales. The visualization maps petal width and sepal length values (from the Iris dataset) to SVG circles, with axes generated via `axisLeft` and `axisBottom`. Using `d3.scaleLinear` and the reusable chart pattern, the plot updates its x- and y-value bindings dynamically, though the active configuration showcases a single static view with animated potential commented out.

Jan 10, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays four-dimensional Iris flower measurements as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable chart factory pattern following Mike Bostock’s approach. Rendering is done via SVG, with data loaded from a Gist-hosted CSV. The plot measures 5 pixels per point, and the page adapts to the full window size, with circular marks colored uniformly and axes accompanied by custom fonts.

Jan 10, 2023

Loading thumbnail…

FCC Scatter Plot

This scatter plot visualizes cyclist performance data from the freeCodeCamp ProjectReferenceData repository, showing each rider’s year and race time in seconds. The D3.js v6 code loads the dataset with `d3.json`, maps years and times using `scaleTime` and `scaleLinear`, and renders circles with `selectAll` and `join`. Axes are generated via `axisLeft` and `axisBottom` on an SVG canvas that fills the window. Each dot carries `data-xvalue` and `data-yvalue` attributes for potential interactivity, though no tooltip or hover behavior is implemented.

Jan 7, 2023

Loading thumbnail…

Fetch Data

This example demonstrates how to load and inspect a CSV dataset from a remote URL using D3. It fetches the latest COVID-19 data from Our World in Data via `d3.csv` and logs the column names to the console, displaying the raw data structure. The visualization renders an empty SVG canvas sized to the viewport, with commented-out code hinting at potential animated circle transitions. The implementation relies on D3 v6, specifically the `select` and `csv` APIs, within a Promise-based async function.

Jan 5, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6 to load CSV data via `d3.csv`, scales the data with `scaleLinear` and `extent`, and renders SVG circles for each observation. Axes are generated with `axisLeft` and `axisBottom`, while the chart fills the browser window using `window.innerWidth` and `window.innerHeight`. The plot clearly shows clusters of iris species based on their measurements.

Jan 1, 2023

Loading thumbnail…

Import Data

This example displays the static text “Hello HTML!” centered on a blank page, styled with a 13-em font size and CSS text alignment. The visualization is a minimal demonstration of an HTML document using inline CSS for the `.message` class and JavaScript enabled by default, with no external data or libraries. It serves as the simplest possible starting point for a React-based visualization, as referenced by the companion React Starter template.

Jan 1, 2023

Loading thumbnail…

D3 Selection

A grid of 105 circles is drawn across the viewport, each positioned according to its index in the sequence. The example demonstrates D3's selection API by using `select('body')` and `selectAll('circle')` to append SVG circles with computed `cx` and `cy` attributes. Instead of relying on layout methods like `join`, it manually chains `data()` and `enter()` to populate the visualization. The code uses D3 v6's `range` to generate the data array, assigning each circle a fixed offset. The SVG rendering fills the entire browser window, with the circles arranged in a diagonal pattern.

Dec 31, 2022

Loading thumbnail…

JS Arrays

This example demonstrates fundamental JavaScript array methods—forEach, filter, map, sort, and reduce—applied in a minimal React-based HTML page. The code shows how to transform an array of objects with key-value pairs using reduce to group entries, and sorts them with a custom comparator that compares object keys. It imports `ascending` from D3 v6.6.2 for potential sorting use, while other operations are commented out as templates. The page renders a large "Hello HTML!" message centered via CSS, with the array manipulation logic present but producing no visible output.

Dec 31, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It renders a grid of thin horizontal and vertical rectangles, with two circular masks that reveal and conceal the marks to create a layered geometric pattern. Using d3-selection and d3-range, the code generates 100 rectangles in each direction, applying SVG mask elements with white and black circles to shape the final composition. The visualization adapts to the full browser window size.

Dec 26, 2022

Loading thumbnail…

Pseudo Scatter Plot

This example demonstrates a pseudo scatter plot using D3’s force simulation to arrange points in a loose, organic cluster rather than on a strict grid. The SVG scene contains no axis or scales; instead, `d3.forceSimulation` with collision and centering forces drives the layout, while circles are rendered via SVG. The code is a minimal React starter, embedding a single `<svg>` with hardcoded dimensions and no data file, so the visualization is purely a test of force-driven positioning. The styling and script structure remain bare, with no interaction or animation beyond the initial simulation tick.

Dec 26, 2022