王

王神鐸

@Shenduo·5 public vizzes

Untitled

This example demonstrates VizHub’s ability to import D3 and local ES6 modules. The page renders a large centered message in a 12-em font, styled via the `styles.css` file. The code loads D3 from UNPKG and uses `import` statements to access D3 functions and a local module, showcasing modular JavaScript and external dependency integration within a browser environment. The visualization itself is static text, with no data or interactive behavior.

Jun 23, 2021

Loading thumbnail…

Income level classifications

This interactive choropleth map visualizes World Bank income level classifications for countries, using a purple color scale to show GDP-based categories such as low, lower-middle, upper-middle, and high income. Built with D3 v5 and topojson, it loads geographic and tabular data from `world-atlas`, projects countries with `geoNaturalEarth1` and `geoPath`, and applies a custom legend component. Hovering highlights individual countries, while the legend displays the income categories and their corresponding colors. The map provides a global view of wealth distribution, contrasting with the donut charts from the original article.

May 22, 2021

Loading thumbnail…

World Map

This visualization displays a world map using SVG paths, with each country rendered as a distinct shape that changes color on mouse hover. It also shows country names and population estimates as tooltip labels. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw geographic features from TopoJSON data, while country metadata comes from a TSV file. Interaction is handled through CSS hover effects, with country names and populations loaded from world-atlas and countries.json sources.

May 18, 2021

Loading thumbnail…

drawing with d3

This example shows a yellow smiley face drawn with D3.js, centered in an SVG canvas with a black outline. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending a group for centering, and adding a circle with fixed attributes. Using d3.select and d3.arc from the v5 module, it sets the circle’s radius to half the SVG’s height. The rendering relies on SVG primitives, with styles defined in an external stylesheet that removes margins and hides overflow. No interactive features or animated eyebrows are implemented in the provided files.

Apr 19, 2021

Loading thumbnail…

Bar chart hw1

This bar chart displays the population of ten countries, sorted by country name, with horizontal bars scaled by population in thousands. It uses a linear population scale and a band scale for countries, rendering via SVG through D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The axis labels and tick formatting use `format('.3s')` to abbreviate large numbers. The visualization loads data from a CSV file using D3’s `csv` function, then applies the scales and axes to draw the chart with a clear margin-based layout.

Mar 24, 2021