PaulDFPV

@PaulDFPV·6 public vizzes

Iris Vue

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis, with each flower represented as a fixed orange or yellow circle. It uses Vue 2 to manage the reactive data and SVG rendering, while d3.v7 provides the linear scales, tick generation, and CSV loading via `d3.csv`. A crosshair cursor and a vertical green line track mouse movement, updating its position on `mousemove`. The axes and labels are built from reusable Vue components that call `scale.ticks()` from the D3 scale.

Dec 29, 2021

Loading thumbnail…

Population Bar Vue

This visualization displays the top 10 most populous countries in 2020 as horizontal bar charts, with population values formatted in billions and a crosshair line that follows the mouse. Built with Vue 2 and D3 v7, it uses `d3.csv` to load UN population data, `scaleBand` for the y-axis country categories, and `scaleLinear` for the x-axis population range. The SVG renders bars, tick marks, and axis labels, with a vertical line positioned via the `mousemove` event.

Dec 28, 2021

Loading thumbnail…

CSV Vue

A donut chart displays all CSS named colors, with each color represented by a wedge filled with its own RGB hex value. The chart reads from a CSV file of named colors, loading it asynchronously with `d3.csv`. Built with Vue's template syntax and `v-for` to iterate over arc data, it computes the pie layout using `d3.pie().value(1)` and renders paths with `d3.arc()`. A computed property displays the loaded dataset's size in kilobytes, row count, and column count.

Dec 16, 2021

Loading thumbnail…

Fork of Mouse Vue

A Vue 2 component named `mouse-buddy` renders a single SVG circle that follows the mouse. The root instance tracks pointer movement through the `@mousemove` event, updating a `mousePosition` object which is passed as a prop to the child component. The circle’s `cx` and `cy` attributes are bound directly to this data, with a fixed radius of 30 pixels. No D3 APIs beyond the core library are used; the visualization relies entirely on Vue’s reactive data binding and template interpolation. The SVG viewport is 960 by 500 pixels.

Dec 6, 2021

Loading thumbnail…

Mouse

A single black circle follows the mouse cursor across an SVG canvas, with its position updating reactively in real time. The circle’s center is driven by the `clientX` and `clientY` coordinates from the SVG element’s `onMouseMove` event, stored in React state via `useState` and `useCallback`. The visualization uses React 17 for rendering, D3 v7 for SVG utilities, and demonstrates a simple interactive pattern without any data source or external dataset. The circle radius is fixed at 30 pixels, and the SVG viewport is 960 by 500 pixels.

Dec 4, 2021

Loading thumbnail…

Vis Playground

This example shows a simple cartoon face rendered as an SVG using React components and D3 shape primitives. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a red mouth drawn with the d3.arc path generator. The React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—compose the SVG hierarchy, with FaceContainer applying a translate transform to center the drawing. ReactDOM renders the App component into the DOM, while D3’s arc API generates the mouth’s path data, demonstrating a hybrid React-D3 workflow.

Dec 4, 2021