Guan

@Gary123fff·10 public vizzes

plot

This interactive scatter plot displays the classic Iris dataset of 150 flowers, colored by species. Users can select any two flower measurements for the x and y axes via dropdown menus, instantly updating the visualization. The graph uses `scaleLinear` for quantitative axes, `axisBottom`, and `axisLeft` with grid lines, and `scaleOrdinal` to map species names to a custom color palette. A legend shows the color mapping, and the plot is rendered as an SVG.

Sep 14, 2024

Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This interactive visualization displays the August 2016 unemployment rate for U.S. counties on a choropleth map, using a quantile color scale with d3.scaleQuantile and the Inferno interpolator. A brushable histogram below the map, built with d3.bin and d3.brushX, allows filtering highlighted counties by rate, with non-selected areas grayed out via d3-rosetta utilities. The map supports zooming, uses topojson-client for county boundaries, and renders with d3.geoPath and the geo-albers-usa-territories projection.

Sep 14, 2024

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes world countries colored by their economic group, with an interactive color legend that filters the map to show only countries in a selected category. Clicking a legend entry dims non-matching countries to 10% opacity while highlighting the selected group, and clicking again resets the view. The visualization uses d3.geoPath with a natural Earth projection, d3.scaleOrdinal with a spectral color scheme, and loads country boundaries and metadata from the world-atlas package. A zoom interaction is also included, allowing users to pan and scale the map.

Sep 13, 2024

Loading thumbnail…

Fork of bar customize

This example displays a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map data, and `axisBottom` and `axisLeft` to render axes with custom tick formatting (converting G to B). Data is loaded from a CSV file via `d3.csv`, and each bar’s width reflects the population value multiplied by 1000. The SVG rendering includes a title, axis label, and gridlines with tick marks.

Sep 13, 2024

Loading thumbnail…

bar

A horizontal bar chart displays the ten most populous countries, with population values multiplied by one thousand from a CSV file. Each country’s bar length is proportional to its population, using D3’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The visualization renders as an SVG, leverages `axisBottom` and `axisLeft` for tick labels, and styles bars with steelblue fill via CSS.

Sep 13, 2024

Loading thumbnail…

Fork of Responding to Resize

This example shows an SVG that dynamically resizes to fill the browser window, drawing a green X that spans the full width and height. The code uses a fixed-position `#chart` div and reads its `clientWidth` and `clientHeight` to set the SVG’s attributes on every resize. It leverages d3.v5’s data join with `selectAll`, `enter`, and `merge` to update two `line` elements, and listens to the window’s `resize` event to trigger a redraw. The rendering is purely SVG with no external data source.

Sep 13, 2024

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS2

A yellow smiley face with black eyes and an arc-shaped mouth is centered in an SVG canvas. The eyebrows animate upward and back down over four seconds using chained D3 transitions. The code uses d3.select, d3.arc, and transition.attr to build the face from SVG shapes, with static geometry defined in index.js and basic styling in styles.css.

Sep 13, 2024

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example visualizes basic geometric shapes, including circles, rectangles, lines, and a path, using SVG elements within a 960-by-500 canvas. It demonstrates how styling and transforms are applied via CSS classes and inline attributes, such as grouping elements with the `translate` and `scale` transforms, and using fill and stroke properties for coloring and outlines. The `styles.css` file defines a `.lines` class that sets stroke color and width, while SVG’s native `circle`, `rect`, `line`, and `path` elements structure the composition. The rendering approach is purely vector-based, with no external data source.

Sep 13, 2024

Loading thumbnail…

Practice

This example demonstrates a minimal D3.js setup within VizHub, showing how to load D3 via UNPKG and use ES6 module imports for local code. It renders a static message, "Hello VizHub!", into a div using `d3.select` and `.text()`, with the text styled by an external CSS file. The code also highlights importing functions from D3 and a local `myMessage.js` module, serving as a template for project structure.

Sep 13, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment’s hot reloading feature, where altering a numeric value in the code changes the displayed text size in real time. It renders a static “Hello World!” message using a plain HTML `div` styled with inline CSS, with the font size controlled by a variable that users can adjust via Alt-drag. The code exports a `main` function that takes a `container` element and sets its `innerHTML`, showing the simplified entry point without an `index.html` file. It relies solely on vanilla JavaScript and browser APIs, with no external libraries.

Sep 13, 2024