Skip to main content
SimilarExport ZIP
100%

Using Images in VizHub (broken)

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 3, 2020
Created on Feb 29, 2020

This example attempts to display an SVG animation by loading it into an HTML page via an `<img>` tag, but the animation fails to run in VizHub. The SVG uses SMIL animation, specifically `animateMotion` with an `<mpath>` element, to move satellites along an orbit path around a planet. The visualization also incorporates SVG filters like `feGaussianBlur` and `feTurbulence` for atmosphere and cloud effects. The code imports `select` from d3 and defines data and color modules, though the main focus is the broken image rendering, as noted in the README.

AI-generated description

A reproduction case for the idea of including images.

A SMIL animation - the 3rd type of SVG animation possibility compared to JS or CSS animation.

Doesn't seem to work here, although it does in a separate file:

  • Try loading the SMIL_Satellite.svg file separately in a browser - that works.
MIT Licensed

Similar vizzes

Loading thumbnail…

Mysterious VizHub Error Debug Helper

This example demonstrates a minimal SVG visualization scaffold that renders an empty chart area using D3 v5. The code imports core D3 modules including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, then initializes an SVG canvas with fixed dimensions. A `render` function is defined but contains commented-out attempts at creating color scales, band scales, and SVG rectangles, with the actual rendering logic disabled. The visualization only calls `render` with an array of three numbers, resulting in no visible output on the page.

Llemonyunyun
71% match
Loading thumbnail…

Fork of Hello VizHub

The example displays a simple, animated face made of SVG shapes: a yellow circle for the head, two eyes, and a mouth drawn with an arc path. The eyebrows animate by smoothly translating up and down over a few seconds. It demonstrates how to load D3 v5 from a CDN and use its `select` and `arc` API functions, alongside importing a local ES6 module. The text "Hello VizHub!" appears below the graphic, styled via an external CSS file.

HHalvorte
70% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to create a simple SVG visualization using D3.js within the VizHub environment. The code imports the `select` function from the D3 library and applies it to the page’s `svg` element, setting its background color to red. The accompanying HTML loads D3 v5.9.1 from a CDN and defines an empty 560×960 SVG canvas, while the CSS styles the page background, text, and font using the Ubuntu typeface from Google Fonts. The result is a minimal, static visual with no data processing or interactive elements.

Aashish2054
70% match
Loading thumbnail…

vizhub

This example demonstrates the fundamental building blocks of SVG graphics and D3.js integration within the VizHub environment. It displays basic geometric shapes—circles, rectangles, and a line—positioned on a 960×500 canvas, with some shapes colored explicitly and others inheriting styles from parent groups via the `transform` attribute. The code imports D3’s `select` function from the D3 v5 library loaded via UNPKG, alongside a local ES6 module, `myMessage.js`, which provides a greeting string. A separate script uses `select` to set the text of a `#message` div element, showing how D3 can manipulate DOM content beyond SVG. The rendering is done entirely through inline SVG markup in `index.html`, with styles defined in `styles.css`.

PPhilipe Allan Almeida
70% match
Loading thumbnail…

Mysterious VizHub Error Debug Helper

This example demonstrates a debugging helper for the VizHub platform, presenting a blank SVG canvas that prepares to render data from an array of three values. The code imports D3 v5 functions including `select`, `scaleBand`, and `axisBottom`, though the commented-out sections reveal planned bar chart features that are not active. The visualization currently renders an empty 960x500 SVG element, with the main rendering function structured to accept CSV data but left incomplete. The helper highlights common D3 patterns like margin conventions and scale setup while serving as a starting template for error troubleshooting.

GGray1011
69% match
Loading thumbnail…

VizHub Images

This example showcases a gallery of thumbnail images generated from VizHub examples, displayed in a grid layout. It uses the D3 library, specifically `d3.select` and `d3.range`, to create and arrange SVG elements for each image. The visualization reads image URLs from the README metadata and renders them as embedded `<image>` elements, providing a visual index of attached files. The code also includes a counter to display the total number of images in the collection.

CCurran Kelleher
69% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek
69% match
Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

FFloridaPlates
68% match