myoung1032

@myoung1032·8 public vizzes

Fork of La Ola Group

This network graph maps the conceptual relationships between calculus topics, such as derivatives, integrals, and function properties. The visualization employs a force-directed layout, using D3's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` APIs to position nodes. The graph is rendered as SVG circles and connecting lines, with node sizes and colors indicating hierarchy, from main concepts to child topics and leaf details. The data structure, defined in `data.js`, establishes a network where the largest node represents the core topic of "平均变化率" (average rate of change).

Feb 17, 2023

Loading thumbnail…

graph2

A force-directed graph displays the network of connections within an organization, featuring main nodes for departments like Coordinacion, Comercial, Area Tecnica, Finanzas, and IT, with smaller child and leaf nodes for sub-teams. Node size encodes hierarchy, while color groups related entities. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position elements, and renders as SVG circles, lines, and text labels. Data is generated programmatically in data.js, with colors defined in colors.js.

Feb 17, 2023

Loading thumbnail…

Graph

A network graph displays an organizational chart for the Kenneth Rainin Foundation, with colored circular nodes representing departments like Coordinacion, Comercial, and IT, connected by colored links. Node size indicates hierarchy, from large main nodes to small leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position elements. Users can drag nodes via d3.drag, which updates their fixed positions and restarts the simulation. Data is defined in external JavaScript modules, with colors sourced from Paletton.

Feb 17, 2023

Loading thumbnail…

Fork of China City Basemap

This example visualizes a basemap of Chinese cities, using a Mercator projection centered on China to render province and city boundaries as SVG paths. The map displays the geographic outlines in a muted blue with subtle black strokes. The code uses `d3.geoMercator`, `d3.geoPath`, and TopoJSON's `feature` method to convert TopoJSON data into GeoJSON for rendering. The basemap data is loaded remotely from a GitHub gist, and each feature is styled via a CSS class.

Jun 6, 2021

Loading thumbnail…

Let's make a face with a d3.js

A smiling face composed of SVG shapes is drawn with d3.js, featuring a yellow circular head, eyes, eyebrows, and a curved mouth. The eyebrows animate upward and back down using `transition.attr` on a `<g>` element. The code builds the face with d3 selections, `arc()` for the mouth path, and explicitly positioned ellipses and circles for the eyes, all rendered in an SVG canvas.

Jun 6, 2021

Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Jun 6, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal interactive web page that displays the text "Hello HTML" alongside a static SVG circle. The page uses plain CSS to center and scale the text, and an SVG `<circle>` element for the graphic. JavaScript is included via an inline script that logs "Hello JavaScript!" to the browser’s developer console. The example relies on native HTML, CSS, and SVG APIs, with no external libraries or data sources.

Jun 4, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal setup for building data visualizations with D3.js and ES6 modules in the VizHub environment. It displays the text "Hello World" in a large font using the `textContent` property directly on a DOM element, without invoking any D3 selection methods. The page loads D3 v5 from UNPKG and includes local modules for importing strings, though the active code does not use these imports. The visualization highlights how to structure files and dependencies for a simple interactive canvas.

Jun 3, 2021