gonghewan

@gonghewan·6 public vizzes

空教室查询

This example is an interactive web tool for querying empty classrooms at a university. It displays a form where users select a semester, week range, campus, and building to filter available rooms. The interface uses chained dropdown menus that update via AJAX calls to server endpoints like `/kjscx/querykclistbyxnxq` and `/kjscx/queryJxlListBySjid`, populated with JSON data. Results are rendered as a table, with validation requiring a semester and week selection before submission.

Jan 18, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can respond to browser window resizing by redrawing an SVG to match its container’s updated dimensions. It shows a green X spanning the full width and height of the viewport, with thick, semi-transparent strokes. The code uses `d3.select` to create an SVG element and a `redraw()` function that reads `clientWidth` and `clientHeight` from the chart’s `<div>`, then sets the SVG’s `width` and `height` attributes accordingly. A `window.addEventListener("resize", redraw)` triggers the redraw on every resize event, while `selection.enter().merge()` updates the two `<line>` elements’ coordinates.

Jan 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates fundamental D3.js DOM manipulation and SVG rendering. The face is built using D3 selections to append circles, rectangles, and an arc-generated mouth path onto an SVG canvas. Eyebrow animation is achieved through chained `transition().duration()` calls that shift the eyebrow group's transform attribute up and down over two-second intervals. The code imports `select` and `arc` from the D3 v5 library, with fixed pixel values controlling facial feature positions and dimensions.

Jan 17, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page set up for D3 visualizations. The page includes an empty body element and loads the D3 v5 library via a CDN script tag. It demonstrates the foundational structure needed to begin building interactive data visualizations, with the document title set to “HTML Starter.” The code uses standard HTML boilerplate along with the d3.v5 JavaScript library.

Jan 16, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and a path. It demonstrates basic SVG attributes like `cx`, `cy`, `r`, `x`, `y`, and `transform` for scaling and translating groups, while CSS classes control stroke properties such as width, color, line join, and line cap. The code uses inline `fill` attributes with named colors, hex codes, and a group-level fill with an overriding black stroke. No JavaScript libraries are used; rendering relies solely on SVG elements and the linked stylesheet.

Jan 16, 2020

Loading thumbnail…

Cars Report

This example shows a simple text-based report of used cars, listing each vehicle’s year, make, model, and price after a simulated two-second loading delay. The page displays a static “Loading...” message until a JavaScript Promise resolves with an in-memory JSON array of five cars. The code uses ES6 modules for exporting and importing functions, with `Array.filter` and `Array.map` to select cars under a price threshold and format them into a readable string. The final output is rendered into an HTML `<pre>` element via the DOM API.

Jan 13, 2020