qwxyyigesm

@qwxyyigesm·8 public vizzes

可视化

This visualization compares Internet Gender Gap and Corruption Perception across countries, using a radial scatter plot where circle position reflects corruption scores and size encodes gender gap. Each point is colored on an ordinal corruption scale, and hovering reveals a tooltip with exact values. Built with React and D3 v6, the code uses `scaleLinear`, `scaleOrdinal`, `csv` loading, and custom legends, with data from GitHub-hosted CSV files.

Nov 11, 2022

Loading thumbnail…

Fork of Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical dataset of Korean food categories and dishes, with nodes arranged in concentric circles around a central root. The code uses the `d3.cluster` layout to position nodes, `d3.hierarchy` to structure the data, and `d3.zoom` to enable panning and zooming interactions. SVG paths and text elements render the tree, with font sizes varying by depth level. The visualization adapts a radial tree structure to present the culinary taxonomy, with branch labels rotated to align with their angular position.

Nov 11, 2022

Loading thumbnail…

Fork of Ramen Rating Viz

This scatterplot visualizes ramen ratings across countries, with each circle representing a brand’s star score on the y-axis and its country of origin on the x-axis. Circle color encodes ramen style (e.g., pack, bowl), while size encodes the rating value, with most points clustered in light red and purple. The visualization uses the vega-lite-api to build a markCircle encoding, pulls CSV data via d3.csv, and renders with vega-lite and vega, configured with custom axis styling. Tooltips reveal brand names on hover, and the plot spans a wide rating range from below 0.5 to 5.4 stars.

Nov 9, 2022

Loading thumbnail…

Fork of Mon Defense by Type

This scatter plot visualizes Pokémon stats by type, showing each creature as a circle positioned by HP on the y-axis and Type 1 on the x-axis, with circle size representing total stat sum and color encoding the same type field. Hovering reveals the Pokémon’s name via a tooltip. The chart is built with the Vega-Lite API, registering Vega and Vega-Lite for rendering, and loads data from a CSV file using d3’s csv method. Appearance is customized through a config file that adjusts axis labels and colors.

Nov 9, 2022

Loading thumbnail…

Fork of NBA Hex Shot Chart

A hexbin shot chart visualizes Damian Lillard's 2019-20 regular season field goal attempts, overlaid on a basketball court. Each hexagon's size encodes shot frequency, while its color, using a red-yellow-blue scale, shows the difference between his field goal percentage and the league average. The visualization uses `d3.hexbin` for binning and `scaleSequential` with `interpolateRdYlBu` for coloring. Shot data is loaded from a CSV, with the court drawn as an SVG path and the chart rendered in SVG.

Nov 9, 2022

Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This example shows two interactive 3D scatter plots of Indian agricultural data, with one trace mapping crop, production, and district, and another mapping crop year, season, and area. It uses Plotly’s `scatter3d` type via `Plotly.newPlot` to render the markers, while D3.js (v3) loads the remote CSV data with `d3.csv` and processes rows using the `unpack` helper. The layout disables margins for a clean, full-window presentation.

Nov 9, 2022

Loading thumbnail…

Fork of Fork of Fork of Random circle shapes with react July 4,2022 -2

This example shows a dense field of randomly positioned, semi-transparent rectangles and circles rendered with React and SVG, each with randomized stroke widths, opacity, and dynamically generated RGB colors. The layout is produced by a fixed array of 200 values calculated from a simple arithmetic formula, mapped through React components to create the visual elements. Using D3 v7 only to select the body and append a base SVG, the code primarily relies on React’s `ReactDOM.render` and custom components like `My_circle` to generate the shapes, with no interactive or animated behavior.

Nov 9, 2022

Loading thumbnail…

Fork of C4SAM Services

This visualization shows a hierarchical tree of hip replacement services, branching from countries to cities, institutions, and experts, with each level sorted by its ranking metric. The code uses D3.js v7 to build and render the tree structure from CSV data fetched via `d3.csv`, applying `d3.hierarchy` and `d3.tree` layouts. It renders as an SVG with an animated collapse-and-expand behavior for nodes, where deeper levels are initially collapsed until clicked. The dark blue background (`#000033`) and horizontal link paths (`d3.linkHorizontal`) create a readable flow across the full window width.

Nov 9, 2022