Monisha Gopinath

@moni27us·7 public vizzes

Lets make a face with d3.js

Two playful SVG faces are rendered side by side: one is drawn directly in the HTML markup, while the other is generated by JavaScript. The D3 v5 library is loaded via UNPKG and used to select and style a paragraph element with `d3.select("p")`. The page also demonstrates local ES6 modules by importing a message from `myMessage.js`, though the visible output focuses on the static circles and minimal interactive styling.

Sep 17, 2021

Loading thumbnail…

Lets make a face with d3.js

This example shows a simple yellow face constructed entirely with SVG shapes, using D3.js to generate a circular head, two eyes, and an arc-based mouth centered on the canvas. The code imports `select` and `arc` from the d3 module, manipulates SVG attributes directly, and positions elements based on the viewport height and width. The mouth uses the `arc` generator with specified inner and outer radii and angular ranges, while circles are appended for the face and eyes. The example demonstrates basic D3 selection, attribute setting, and generator usage without any data binding.

Sep 17, 2021

Loading thumbnail…

Lets make a face with d3.js

This example assembles a simple face from geometric shapes, using D3 v5 to manipulate SVG elements. It shows how to load D3 through UNPKG and use ES6 module imports, including a local module that exports a greeting message displayed via the `message` variable. The code imports `d3` and applies basic selections and style attributes to draw features. The project demonstrates modular JavaScript and SVG rendering for a playful, character-based visualization.

Sep 17, 2021

Loading thumbnail…

D3js

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript, rendered at a very large font size. It displays the static text "Hello HTML" centered on the page, while the included script logs the message "Hello JavaScript!" to the browser’s developer console. The page uses a simple CSS style block for centering and font sizing, and a plain JavaScript console.log call for the runtime output. No external libraries or data sources are involved.

Sep 16, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic syntax and modular workflow of VizHub, showing how to combine D3.js with local ES6 modules to produce a simple text output. The code imports the `select` function from D3 and a `message` string from a local module, then uses `select('#message').text()` to render "Hello VizHub!" in the browser. D3 v5 loads via UNPKG, and styling comes from a CSS file.

Sep 12, 2021

Loading thumbnail…

D3start

This example displays a large, centered circle in an SVG container with the text “Hello D3 version 6” rendered in the page body. It demonstrates the basic setup for a D3 v7 project, using `d3.select` from the imported `d3` module to target the body element and set its text content. The HTML includes a static SVG with a circle element, while the JavaScript initializes D3’s selection API. The circle’s radius is fixed at 400, with no dynamic data binding or interaction, serving purely as a starting point for building more complex visualizations.

Sep 12, 2021

Loading thumbnail…

Fork of Hello D3 Version 6

This example shows a single car make, “Honda,” displayed in large text on a web page. It demonstrates a minimal D3 version 6 setup by importing car data from a JavaScript module and updating the DOM. The code uses `d3.v6` from a CDN, a JSON string parsed with `JSON.parse` within `cars.js`, and `document.getElementById` to set the text content of a `<pre>` element. No charts or visual encodings are present; the focus is on basic data import and rendering.

May 8, 2021