P

Penguin-jpg

@Penguin-jpg·17 public vizzes

Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, encoding four flower measurements (sepal length, sepal width, petal length, petal width) as vertical axes with each observation drawn as a colored polyline. Users can change which attribute maps to each axis via react-dropdown menus, and hover over the color legend to highlight all lines of a selected species. Built with D3 v7 for scaling and line generation, and React for state management, the SVG renders axes via custom tick components and supports data filtering through D3’s `scaleOrdinal` for categorical colors.

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This example displays the classic Iris dataset as an interactive parallel coordinate plot, with each flower’s measurements drawn as a semi-transparent colored path across four vertical axes. The colors correspond to the three Iris species, with a legend shown below. Users can drag any axis horizontally to reorder the dimensions, which triggers a smooth animated transition of the paths and axes. The implementation uses D3 v5 with `scalePoint` for axis positioning, `scaleLinear` for value mapping, `d3.drag` for interaction, and `transition.attr` for the reordering animation.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create a dual-legend visualization for categorical data, using both color and size to encode fruit type. It shows apples and lemons as scaled circles arranged in a bowl-shaped container rendered in an SVG. The implementation uses d3.v5’s `select` and `scaleOrdinal` APIs, with `colorLegend` defining the legend’s layout and `radiusScale` implicitly controlling circle sizes. The data is a hardcoded array of fruit types, and the rendering relies on SVG shapes with styled strokes and fills.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, letting users select any column for either axis via dropdown menus. The visualization updates both axes and labels dynamically with each selection, using circles with opacity to show data density. Built with D3 v7, the code demonstrates modular ES6 imports, reusable chart functions, and shared dropdown menu logic. Data loads from a CSV file, with numerical parsing performed before rendering as an SVG using scales, axes, and gridlines.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit appear in a row, and clicking one highlights it with a black outline. The scene animates over time: a fruit is removed after one second, an apple changes into a lemon after two seconds, and another fruit is removed after three seconds. The example uses D3 v7 with `d3.select`, `d3.range`, and `d3.scaleOrdinal` to manage colors and radii, while SVG `<circle>` elements are added, updated, and removed via `transition().duration()` for smooth animations.

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

Loading thumbnail…

Singular Element

This example demonstrates a simple fruit bowl visualization where apples and lemons are placed in a bowl using D3’s ordinal scales. The code uses `scaleOrdinal` for color and radius mappings, and `selectAll` with `merge` to manage SVG elements. Data is modified over time via timers, causing fruits to be added, removed, or replaced, with the chart updating accordingly. The SVG rendering uses `rect`, `circle`, and `text` elements, with styles defined in an external CSS file.

Loading thumbnail…

Nested Elements

This example demonstrates nested SVG elements—groups containing circles and text—animated through a fruit bowl metaphor. D3 selections and data joins update the visualization as fruits are eaten or replaced, with transitions smoothly moving groups and resizing circles. The code imports `scaleOrdinal` for color and radius mapping, alongside `select` and `range` from d3.v7, and uses `transition().duration()` to animate changes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, using a bowl of fruit to show enter, update, and exit transitions. Circles representing apples and lemons are animated with scaleOrdinal for color and radius, while the enter state starts at radius 0 and exit shrinks back to 0. The code uses d3.select, d3.range, and transition().duration() with .attr, .merge, and .remove to handle changes over time. A rectangle provides the bowl backdrop, and mouse-less updates are triggered via setTimeout.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved line to connect data points, along with gridlines and axis labels for clarity. The code loads data from a CSV file, parses timestamps and numeric temperatures, and renders the visualization using D3 v7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a basis curve. The SVG output is styled with custom CSS for typography and line appearance.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature measurements in San Francisco, with time on the x-axis and temperature on the y-axis, including gridlines, axis labels, and a title. The data is loaded from a CSV file and rendered as a smooth curve using D3 v7’s `scaleTime`, `scaleLinear`, `line`, and `curveBasis` generators. Axes are drawn with `axisBottom` and `axisLeft`, while the SVG output is styled via external CSS for ticks, labels, and the maroon stroke of the line path.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines, while `csv` loads the remote data and converts values to numbers. The SVG rendering includes a title, rotated y-axis label, and axis padding, demonstrating local ES6 module imports alongside D3's UNPKG distribution.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, sorted by size, using a logarithmic-free linear scale. The axes are customized with abbreviated tick labels (e.g., "1.4B") and colored gridlines, while the y-axis removes its domain line. Built with D3 v7, the example loads data from a CSV via `d3.csv`, uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and formats ticks with `d3.format`.

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart ranking ten countries by population, with population values on the x-axis and country names on the y-axis. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the scales, and d3.axisLeft and d3.axisBottom to render the axes. The bars are drawn as SVG rectangles scaled by population, and the visualization updates through a render function. The code also demonstrates ES6 module imports and local data loading in a VizHub context.

Loading thumbnail…

Create a face with d3.js!

This visualization assembles a smiling cartoon face from basic SVG shapes—a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth—centered within a 960×500 canvas. The d3.v7 code imports `select` and `arc` from the D3 library, uses `transition()` to animate the eyebrow group’s vertical position over two seconds, and relies on an SVG `path` with computed coordinates for the mouth. Rendered entirely in the browser with D3’s DOM manipulation, it highlights animated attribute updates without external data.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths, styled directly via CSS classes and inline attributes. Rendered inside an SVG element on an HTML page, the shapes are grouped using `<g>` elements that apply scaling and translation transforms. The CSS defines visual properties such as stroke color, stroke width, and line joins, with some groups inheriting fill and stroke from parent elements. The visualization makes no use of external JavaScript libraries, relying instead on static SVG markup and cascading styles.

Loading thumbnail…

Fork of HTML Starter

A minimal HTML page demonstrates how to render a centered message with CSS and JavaScript. The code uses a single `<div>` element with a `.message` class, styled via inline CSS to control font size and text alignment, and contains no explicit JavaScript logic. It serves as a basic template for displaying static text content in a browser, relying on the HTML, CSS, and JavaScript standards. The example is a simple starting point for building more complex web-based visualizations, with no data sources or external libraries involved.