alibabagalaxy

@alibabagalaxy·8 public vizzes

Make a Bar Chart

This example displays a horizontal bar chart of population counts for ten countries, using a CSV dataset. The visualization maps population to bar width and country names to row position via D3’s `scaleLinear` and `scaleBand`, with margins and axes generated by `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG `rect` elements, colored steelblue, and the chart updates through a data join after parsing numeric values from the CSV file.

Nov 12, 2020

Loading thumbnail…

Make a Face

A yellow circle face with eyes, eyebrows, and a mouth is drawn using D3 v5 SVG primitives. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows downward and back upward over two seconds. All shapes are positioned relative to the SVG center via a translated group, with the mouth rendered as an arc path. The visualization demonstrates basic shape composition and chained transitions.

Nov 12, 2020

Loading thumbnail…

Shapes with SVF and CSS

This example demonstrates how to construct and style basic geometric shapes using inline SVG and CSS. It shows circles, rectangles, a line, and a path, with styles applied both directly via presentation attributes and through an external stylesheet using class selectors. The SVG elements are grouped with `transform` attributes for scaling and translation, while the CSS defines properties like `stroke`, `stroke-width`, and `stroke-linejoin` for the line and path elements. The visualization relies on the SVG rendering built into modern browsers, with no additional JavaScript libraries.

Nov 11, 2020

Loading thumbnail…

HTML CARS REPORT

This example shows a simple HTML cars report listing three used vehicles with their model years and prices, using a “Cars Report” heading and unformatted bullet points. It demonstrates basic DOM styling through a linked `styles.css` file, which applies a monospace font, large body text, and a red highlight class to the first list item. The page relies on vanilla HTML markup and static CSS rules, with no JavaScript or external libraries, so rendering is purely via the browser’s default HTML parser and CSS engine.

Nov 11, 2020

Loading thumbnail…

Cars Report

This example displays a filtered report of cars priced under $20,000, formatted as a plain-text list in a large-font `<pre>` element. It uses JavaScript array methods (`filter`, `map`, `join`) within a custom `generateReport` function, with car data imported from a JSON string and formatting handled by `formatCar`. The HTML page renders the generated text via `document.getElementById`, relying on a bundled script for execution.

Nov 11, 2020

Loading thumbnail…

Cars Report

This example presents a “Cars Report” visualization built with the React framework and D3.js. It uses D3’s `select` function to target a DOM element with the ID `message` and set its text content to “Hello World!”, demonstrating a minimal integration of D3 for DOM manipulation within a React-based single-file app. The bundled JavaScript (`bund.js`) is generated by Rollup, and the data source is not visible in the code; it shows a simple, text-only output rather than an interactive chart or data-driven graphic.

Nov 11, 2020

Loading thumbnail…

React Starter

This example renders the text “Hello React!” at a massive 13em font size, centered on the page. It uses React 16.13.1 with ReactDOM to mount a functional component into a `#root` element. The component returns a single div with a CSS class, demonstrating a minimal React setup with production builds from unpkg. The styling is defined in inline CSS within the HTML head, and the app is compiled into a separate `bundle.js` file.

Nov 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the large text “Hello HTML” centered in the browser window. The page also logs “Hello JavaScript!” to the browser’s developer console. It uses plain CSS for text alignment and font sizing, and a standard `<script>` tag for the console output. The code demonstrates the fundamental structure of an HTML document with embedded styling and scripting, serving as a basic template for web-based visualizations.

Nov 11, 2020