sanjaymirdha

@sanjaymirdha·5 public vizzes

Scatter Plot with Menus

This interactive scatter plot displays fuel economy data from a car dataset, allowing users to explore relationships between variables like horsepower, weight, and acceleration. The visualization features two dropdown menus that dynamically change which column is plotted on the x and y axes. The chart is rendered as an SVG using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with red semi-transparent circles for data points. A custom `dropdownMenu` module handles the menu interactions, triggering re-renders when selections change.

Sep 19, 2019

Loading thumbnail…

Untitled

A web page renders a large, centered greeting message against a dark navy background. The text is styled with the Ubuntu font family and appears in a light color at a very large font size. The example demonstrates basic HTML structure, CSS styling, and ES6 module functionality by importing a message string from a separate JavaScript module. The code uses a custom CSS rule set and an external Google Fonts stylesheet, with the message output displayed directly in the browser.

Sep 19, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a full-screen, browser-based text display that centers the message “Hello VizHub!” against a dark navy background. The visualization relies on an ES6 module (`myMessage.js`) to export the text string, which is then injected into the DOM via the `index.js` script and a bundled `bundle.js`. Styling is handled through CSS, importing the Ubuntu font from Google Fonts and defining the layout with a large 12em font size. The page structure is minimal, using a single `div` element within the HTML body.

Sep 19, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in bright white text against a dark blue background. It demonstrates basic VizHub project structure using separate ES6 modules for HTML, JavaScript, CSS, and a shared message constant. The code imports an Ubuntu font via CSS and uses the export statement in `myMessage.js` to share the message string with the main `index.js` file, which injects it into the page. The project relies on standard DOM manipulation and module bundling through VizHub's build system.

Sep 19, 2019

Loading thumbnail…

Hello VizHub

This example displays a single large “Hello VizHub!” message centered on a dark blue background. It uses the D3 `select` method to set the text content of a `<div>` element. The message string is imported from a local ES6 module, while an external Google Fonts stylesheet defines the typography and page styling.

Sep 19, 2019