djfeld01

@djfeld01·12 public vizzes

Mouse Follower

This example shows a yellow circle that follows the mouse cursor across the full browser window. It uses React's `useState` and `useCallback` to track mouse coordinates, which are passed to an SVG circle's `cx` and `cy` attributes. The circle has a fixed radius of 30 pixels and is rendered on an SVG canvas sized to the window's dimensions. The `onMouseMove` event handler updates the circle's position in real time, and the SVG is rendered through ReactDOM.

Apr 3, 2021

Loading thumbnail…

Fork of Scatter Plot with Small Points

This visualization compares NCAA wrestling performance by plotting a bar chart of points alongside a scatter plot of seed rankings, filtered to show only the top nine seeds. The circular marks use opacity to reveal overlapping data points, with point size encoding the count of seeds. Built with the Vega-Lite API and D3, the code customizes axis styles and tooltips through a configuration object. Data is loaded from a remote CSV file using d3.csv, then filtered before being passed to the visualization specification. The chart renders responsively to fill the browser window.

Mar 25, 2021

Loading thumbnail…

Fork of Fork of Scatter Plot with Small Points

This visualization displays the relationship between NCAA wrestling seeds and points scored using an error bar plot, with points shown as small dots through the Vega-Lite API. The chart uses stdev-extent error bars to show the distribution of points for each seed value, with tick marks indicating the range. The code loads data from a CSV file using `d3.csv`, and renders the plot through the `vega-lite-api`, `vega-lite`, and `vega` libraries, with a custom dark theme configured for axis labels and titles. The visualization fills the entire browser window via autosizing.

Mar 25, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes monthly Move-In counts across all stores, using horizontal bars ranked by month. The chart aggregates a CSV dataset of tenant move-in records, summing counts by month. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles. Custom axes are generated via `AxisBottom` and `AxisLeft` components, with formatted tick labels abbreviating large numbers.

Mar 4, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This chart displays the aggregate number of move-ins per day of the week from a CSV dataset, with each day represented by a circle plotted on a linear scale. Built with React and D3 v6, the visualization uses `useState` and `useEffect` to load and refine the data, summing records by weekday. SVG elements render the axes and marks, with `scaleLinear` mapping values and the `Marks` component adding a native `<title>` tooltip. Axis components are generated manually from `yScale.ticks()` and `xScale.ticks()`, with labels formatted using `d3.format`.

Mar 4, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It shows temperature trends over time using smooth curves generated with the d3.line function and curveBasis interpolation. The visualization employs d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for tick rendering. Data is loaded via d3.csv, parsed into Date and numeric values, and rendered as an SVG path styled with a maroon stroke.

Mar 4, 2021

Loading thumbnail…

Refactored Bar Chart

This chart displays population data for the top 10 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis. Built with React and D3 v6, the visualization uses D3's `scaleBand` and `scaleLinear` for axes, `format` for tick labels, and SVG elements for rendering. Data is loaded asynchronously via D3's `csv` function from a UN Population dataset. A tooltip reveals the exact population value for each bar.

Mar 1, 2021

Loading thumbnail…

Rendering Data with React and D3

A pie chart visualizes CSS named colors using D3 and React. The code loads color data from a CSV file with `d3.csv` and stores it in React state via `useState` and `useEffect`. Each color is rendered as an SVG path segment using `d3.arc` and `d3.pie`, with the fill set to the color’s hex value from the dataset. React handles the component lifecycle, while D3 computes the arc geometry.

Feb 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a bar chart of temperature readings over time, using a small multiple of vertical bars to represent each data point. The chart is built with the Vega-Lite API, which is registered alongside Vega, Vega-Lite, and Vega-Tooltip. The visualization loads CSV data from a GitHub gist using `d3.csv` via the `getData` function, and applies a custom config object to style axes and labels. Bars are rendered with a fixed size of 5 pixels, and tooltips display the temperature value on hover.

Feb 27, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the loading and parsing of CSV data using D3 v6, displaying the file size, row count, and column count in a large text element. The code fetches a CSV file from a GitHub gist containing named CSS colors and processes it with `d3.csv()`, which returns a promise. The results are formatted using `d3.csvFormat()` to calculate the data’s kilobyte size, while `data.length` and `data.columns.length` report the row and column totals. A commented section also shows an alternative approach using the Fetch API and `d3.csvParse()`.

Feb 27, 2021

Loading thumbnail…

Fork of Smiley face part 1

A grid of eighteen cartoon smiley faces, each with randomized facial features, renders in React using SVG elements composed from modular components. The visualization demonstrates reusable component architecture by composing `BackgroundCircle`, `Eyes`, and `Mouth` within a `FaceContainer` that handles centering via a translated `<g>` element. The `Mouth` component uses a d3 `arc()` generator with specified start and end angles to create a smile, while `range` from d3 generates the repeated faces. Each face varies randomly in stroke width, eye offset, eye radius, and mouth width, producing a playful, generative pattern.

Feb 27, 2021

Loading thumbnail…

Smiley face part 1

This example renders a smiley face using React and D3.js version 6, drawing SVG shapes onto a 960-by-500 canvas. The face consists of a yellow circle with a black stroke for the head, two dark circles for eyes, and a mouth created with D3’s `arc` helper, which defines an annular sector path with specified inner radius, outer radius, and angle range. The React component computes layout constants such as center coordinates, eye offsets, and mouth dimensions, then applies a transform to center the group. The rendering uses static SVG elements without interaction or animation.

Feb 26, 2021