Skip to main content
Log in
E

ekorre1001

@ekorre1001·12 public vizzes

Loading thumbnail…

Working with Time

This visualization displays temperature readings over time for a week in San Francisco, using a smooth curved line to show the trend. The chart plots timestamps on the x-axis and temperature values on the y-axis, with the x-axis formatted to show abbreviated weekday labels. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` for the axes, and `line` with `curveNatural` to create the smoothed path connecting data points. The data is loaded from a CSV file using `d3.csv` and rendered as SVG.

Mar 30, 2021
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, showing sepal length against sepal width. It uses React with D3 v6’s scaleLinear and extent functions to position data points as circles in an SVG rendering. The chart includes axis labels, tick marks, and a native title tooltip on each mark. A custom useData hook loads the CSV data via d3.csv, while AxisBottom, AxisLeft, and Marks components generate the axes and circles with a Poppins font styling.

Mar 29, 2021
Loading thumbnail…

Stylized bar chart

This stylized bar chart compares the population of ten countries using horizontal bars with a teal fill and a clean Poppins font. It displays population values on the x-axis with formatted tick labels (e.g., “1.23B”) and country names on the y-axis. Built with React and D3 v6, the visualization uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and SVG `rect` elements for rendering bars. Hovering over a bar shows its exact population via the native SVG `<title>` tooltip.

Mar 29, 2021
Loading thumbnail…

XYAxis with React & D3 with refactoring

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, with axes rendered as SVG elements. The React components `AxisBottom`, `AxisLeft`, and `Marks` repurpose D3 scales—`d3.scaleBand` and `d3.scaleLinear`—to compute positions and sizes. The bottom axis uses `xScale.ticks()` for tick values, while the left axis maps country names from the data domain. Data is loaded asynchronously from a CSV via `d3.csv` and the React hook `useEffect`. The visualization demonstrates clean separation of axis and mark rendering through reusable, refactored functions.

Mar 29, 2021
Loading thumbnail…

Setup the bars and margins

This example shows a horizontal bar chart displaying the ten most populous countries in 2020. The bars are drawn inside a margin-defined area, with a band scale for country names on the y-axis and a linear scale for population on the x-axis. Using React hooks like `useState` and `useEffect`, it fetches CSV data from a GitHub gist via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` and `d3.scaleLinear`. The visualization avoids overlapping edges by translating the chart group by the specified margins.

Mar 29, 2021
Loading thumbnail…

Rendering Data with react & d3

This radial burst chart visualizes CSS color data from a CSV file. The visualization encodes each color as an equal-sized slice of a pie, with each slice’s fill matching its corresponding hexadecimal value. Built with React and D3 v6, the code uses d3’s `pie()` and `arc()` functions to generate the SVG paths. React manages the state and conditional rendering, while D3’s `csv()` fetches and parses the external data source.

Mar 24, 2021
Loading thumbnail…

Rendering Data with react

Each CSS color in the dataset is rendered as a horizontal strip, with the strip’s background color set to the color’s hex value. The React component uses the `useState` and `useEffect` hooks to load the data asynchronously via `d3.csv` from a GitHub gist, then maps over the loaded array to produce the list of colored divs. The example demonstrates how React’s declarative component model can directly generate SVG or HTML elements from parsed data, with a simple loading state shown until the CSV arrives.

Mar 24, 2021
Loading thumbnail…

Loading data with react & d3

This example demonstrates how to load external CSV data with React and d3, displaying a summary message about the dataset. It uses React’s `useState` and `useEffect` hooks to fetch the CSS colors data from a GitHub gist and store it in component state. The `d3.csv` function retrieves the file, while the custom `message` function calculates and formats statistics like file size, row count, and column count. The result is rendered as plain text in a `<pre>` element, with a “Loading...” placeholder shown until the data arrives.

Mar 23, 2021
Loading thumbnail…

Testing Vega-Lite API

This visualization uses the Vega-Lite API to render a circular mark plot of religious demographics by country. It encodes country on the x-axis, population on the y-axis, and religion as the size of each circle, with tooltips displaying population values on hover. The data is loaded asynchronously from a CSV file via d3.csv, and the visualization is configured with custom axis and label styling. The Vega-Lite API registers with Vega and Vega-Lite libraries, rendering to SVG with an automatic fit to the viewport dimensions.

Mar 21, 2021
Loading thumbnail…

Loading CSV data

This example demonstrates how to load and parse CSV data using D3 v6. It fetches a remote CSV file containing CSS color information and reports the file size, row count, and column count in a large text display. The code uses `d3.csv()` to retrieve and parse the data, then `d3.csvFormat()` to measure the formatted output and `data.columns` to count columns. An alternative approach using `fetch()` and `d3.csvParse()` is included in a comment but not executed.

Mar 18, 2021
Loading thumbnail…

React Draw with Mouse

A React component renders an SVG circle that follows the mouse pointer across a 960×500 canvas. The SVG’s `onMouseMove` event updates React state via `useState`, and `useCallback` memoizes the handler to prevent unnecessary re-renders. The circle’s `cx` and `cy` coordinates are bound to the current mouse position, demonstrating a reactive, declarative drawing interaction. Unlike D3, this example relies solely on React’s state management and SVG’s native event handling to create a live, mouse-driven visualization.

Mar 18, 2021
Loading thumbnail…

SVG - Drawings

Multiple yellow smiley faces render in a row, each built from composed React components for the background circle, eyes, and mouth. The faces derive their geometry from reusable props like `centerX`, `eyeOffsetX`, and `mouthRadius`. Rendering uses SVG elements inside a `FaceContainer`, with the mouth path generated by d3’s `arc()` and the layouts created via `range()` from d3.

Mar 18, 2021