100%

Article Starter

✓ Published1🌍 Public

Last edited Feb 20, 2024

Created on Feb 9, 2024

This example demonstrates how VizHub can be used to publish an article with embedded interactive visualizations. It shows four responsive charts—a scatter plot, bar chart, line chart, and axes—rendered via iframes that adapt to different screen sizes. The code uses the VizHub embed feature to integrate the visualizations, and the charts themselves are built with D3.js. The README file serves as the primary content, with the embedded vizzes illustrating the platform's capability for hosting and sharing data-driven articles.

AI-generated description

This is how you can use VizHub to publish an article!

Just delete all the code files except README.md.

You can use the VizHub Embed Feature to embed other vizzes in your article. For example, here's an example of embedded responsive visualizations:

Responsive Axes

Responsive Scatter Plot

Responsive Bar Chart

Responsive Line Chart

Challenge

Fork this article starter and embed your favorite responsive works

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization Project

This example presents a gallery of visualizations, beginning with an embedded Tableau public dashboard and including multiple iframes of D3-based charts such as bar, pie, scatter, tree, and 3D bar graphs hosted on VizHub. The page also references Google Colab and Figma-embedded screenshots. Built with React, the code uses standard HTML, CSS, and JavaScript to lay out these components, with the Tableau Viz API script loading the interactive dashboard and VizHub iframes displaying the individual charts.

Aav.dj.2000@gmail.com

73% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a simple interactive data visualization using the D3.js library within the VizHub environment. The page displays a message inside a div element, which is selected and populated using D3's `d3.select` and `.text` methods. The visualization is rendered in an HTML page that loads D3 v5 from a CDN and applies styling from an external CSS file. While the core code only shows a static text output, it serves as a foundational template for exploring D3's selection and manipulation APIs.

JJefferson Abreu

72% match

Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham

72% match

Loading thumbnail…

Hello VizHub

The example demonstrates a minimal D3.js visualization by rendering a short message inside a web page. It uses D3 v5, loaded via a CDN, alongside plain HTML and CSS to structure the document. The core behavior involves selecting the `#message` div and inserting text content, showing the basic data-binding and DOM manipulation workflow. The code relies on D3’s selection API to update the page, with no additional datasets or complex rendering. It serves as a straightforward template for building interactive visualizations within the VizHub environment.

Sshallowater

72% match

Loading thumbnail…

Hello VizHub

This example displays a simple visualization of sample data points positioned within a blank HTML page. It demonstrates the basic setup of a D3.js project by loading the library and creating an empty container for visual output. The code uses the D3 v5.9.1 library from a content delivery network and includes a single empty `<div>` element that could be populated with charts or custom graphics. The visualization relies on standard HTML structure and D3's JavaScript API for any potential rendering or data manipulation.

SSubit Timalsina

72% match

Loading thumbnail…

Hello VizHub

This example shows how VizHub lets users share and run interactive D3 code. It displays the text “Hello VizHub!” on a dark, styled page. The code uses the `select` function from d3.v5 to target a `<div>` and set its content from an imported ES6 module. The `styles.css` file applies a custom font and color scheme using external CSS.

Ddonalta

72% match

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular, browser-based data visualization projects. It renders a simple text message on a styled web page using a custom ES6 module and D3’s `select` function to update the DOM. The code includes an HTML entry point, a JavaScript bundle, and a CSS file with imported Google Fonts. The visualization relies on D3 v5 and shows the integration of external libraries and local JavaScript modules within a single VizHub project.

Sshawchand

72% match

Loading thumbnail…

Hello VizHub

A minimal example demonstrates the core capabilities of VizHub, showing how a web page can combine a local stylesheet, a D3 library loaded from a CDN, and imported ES6 modules. The visualization renders the text "Hello VizHub!" centered on the page using a large font. The code imports the `select` function from `d3` to target the `#message` div and set its text content from a separate local module. The example illustrates modular code organization and dependency management within a single project.

Aanduskong

71% match