Skip to main content
Log in
G

ghsueh01

@ghsueh01·6 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from an SVG circle. Using the `select`, `append`, and `attr` methods from d3-selection, it sets the circle’s radius to half the SVG height and centers it via the `cx` and `cy` attributes. The code reads the SVG’s `height` and `width` attributes directly from the DOM, and runs against d3.v5 in a minimal HTML page with external styles defining the body margin and overflow. The face is static, with no interactive or animated features beyond the initial rendering.

Nov 6, 2019
Loading thumbnail…

Cars Reports

This example visualizes a dataset of car reports, showing relationships and clusters through an interactive force-directed network. The visualization uses D3’s `d3.forceSimulation` to position nodes and manage collision, while links are drawn as SVG lines. The code initializes a minimal HTML document with no additional styling or logic, meaning the actual rendering and data-loading behavior is not yet implemented in the provided files. The title and structure suggest a future chart, but the current state only displays an empty page with the page title “Cars Reports.”

Nov 5, 2019
Loading thumbnail…

Car Report

This example demonstrates a simple text-based car report rendered on a web page. It filters a hardcoded JSON array of car objects by price, formats each matching car into a single string, and displays the final report in a large font. The code uses the `JSON.parse` method to load the data, a custom `formatCar` function for string templating, and `Array.filter` and `Array.map` to process the cars. The report is output as plain text into a `<pre>` element via `document.getElementById`.

Oct 31, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub scaffolds a minimal D3.js visualization. It renders the text “Hello VizHub!” from an ES6 module into a styled HTML page. The code imports the `select` function from D3 v5 and uses it to set the text content of a `div` element. The page is styled with external CSS, including a Google Font, and loads D3 from a CDN.

Oct 31, 2019
Loading thumbnail…

Last Time I Swear Before I crush Something

This example demonstrates the simplest possible use of ES6 modules and DOM manipulation in VizHub. It imports a string message from one module and displays it as plain text in an HTML `<pre>` element using `document.getElementById` and `textContent`. The page applies a styled dark background and large Ubuntu font via CSS, while the code parses a static JSON snippet from another module but does not render it. No external visualization libraries are used.

Oct 30, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub scaffolds a minimal D3.js visualization. It renders the text “Hello VizHub!” from an ES6 module into a styled HTML page. The code imports the `select` function from D3 v5 and uses it to set the text content of a `div` element. The page is styled with external CSS, including a Google Font, and loads D3 from a CDN.

Oct 30, 2019