bdfee

@bdfee·8 public vizzes

Map of the World

This example displays a line chart of temperature over time, with each day’s temperature connected by a smooth, natural curve. The visualization loads geographic data from the world-atlas TopoJSON file but renders only the time-series path, with axes labeled “Time” and “Temperature.” Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` for scales, `line` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components to render ticks and labels. The data source is the Data Canvas Sense Your City dataset, though the mapping is not applied here.

Jan 16, 2022

Loading thumbnail…

Fork of Fork of Fork of Mouse Follower

This visualization shows three colored circles positioned statically within an SVG canvas: a blue circle at the top left, a red circle in the middle, and a green circle on the right. Built with React and D3.js v7, the code uses `d3.select` to append each circle via `svg.append("circle")`, setting coordinates and fill colors through `.attr` and `.style` methods. The rendering approach relies on SVG elements within a React component, with the circles’ placements hardcoded despite the title referencing a mouse-follower interaction.

Nov 18, 2021

Loading thumbnail…

Fork of Fork of Mouse Follower

A React and D3 v7 SVG smiley face follows the mouse cursor in real time. The component tracks pointer movement through an SVG `<circle>`'s `onMouseMove` event, updating React state to reposition the circle. The example demonstrates a lightweight integration of React's state management with D3's `scaleLinear` import, though no scales are actually applied. The visualization renders a single interactive circle without additional graphical elements, showcasing basic event handling and re-rendering in a React-driven D3 setup.

Nov 18, 2021

Loading thumbnail…

Fork of Mouse Follower

This example shows a smiley-face circle that follows the mouse cursor across an SVG canvas, with its fill color changing dynamically based on the cursor's screen coordinates. The circle’s position is updated through React state managed by the `useState` hook, while two `d3.scaleLinear` instances map the X and Y coordinates to RGB color channels. Rendering is handled via React’s `ReactDOM.render` on a D3-selected SVG element, with the mouse-move event triggering a state update that re-renders the circle.

Nov 14, 2021

Loading thumbnail…

loading and parsing CSV data

This example shows a webpage that displays the message "loading and parsing CSV data" in large text at the center of the screen. The code uses vanilla JavaScript to handle the document structure, with HTML and CSS providing the layout and styling for the message. The page appears to be a placeholder or starting point, as it does not yet include any actual CSV file loading, parsing logic, or external JavaScript libraries.

Nov 14, 2021

Loading thumbnail…

Mouse Follower

A smiley face is not shown; instead, a single circle follows the mouse cursor across a 900-by-500 SVG canvas. The circle’s fill color is computed from the cursor’s x and y coordinates using three separate `d3.scaleLinear` instances, mapping positions to RGB channel values. The React app uses the `useState` hook to update the circle’s center on every mouse move, with the D3 scales applied inside the `rgbScale` helper. The example demonstrates mixing D3’s scaling functions with React’s event handling for interactive SVG graphics.

Nov 14, 2021

Loading thumbnail…

colors2

This visualization displays all named CSS colors as large text elements, one per color, with each word rendered in its corresponding hue. The page uses a simple centered layout with an oversized font size to showcase the color names. The code fetches a CSV file of CSS color names and their RGB values from a GitHub gist, then parses it using D3’s `csv` method. The D3 library is loaded via a CDN, and the fetch API retrieves the data asynchronously before rendering the results on the page.

Nov 6, 2021

Loading thumbnail…

let's make a face

A grid of eighteen cartoon faces fills the screen, each rendered as a yellow SVG circle with black outlines, two eyes, and a curved mouth. The faces vary randomly in eye radius and mouth thickness, creating playful individual expressions. The example uses React components to compose each face from reusable parts, with the mouth path generated via `d3.arc` and the grid created by mapping over `d3.range`.

Nov 6, 2021