S

sofia-martinovich

@sofia-martinovich·18 public vizzes

Loading thumbnail…

Bar Chart React & D3

This example shows a horizontal bar chart of the first ten artworks from an Artworks.csv dataset, plotting the number of households per artwork. It uses React hooks like `useState` and `useEffect` to fetch and manage the data, while D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` handle data loading and axis scaling. The chart renders as SVG, with tick marks, labels, and bars generated through React components. A loading state displays “Loading…” until the data arrives.

Loading thumbnail…

Fork of Organization Graph Diagram

This example shows an organization graph with two main nodes, “Arts Web” and “Social Impact Commons,” each connected to child nodes that branch into ten leaf nodes. The force-directed layout uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the elements, while gray circles and lightgrey lines render the SVG hierarchy. Node sizes vary by depth, and visible text labels identify the named parents and children.

Loading thumbnail…

Circular Geometric Patterns

The visualization displays a grid of circular geometric patterns formed by connecting points on a virtual circle. Based on the Vedic Square concept, each cell plots lines between nodes using varying skip factors and node counts, with thin orange strokes over light gray circles on a muted background. Built with React and D3 v5, it uses the `range()` and `line()` APIs with `curveLinearClosed` to generate star-like polylines, while SVG `<circle>` elements are rendered per node. A CSS blur filter softens the overall appearance.

Loading thumbnail…

Circular Geometric Patterns

A dense grid of circular geometric patterns fills the screen, each cell containing a star-like figure formed by red outlines over filled circles. The patterns are generated algorithmically, varying the number of nodes and skip factors that control point placement along a circle, with radius fixed. Built with React and D3 v5, the visualization maps each combination of parameters to a position in the grid, using D3’s `line` generator with `curveLinearClosed` to draw the star paths and SVG circles for the filled nodes.

Loading thumbnail…

Fork of Circular pattern of positioning circles with two distinct categories

This example generates two concentric circular patterns of small dots, each representing a distinct category. The outer ring contains 1000 circles, and the inner ring contains 800 circles, both positioned using trigonometric calculations with randomized radii. Each circle animates its position via chained `transition()` calls in D3 v6, which moves them from their initial origin to their computed coordinates. The visualization uses SVG rendering within a React framework, with opacity applied based on the x-coordinate to create a half-visible effect that distinguishes the two layers.

Loading thumbnail…

Fork of Color and Size Legends

Two reusable D3 v5 legend components demonstrate categorical color mapping and quantitative size scaling in SVG. The color legend uses `scaleOrdinal` with domains like apple, lemon, lime, and orange, while the size legend employs `scaleSqrt` to map a 0–10 range to circle radii, with ticks generated via `sizeScale.ticks`. Both render grouped circles and labels, with the size legend filtering out zero values. A video tutorial link accompanies the code, and the styling includes custom font sizes and stroke opacity.

Loading thumbnail…

Fork of Force Grid

This example shows a force-directed scatterplot of food-item data, grouped by month along the x-axis and colored by type. The visualization uses a static simulation that runs 140 ticks before rendering, with circles positioned by `d3.forceSimulation` and forces including `d3.forceX`, `d3.forceManyBody`, and `d3.forceCollide`. Circle radius reflects length, while fill colors map to categories like Grain or Fruit. The data loads from `data.json` and renders as animated SVG elements using D3 v6, with a color scheme defined per food type.

Loading thumbnail…

Fork of Minimal Reusable Charts Pattern

This animated fork of the minimal reusable charts pattern displays circular arcs from a CSV dataset, with each arc positioned by its `cx` and `cy` coordinates and scaled by its `radius`. The visualization uses a D3 selection joined to `circle` elements, applying a 500-millisecond transition with a 100-millisecond delay. The code references a `scatterPlot` module that implements scalable axis scaling through `scaleLinear` and `extent`, though the main rendering occurs in `index.js`. The Iris Dataset is mentioned in the README, but the actual data comes from the `arcs.csv` file loaded via D3's `csv` parser.

Loading thumbnail…

Fork of Bike Rental DataViz Humidity vs Temperature

This bubble chart explores the relationship between humidity and temperature in bike-sharing usage, with circle size representing ride counts and color distinguishing weather conditions. It is built using the vega-lite-api framework, which renders the visualization through Vega-Lite and Vega with SVG output. The data is loaded from a CSV file hosted on GitHub containing daily weather and rental counts. The visualization reveals that ridership remains robust even at high temperatures, whereas increasing humidity correlates with declining bike usage, showing temperature tolerance is higher than humidity tolerance.

Loading thumbnail…

Point Cloud

A circular point cloud displays 10,000 points arranged in concentric rings of varying radii. Each ring is generated by mapping an array of indices to circle positions using trigonometric functions, rendering individual SVG `<circle>` elements with React. The visualization uses ReactDOM to render the SVG container, with points drawn from three separate arrays at radial distances of 18, 30, and 50 units from the center.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by displaying summary statistics about the parsed dataset. It shows the file size in kilobytes, the number of rows, and the number of columns for a CSV of slum population data loaded from a GitHub gist. The code uses `d3.csv` with a Promise-based `.then()` callback to fetch and parse the remote CSV file. Alternatively, commented-out code shows the same process using the Fetch API with `async`/`await` and `d3.csvParse`, highlighting two approaches to asynchronous data loading in D3 v5 and React.

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Loading thumbnail…

Path with Arcs

This example shows a stylized smiley face rendered as a path with a circular arc for the mouth, centered within an SVG canvas. The face is drawn using React components, with the mouth generated by D3’s `arc` API to create an annular sector, while a vertical line serves as a subtle background element. The code leverages React’s ES6 modules and the D3 library, with random parameters for stroke width and mouth radius, and uses a `FaceContainer` to translate the coordinate system to the canvas center.

Loading thumbnail…

Load data with D3 and React

This example demonstrates how to load external CSV data into a React application using D3. A large text report displays the file size, row count, and column count once the data has been fetched. The code uses `d3.csv` to asynchronously load the SlumPopulation dataset and React's `useState` hook to manage the loading state. The visualization is purely text-based, showing data loading progress without any graphical charts.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example shows how React manages interactive state by tracking pointer coordinates. Using React hooks like `useState` and `useCallback`, the component updates the circle's `cx` and `cy` attributes on every `mousemove` event. The code renders a single `<circle>` element with a fixed radius of 30, initializing mouse position at (0,0) and updating it from `clientX` and `clientY` values.

Loading thumbnail…

Radial Line D3

A yellow smiley face rendered as an SVG in a React component uses an arc path for the mouth and a circle for the head. The example demonstrates a custom radial line implementation built from d3.line and d3.curveRadialLinear, though the visible chart only draws the static face. React 17 renders the SVG to the DOM, while d3.v6 supplies the arc generator for the mouth path. The code runs in a browser with D3 and React loaded from CDN scripts.

Loading thumbnail…

smiley_clean code_variations

A grid of 18 randomly generated smiley faces fills the screen, each face using the same clean, modular React component structure while varying its facial features. The code builds each face from separate React components—BackgroundCircle, Eyes, and Mouth—composed within a FaceContainer SVG. D3's `arc` API generates the smile path, while React's `render` method and ES6 modules structure the application, with random values controlling stroke width, eye position, and mouth dimensions.

Loading thumbnail…

Fork of OSRS Grand Exchange Dataset

This example displays basic dataset metrics for the OSRS Grand Exchange, showing the file size in kilobytes, row count, and column count. It fetches a JSON file from a GitHub Gist using `d3.json`, then calculates the number of keys to determine rows and columns. The results are rendered as text in a large `<pre>` element. The code relies on the D3 v5 library for data loading, with additional JavaScript logic for counting object properties and string length.