Skip to main content
Log in
G

gaowxx@qq.com

@gaowxx·8 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between vehicle weight and horsepower for 25 car models, with each point representing a car from the dataset. The visualization uses D3 v5 to render SVG circles, with weight on the x-axis and horsepower on the y-axis. The code employs d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to create scales and axes, while d3.format customizes the tick labels to abbreviate large numbers. The chart includes grid lines, axis labels, and a title, with data loaded from a CSV file via d3.csv.

Dec 29, 2024
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. Using d3.csv to load the data, the code applies d3.scaleLinear and d3.scalePoint to position circles, while d3.axisBottom and d3.axisLeft render grid lines and tick labels. A custom tick formatter converts large numbers to billions using the 'B' suffix, and d3.format handles abbreviation. The SVG rendering includes labeled axes, a title, and styled circle marks.

Dec 29, 2024
Loading thumbnail…

Customizing Axes

A bar chart displays the population of the ten most populous countries, with countries on the y-axis and population on the x-axis. The example demonstrates customizing axes: d3.axisBottom applies a tick format that converts large numbers to billions (replacing "G" with "B"), while the y-axis removes its domain and tick lines. Axis labels and a title are added via SVG text elements. Rendering uses SVG within a d3.v5 selection, with data loaded from a CSV file and scaled using d3.scaleLinear and d3.scaleBand.

Dec 18, 2024
Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Dec 11, 2024
Loading thumbnail…

Fork of Making a Bar Chart22

This bar chart displays population figures for ten countries from a CSV file, using horizontal bars sorted by country name. The visualization is built with D3 v5 and rendered as SVG, employing `scaleLinear` for the population axis and `scaleBand` for categorical spacing. The code loads data via `d3.csv`, transforms population values to numbers, and draws axes with `axisLeft` and `axisBottom`. Bars are appended as rectangles with widths proportional to population, styled with steelblue fills and a custom margin layout.

Dec 11, 2024
Loading thumbnail…

Fork of Making a Bar Chart

This example shows a horizontal bar chart of population figures for ten countries, with each bar’s length proportional to its value and country names on the y-axis. The chart uses D3 v5’s `csv`, `scaleLinear`, and `scaleBand` to map the data, along with `axisLeft` and `axisBottom` for labeled scales. Bars are rendered as SVG `rect` elements, colored steelblue via CSS, with margins set around a 960×500 viewport. The data comes from a CSV file listing country and population in thousands.

Dec 11, 2024
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of ten countries, using horizontal bars scaled linearly from zero to the maximum value. Built with D3 v5, the visualization loads data from a CSV file, converts the population strings to numeric values, and renders SVG rectangles. The chart employs `scaleLinear` and `scaleBand` for positioning, with axes generated via `axisLeft` and `axisBottom`. Bars are styled with a steelblue fill, and the layout includes defined margins for clear presentation.

Dec 11, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment, a blank slate starting point with continuous hot reloading. It uses the exported `main` function from `index.js`, which receives a container and options object with state management. The code logs to the console and reads population data from a CSV file, though no visualization is rendered. The example highlights interactive widgets, where holding Alt and dragging a number in the editor provides real-time property adjustments.

Dec 11, 2024