leezhiying

@leezhiying·9 public vizzes

HTML Cars Report

This example presents a simple, static HTML report listing three used cars with their model years, names, and prices. The page uses only core HTML with an external stylesheet, `styles.css`, that sets the body font size to ten em units, making the text appear extremely large. No charting or visualization libraries are employed, and the data is hard-coded directly into the list items, with no interactive or dynamic rendering. The report is a plain bulleted list of vehicle entries, demonstrating a minimal markup structure without JavaScript or advanced graphics.

Oct 30, 2019

Loading thumbnail…

Hotdoujiang's playground

This example demonstrates a minimal React-based web page that displays a static text message, "Hello World", centered on the screen. The code uses plain HTML with a `<pre>` element and JavaScript to set the text content via `document.getElementById`. The rendering approach is straightforward, with no external data sources or visualization libraries involved; it serves as a simple starter template for integrating React with VizHub.

Oct 29, 2019

Loading thumbnail…

Hello World

A simple text display example, this page renders the message "Hello World" in a browser using a plain HTML `<pre>` element. The code imports a string from a separate ES6 module and sets it as the element's text content via the Document `getElementById` API. It demonstrates basic module loading and DOM manipulation without any visualization or data processing.

Oct 29, 2019

Loading thumbnail…

Untitled

This example visualizes global population data from a 2019 UN dataset using React and D3.js. It displays a bar chart where each country is represented on the y-axis using a scaleBand, with the chart rendered as an SVG. The code loads the CSV data asynchronously via d3.csv and uses the useState and useEffect hooks to manage the data fetching and state. Though the layout is incomplete, it demonstrates the integration of D3’s scaling functions within a React component framework.

Oct 21, 2019

Loading thumbnail…

CS399

This bar chart displays the top 10 most populous countries, based on 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis and `scaleBand` for country categories. The code customizes axes with `axisBottom` and `axisLeft`, formats tick labels using D3's `format` function, and reads data from a CSV file via `csv`. The chart also includes labeled axes and a title, building upon a prior bar chart example.

Oct 21, 2019

Loading thumbnail…

Menus with React

This example demonstrates a simple pet-selector interface built with React, where a user can choose a pet from a dropdown menu and the selection is logged to the console. The page starts with the hamster option preselected. The code defines a reusable `Dropdown` component that renders an HTML `<select>` element, mapping over a hardcoded list of options. State management is handled through React’s `useState` hook, with the current value passed back via an `onSelectedValueChange` callback. It utilizes React 16.9 and ReactDOM directly from unpkg CDN.

Oct 21, 2019

Loading thumbnail…

Menus with Starter

This example demonstrates a simple dropdown menu interface built with React, displaying a list of pet options such as Dog, Cat, and Goldfish. The code defines a reusable `Dropdown` component that maps over an array of options to render `<option>` elements, while a second static `<select>` element shows a hardcoded menu. React 16.10.0 and ReactDOM are used via UMD builds to render the interface into the `#root` div. The example highlights basic component structure and controlled option rendering in a React application.

Oct 21, 2019

Loading thumbnail…

Smiley Face Part II

A smiling face rendered as an SVG combines React components with D3’s `arc` generator to draw a mouth and hair. The face uses ellipses, circles, and paths for eyes, teeth, and a hat, with a Gaussian blur filter applied via SVG `<defs>`. Coordinates are centered on a 960×500 viewport, and D3 v5 and React 16.9 manage the declarative layout.

Aug 25, 2019

Loading thumbnail…

Smiley Face Part II

This example shows a smiley face constructed entirely from circles, with facial features arranged in a familiar pattern. The visualization is built using React to manage the component structure and D3.js v5 for its utility functions. The overall scene is rendered as SVG elements, with the main face, eyes, and mouth drawn using circle tags. The code demonstrates a straightforward composition of basic geometric shapes rather than complex data mapping, focusing on the integration of React’s declarative UI with D3’s capabilities in a single-page application.

Aug 25, 2019