JS practice

100%

✓ Published0🌍 Public

Last edited Aug 30, 2023

Created on Aug 30, 2023

This example demonstrates the use of JavaScript and D3.js to create an SVG-based visualization, rendering a black rectangle within a 960x500 pixel canvas. The code loads D3 via UNPKG and uses the `select` function to set the text content of a message div, while also importing a local ES6 module. It combines direct SVG manipulation through the Document API with D3’s utility functions.

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…

svg path practice

This example demonstrates how D3 version 5 can load data and set text content within an HTML page using the `select` function. The code imports both the D3 library and a local ES6 module, `message.js`, to display the message "Hello VizHub world!" inside a designated div element. It also includes a minimal SVG container and basic CSS styling for large centered text. The example serves as a practice exercise for working with D3 selections and SVG structure.

SShahin Alam

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle and a rectangle—hand-coded directly in an HTML document, with D3.js v5 loaded for broader data-driven visualization capabilities. The page also showcases ES6 module imports, including a custom `myMessage.js` module that exports a string, and uses D3’s `select` API to update a designated div’s text. Rendering relies entirely on SVG markup within the browser, with minimal styling applied via a separate CSS file. The code serves as a foundational template for integrating D3 with modular JavaScript.

DDjedjeX

80% match

Loading thumbnail…

practice

This example creates a simple bar chart with D3.js v6, rendering a single black rectangle onto an SVG canvas. The chart positions the rectangle at a fixed x-coordinate of 10 and y-coordinate of 20, with a width of 10 pixels and a height of 300 pixels. The code uses D3's `select` function to append the SVG element to the document body, and sets the SVG dimensions to match the browser window’s width and height. The visualization serves as a minimal practice exercise, demonstrating basic SVG shape creation and attribute manipulation without any data binding.

Cchiiii-beginner

79% match

Loading thumbnail…

JS in HTML

This example demonstrates a minimal HTML page that combines CSS, JavaScript, and D3 v7. It displays a large centered text message, “Hello SVG!”, styled via a `.message` class. The page loads D3 from a CDN and runs `index.js`, which logs a string concatenated with a value imported from `sth.js`. The rendering uses plain HTML and CSS, with no SVG elements actively rendered, as the provided SVG circle is commented out.

PPeiyang Li

79% match

Loading thumbnail…

D3 Test

This example displays a simple SVG canvas with a single text message reading “Edit the code below to change me!” positioned near the top-left of a 960-by-500 pixel frame. The code uses d3.select to append an SVG element to the body, then chains an svg.append operation to create the text node. Styling is applied directly via .style attributes for font size and family. The script relies on D3 v4, loaded from the d3js.org CDN, and serves as a minimal starting point for interactive visualization development.

IIzaskunLS

79% match

Loading thumbnail…

welcome to D3Js

This example demonstrates a minimal D3.js setup within a React framework, rendering a single red SVG rectangle as the main visual output. The code uses D3’s `select` function to grab the SVG element and apply a red background style, while also appending a paragraph with the text “hey” to the page body. The SVG is 400 by 200 pixels, generated via HTML, and all D3 operations are executed through the `bundle.js` script. The visualization serves as a basic introduction to integrating D3 with React and SVG rendering.

MManikyapavan

78% match

Loading thumbnail…

Practice of D3

This example displays a static green rectangle on an SVG canvas, positioned at coordinates (380, 20) with dimensions 200 by 100 pixels. The visualization loads Amazon Best Selling Books data from a CSV file using D3’s `csv` function, though the data is only logged to the console and not visualized. The SVG is created with `d3.select('body').append('svg')`, using a fixed width of 960 and height of 500, while the script also imports React but does not use it in the rendering process.

RRyanYun0017

78% match

Loading thumbnail…

D3.js!

This example presents a blank SVG canvas with dimensions of 960 by 500 pixels, created to demonstrate a basic D3.js setup. The visualization renders nothing visible, as the code selects the `svg` element using `d3.select` but does not draw any marks. It loads data through the `d3.csv` import and relies on D3 v5.9.2, all within a minimal HTML page that links external styles and a bundled script. The rendering is purely SVG-based, with no additional graphical output shown.

SSerjoA

78% match