Skip to main content
SimilarExport ZIP
100%

Project Main

✓ Published3🌍 Public
IIndira120
Last edited Sep 28, 2022
Created on Sep 28, 2022
Forked from Hello VizHub

This example demonstrates data visualization through multiple chart types, including a bubble map, circular packing, line chart, and rose chart, all embedded within a single web page. The project loads D3.js v5 via UNPKG and uses ES6 modules, such as `myMessage.js`, to display a title. D3's `select` function manipulates the DOM to set message text. The visualizations leverage D3's core APIs for creating and rendering various chart layouts, with styles defined in a separate CSS file.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

bubble chart activity 7

This example demonstrates a bubble chart rendered with D3.js, showing data points as circles with scaled radii. The visualization is built using D3 v5, loaded via UNPKG, and the code imports API functions like `select` to manipulate the DOM. It also showcases local ES6 module imports, with a separate message module controlling text in the page. The chart’s styling is handled through a linked CSS file. The core behavior is minimal, focusing on integrating D3 with modular JavaScript rather than interactive simulation.

LLakshmanRangisetti
77% match
Loading thumbnail…

d3

This example demonstrates the basic structure of a VizHub project, showing how D3.js can be imported and used to set the text of an HTML element. It loads D3 version 5 from UNPKG and uses the `select` API to update a message, alongside a local ES6 module for the message string. The visualization itself renders simple SVG shapes—a circle, rectangle, and line—with styling provided in CSS.

Ssimon-onebright
73% match
Loading thumbnail…

Assignment_Barchart

This example uses an ES6 module called `myMessage.js` to provide a text string, which is then rendered by D3’s `select` method into a `div` with the ID `message`. The page loads D3 v5 from a CDN via UNPKG, and demonstrates importing local modules and D3 API functions. The result is a full-screen, centered display of the text “Hello VizHub!” styled with a large font size via CSS.

Bbogasamudramvamsikrishnareddy
73% match
Loading thumbnail…

D3.js Tutorial Project

This example is a comprehensive D3.js tutorial project that demonstrates a progression of visualization techniques, from basic data binding to SVG drawing and animation. It includes a bar chart of country populations, scatter plots, line and area charts showing temperature data, and an animated face constructed with SVG shapes using `d3.arc` and transitions. The code uses D3 v5 with React, loading data from CSV and JSON sources, and renders visualizations through SVG elements with axis labels and styling.

OOskar Weinfurtner
72% match
Loading thumbnail…

Hello 1

This example demonstrates how to set up a VizHub project using D3.js, showing the capability to load D3 via UNPKG and import API functions such as `select`. The code also showcases the use of local ES6 modules by importing a `message` constant from `myMessage.js`. The visualization displays the text "Hello VizHub!" centered on the page with a large font size, as defined in the `styles.css` file.

AAsimali39
72% match
Loading thumbnail…

Activity7_Task4

This interactive example demonstrates D3's capability to update DOM content using ES6 module imports. It displays a message in a centered, large-font div using D3's select and text methods. The visualization loads D3 v5 from UNPKG and imports a custom message from a local ES6 module, showcasing how to combine external libraries with modular JavaScript code.

Vvineelaramulapalli32
72% match
Loading thumbnail…

Bubble Chart with d3.js

This example shows a bubble chart built with d3.v6, plotting five data points on x and y axes with bubble sizes encoding a third quantitative value. The chart renders as an SVG, using d3.scaleLinear to map data ranges for position and radius, and d3.axisBottom/axisLeft to draw labeled axes. It also demonstrates importing local ES6 modules and loading D3 via UNPKG in VizHub.

Aakshayvenishetty1437
72% match
Loading thumbnail…

React Starter

This example shows a circular bubble chart where hierarchical data is displayed as packed circles, with labels split across multiple lines and colored by group. The visualization uses d3.pack to compute the layout and D3’s selection API to join data to SVG circles, clip paths, and text elements. It incorporates React for the user interface and DOM.uid for unique identifiers, while datasets are loaded from a JSON file. Tooltips reveal each leaf’s title and formatted value.

SStefan Gerrits
72% match