P

pei9223

@pei9223·24 public vizzes

Loading thumbnail…

scatter plot iris-react

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between two selectable floral measurements (sepal/petal length and width) across three Iris species. The chart uses d3.scaleLinear and axis components to render axes and grid lines in SVG format. React manages the component structure, while jQuery handles dropdown selections for switching variables. The visualization reads data from a local iris.csv file, with each point representing an individual flower sample, though the variable selection and dynamic updating remain partially implemented.

Loading thumbnail…

scatter plot iris

This interactive scatter plot visualizes the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting axes from dropdown menus. The code uses D3 v5 for scales and axes, builds the visualization with React, and loads data from iris.csv. It demonstrates dynamic axis updates and customizable tick styling on an SVG render.

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and renders circles via SVG. The code employs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with hover tooltips using SVG `<title>` elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values, while axes display formatted tick labels and a Poppins font styles the presentation.

Loading thumbnail…

scatter plot with menu

This scatter plot displays the relationship between horsepower and weight for cars in the auto-mpg dataset, with each semi-transparent steelblue circle representing a vehicle. The visualization uses D3 v5’s scaleLinear, axisBottom, and axisLeft to construct the axes, while axis tick lines extend across the plot to create a grid. The data is loaded as CSV via d3.csv and parsed into numeric values before rendering as SVG circles. The chart includes rotated axis labels and a title, though the menu referenced in the title is not implemented in the shown code.

Loading thumbnail…

Blank Canvas

A large, rounded-corner rectangle fills the entire browser viewport, its dimensions set to match the `clientWidth` and `clientHeight` of the document body. This minimal visual canvas is rendered as an SVG `rect` element, created via the D3 v5 `select` API, with an `rx` attribute of 40 to soften its corners. The example demonstrates a blank slate, showing only the foundational shape that could serve as a clipping boundary or backdrop for more complex D3 visualizations. No data or additional marks are present, relying solely on the SVG structure defined in the HTML and JavaScript files.

Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection map with countries rendered as light green shapes against a blue ocean sphere. It uses D3 v5 and TopoJSON to load world-atlas data from unpkg, then applies `geoNaturalEarth1` for the projection and `geoPath` to generate SVG paths for each country feature. The sphere outline and country boundaries are drawn as SVG elements, with styling defined in CSS.

Loading thumbnail…

bowl fruit hover select

A bowl of fruit rendered as SVG circles supports interactive hover selection. Five apples appear, then a fruit is removed, one apple changes into a lemon, and another apple is deleted, with animated transitions adjusting positions and radii. Mouseover and mouseout events call `setSelectedFruit` to highlight the selected fruit with a black stroke. The code uses D3 v5 data joins with `enter`, `merge`, and `exit` selections, plus `transition().duration(1000)` for smooth updates.

Loading thumbnail…

bowl fruit click select

A bowl of fruit demonstrates an animated data join. Apples and lemons appear, change, and shrink away as the dataset updates, with a click selecting a fruit and outlining it in black. The example uses D3 v5 with SVG, applying `selection.data`, `enter`, `merge`, and `exit` for transitions. Dynamic styling uses `attr` with transition, while click handlers update a highlighted selection.

Loading thumbnail…

bowl fruit 2

A bowl of fruit animates as apples and a lemon are added, removed, and transformed over time. Using D3 v5’s selection and transition APIs, each fruit is rendered as an SVG `<circle>` with a label, while a rounded `<rect>` forms the bowl. The example demonstrates enter, update, and exit states as the dataset changes, with a one-second transition interpolating position and radius. Fruit types map to fixed colors and sizes, and the code explicitly merges newly created and existing groups to manage state.

Loading thumbnail…

bowl fruit general update

This example demonstrates a data join pattern for a fruit bowl visualization, where apples and lemons are added, removed, and updated over time via animated transitions. It shows how SVG circles with distinct colors and radii represent different fruit types, while the bowl’s contents change through a sequence of timed updates. The code uses D3 v5’s `selection.data` with a key function, `enter`, `merge`, and `exit` selections, combined with `transition().duration()` to smoothly animate position and radius changes. The animation runs automatically on page load, with updates triggered by `setTimeout` callbacks that modify the fruit array and re-render.

Loading thumbnail…

temperature area chart

This area chart visualizes a week of temperature readings in San Francisco, drawing data from a CSV file loaded with the `d3.csv` method. The curved, maroon-filled area shows temperature fluctuations over time, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth path, alongside `axisBottom` and `axisLeft` for the labeled axes, all rendered as SVG.

Loading thumbnail…

temperature line chart

This line chart visualizes temperature variations over the course of a week in San Francisco, with data loaded from a CSV file. The y-axis is labeled "Temperature" and the x-axis is labeled "Time," with both axes configured using `axisLeft` and `axisBottom`. The chart is rendered as an SVG, with a smooth, curved line generated using the `line` and `curveBasis` functions from D3 v5, and a maroon stroke styled via CSS.

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The D3 v5 code uses `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with gridlines via `tickSize`. Circles are appended to an SVG group, and the title text is positioned manually. The visualization demonstrates custom axis formatting with `format('.3s')` and removes default domain lines for a cleaner appearance.

Loading thumbnail…

scatter plot

This scatter plot displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the categorical y-axis. Customized axes remove domain lines and format population values with abbreviations, while circles of a fixed radius are positioned using `cx` and `cy` attributes.

Loading thumbnail…

custumize bar chart axis

This bar chart displays the populations of the top 10 most populous countries, sourced from the 2018 United Nations World Population Prospects estimate. It demonstrates custom D3 v5 axis configurations, including a formatted tick scale that abbreviates large numbers and the removal of axis domain lines. Using `d3.csv`, `scaleLinear`, and `scaleBand`, the SVG rendering highlights a clean, minimal style with customized tick labels and an overlaid axis title.

Loading thumbnail…

bar chart

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations’ World Population Prospects 2017. The view prioritizes the data, showing each country’s population as a steelblue rectangle scaled by d3.scaleLinear, with country names positioned on a d3.scaleBand axis. The code uses D3 v5 APIs including d3.csv, d3.axisLeft, and d3.axisBottom to render the SVG chart, with margins and inner dimensions computed from the fixed width and height of the SVG element. Population values are converted from thousands to full numbers before plotting.

Loading thumbnail…

d3js

A yellow smiley face with black outlines and animated eyebrows is drawn in a 960x500 SVG canvas using D3 v5. The face comprises circles for the head and eyes, rectangles for eyebrows, and a path generated with the D3 `arc` function for the mouth. The `d3.select` and `d3.transition` APIs animate the eyebrow group’s vertical position over two seconds, creating a blinking effect. All shapes are appended to a central group, with code structured for clarity.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes, including circles, rectangles, lines, and paths, styled with CSS and inline attributes. It demonstrates grouping and transformation using the `transform` attribute, such as `scale` and `translate`, while applying fills, strokes, and stroke widths. The SVG is embedded directly in an HTML file, with external CSS controlling stroke properties for line elements. The rendering approach uses static SVG code, and the visual output is presented without any external data sources or JavaScript libraries.

Loading thumbnail…

Fork of HTML Starter

This example shows a simple web page displaying the text “Hello HTML!” centered on a white background. It uses a CSS class called `.message` to set the font size to 13em and align the text in the center. The page is built with a minimal HTML file that includes inline styles and a single `<div>` element. There is no JavaScript or data visualization involved; it serves as a basic template for HTML and CSS styling.

Loading thumbnail…

promise

This example demonstrates the use of native JavaScript Promises within a D3.js v5 visualization. It logs a message to the console and returns a Promise that resolves, showcasing asynchronous control flow alongside a simple HTML page. The code loads D3 from UNPKG, uses an ES6 module for a text message, and renders the message "Hello VizHub!" in large centered text via CSS styling. The visualization highlights how Promises integrate with D3’s event-driven environment.

Loading thumbnail…

Fork of Cars Report

This gallery example demonstrates a JavaScript web application that fetches car data and displays a filtered report of vehicles priced under $2000. The page initially shows "Loading..." before asynchronously retrieving a hardcoded JSON array using a custom `getCars` function, which simulates a network delay. Once loaded, the `generateReport` module filters and formats each entry via `formatCar`, then renders a multi-line text report into an HTML `<pre>` element. The implementation relies on core JavaScript features like ES6 destructuring, array methods, and promises, with no external visualization libraries.

Loading thumbnail…

Car Reports

This example renders a simple text message, “Hello VizHub!”, centered on the page using D3’s `select` to target a div with the ID `#message`. It demonstrates loading D3 v5 from UNPKG, importing the `select` function via ES6 modules, and importing a local module (`myMessage.js`) that exports the `message` constant. The code also links an external CSS file to style the text with a large font size and center alignment.