pengming0807

@pengming0807·8 public vizzes

Making a bar chart

A bar chart displays population estimates for six global regions from a CSV file, showing Africa, Asia, Europe, Latin America and the Caribbean, Northern America, and Oceania. The visualization uses D3 v5’s `select` and `csv` methods to load the data, then converts each population value from millions to thousands. The SVG chart is rendered at 960 by 500 pixels, with the page styled to remove margins and hide overflow. The code currently logs the processed data to the console, laying the foundation for drawing bars.

Jan 16, 2022

Loading thumbnail…

Practice_Trees Record

This example displays a simple record of two trees surveyed in Mui Shue Hang Park, Tai Wo, with accompanying position and altitude data. The visualization shows two schematic trees composed of geometric shapes, each represented as a group containing a brown rectangular trunk and a green elliptical crown. The code uses D3 v7 selection and SVG element creation to append and position these shapes. Specific attributes such as coordinates and fill colors are set directly on the rectangles and ellipses. Data is presented in an HTML list format with highlighted labels for each tree.

Jan 7, 2022

Loading thumbnail…

let's make a face

This example draws a simple cartoon face using SVG primitives styled with D3 v7. It shows a yellow circle head with two eyes, purple elliptical eye sockets, and a red arc-based mouth. The code uses D3 selections and the `d3.arc` shape generator to construct the mouth path, while positioning elements via explicit `x` and `y` attributes on a 1000×500 SVG canvas.

Jan 7, 2022

Loading thumbnail…

html cars report

This example displays a static HTML report of used cars with model names, years, and prices, highlighting the 2012 Nissan Leaf in red. It loads D3 via UNPKG and uses the `select` API from D3 to set the text of a message div, which imports its content from a local ES6 module. The page’s styling comes from an external CSS file that sets a monospace font and the highlighted color class, demonstrating basic module imports and DOM manipulation without dynamic data binding or visualization.

Jan 4, 2022

Loading thumbnail…

shapes by css and svg

This example demonstrates the visual difference between CSS and SVG shape rendering by drawing circles and rectangles inside two SVG groups. The first group applies a translation transform, while the second group uses a scale transform, and a shared stroke style is applied to lines and paths. The code renders directly in SVG, uses D3.js for importing the selection API, and includes local ES6 modules. The scene uses standard SVG elements with explicit fill, stroke, and transform attributes.

Oct 14, 2021

Loading thumbnail…

Untitled

This example demonstrates how to combine D3.js with ES6 modules in a VizHub project. It loads D3 from UNPKG and uses the `select` function to set the text content of an HTML element with the id “message.” The text itself comes from a separate local module, `myMessage.js`, which exports a string. The stylesheet centers this message and applies a large font size, resulting in a simple, visually prominent greeting.

Oct 14, 2021

Loading thumbnail…

Untitled

This example demonstrates how to load D3.js via UNPKG and use ES6 modules from both external and local sources. The code imports the `select` function from D3 and applies a locally imported message string to the text of a `#message` div. The message, defined in `myMessage.js`, is displayed centered at a large font size through `styles.css`. It serves as a minimal template for combining D3 imports, local modules, and styling in VizHub.

Oct 14, 2021

Loading thumbnail…

Untitled

This example displays a full-screen, centered greeting message using D3.js loaded via UNPKG. It imports the `select` function from D3 and a local ES6 module, `myMessage.js`, to set the text content of a `div` element. The CSS styles the message with large, centered text, demonstrating basic DOM manipulation and local module imports within a VizHub project.

Oct 14, 2021