1807589994@qq.com

@GwentMasterShen·10 public vizzes

World Population

This scatterplot visualizes world population data, plotting each country’s growth rate against the log10 of its population density. Circles are sized by population and colored by continent, with a dropdown filter and a range slider to narrow results. Hovering reveals the country name and dashed guide lines. The implementation uses D3 scales and axes, `d3.sliderBottom` for brushing, and SVG elements for rendering, with data sourced from a custom dataset.

Nov 30, 2024

Loading thumbnail…

World Population Dataset

The visualization displays the raw JSON structure of the first record from the World Population Dataset, parsed from CSV via a data import. It shows every field—including country name, continent, population figures from 1970 to 2022, area, density, and growth rate—as a key-value pair. The code utilizes a static HTML `<pre>` element with a large font size to render the JSON string, converted using `JSON.stringify` for readable presentation.

Nov 9, 2024

Loading thumbnail…

test

This example demonstrates an interactive line chart of a sine wave, plotting y = sin(x) for x values from 0 to 100. A brushable range slider allows users to zoom into a specific x-domain interval, dynamically updating the x-axis scale and the plotted line to show only the selected portion. The visualization is built with D3.js, using `d3.scaleLinear` for axes, `d3.line` for the path, and the `d3-simple-slider` library's `sliderBottom` component for the range selection. The SVG rendering is generated programmatically from random-like data computed in the code.

Nov 1, 2024

Loading thumbnail…

World Population Map

This visualization displays global population distribution using a natural Earth projection, with circle markers positioned at capital cities. Circle size encodes population magnitude, while color categorizes each country by continent. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for rendering country boundaries and graticules, with `topojson-client` converting TopoJSON world atlas data. Population and capital coordinates come from combined CSV datasets, with circle radii scaled proportionally to the square root of population.

Oct 24, 2024

Loading thumbnail…

Pseudo Line Chart with D3

This visualization displays the average population growth rate for each continent across five decades, from 1970 to 2010, using a pseudo line chart. Six distinct colored lines represent Asia (yellow), Africa (orange), North America (green), South America (purple), Europe (blue), and Oceania (red). Built with D3 v7, the code uses `scaleLinear` for both axes, `line()` generators to create each path, and `axisLeft` for the y-axis. The chart includes a gray inner rectangle background, axis labels for "Decades" and "Growth Rate(%)", and hardcoded data from the `index.js` file, with each line appended as an SVG path with a stroke width of 2.

Sep 26, 2024

Loading thumbnail…

Pokémon Attack and Defense Scatter Plot

This scatter plot visualizes the relationship between Attack and Defense stats for Pokémon, with each circle representing a species. The plot uses D3 scales and axes to map attack values on the x-axis and defense on the y-axis, over a gray inner rectangle. Data from the Pokémon Base Stats Dataset is rendered as semi-transparent circles via D3’s `selectAll` and `join` pattern. Axis labels are added using the `@curran/axis-labels` library, while `scaleLinear` and `extent` from D3 handle the value mapping.

Sep 26, 2024

Loading thumbnail…

Fork of Circles with D3

This visualization generates a dynamic abstract composition of nested rectangles and circles. The code uses D3.js (v7) to create an SVG canvas, then recursively draws a spiraling sequence of colored rectangles based on the golden ratio. Each rectangle is filled with a randomly generated hex color, while the background uses a light green tint. The rendering relies on D3's `select`, `selectAll`, `data`, `join`, and `append` methods to manage SVG elements and dynamically resize the canvas to fit its container. The final image resembles a colorful geometric fractal spiral.

Sep 12, 2024

Loading thumbnail…

PokémonBaseStatsDataset

This example displays the raw first row of the Pokémon Base Stats Dataset as a formatted JSON object in a pre element. The code loads the CSV file, coerces all numeric fields to numbers, and then renders the first entry’s complete attributes—including name, type, height, weight, and battle stats—at a large default font size. The visualization serves as a simple data inspection tool, using the imported CSV parsing from the dataset file and vanilla JavaScript DOM manipulation via `innerHTML` to present the structured record.

Sep 12, 2024

Loading thumbnail…

2023 NFL Drafted Players Data

This example displays the first record of the 2023 NFL Drafted Players dataset, showing the parsed attributes of a single player such as team, position, and performance stats. Using `data.csv` loaded with an `import`, the `index.js` file converts all numeric fields from strings to numbers, then renders a formatted JSON preview of the first row into the container using a `<pre>` element. The visualization relies on standard JavaScript array and `JSON.stringify` methods rather than external charting libraries, offering a minimal data-inspection view.

Sep 12, 2024

Loading thumbnail…

Top 10 Players in 2023 NFL Fantasy Rankings

This animated visualization displays the top 10 players in the 2023 NFL Fantasy rankings, with each player’s circle sized proportionally to their VBD score and colored according to their team colors. The circles and name labels sequentially fade and scale into place using D3.js transitions with staggered delays. Data is sourced from Pro-Football-Reference. The code uses `select`, `transition`, and `easeLinear` from D3 to animate entering circles from radius zero and label opacity.

Sep 12, 2024