MuhriddinMahmudjonovich

@MuhriddinMahmudjonovich·8 public vizzes

Fork of Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page at a large font size. It demonstrates the basics of building a D3.js v5 visualization with VizHub, using the `import` statement to load both the D3 `select` function and a local ES6 module (`myMessage.js`). The HTML links a local stylesheet and loads D3 from UNPKG, while the JavaScript selects the `#message` div and sets its text content. The visualization is static, with no data source or dynamic rendering.

Oct 13, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects are structured, showing a simple web page that displays the text “Hello VizHub!” in large centered type. The visualization uses D3.js v5, loaded via UNPKG, to select the `#message` div and set its text content. The project also illustrates ES6 module imports, both from the D3 library (`import { select } from 'd3'`) and from a local module (`./myMessage`), which exports the displayed message string. A separate CSS file styles the message with a 12em font size.

Oct 13, 2022

Loading thumbnail…

Fork of Moon Calendar 2022

This visualization displays the moon’s phase for every day of the year 2022 in a calendar grid, with months on the y-axis and days on the x-axis. Each moon glyph is drawn using `d3.geoOrthographic` and `d3.geoPath` to project a circle based on the phase angle, calculated from a simple lunar period formula. The SVG renders a dark circle with a light path overlay to represent the illuminated portion. Clicking the graphic triggers an animated red ring that expands and fades to highlight the current day.

Oct 6, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-screen smiley face rendered as a yellow circle with black outlines, two eyes, and a mouth, centered on the viewport. The face is built entirely with React and SVG elements, using `circle` components for the head and eyes, while a D3 `arc` is imported to construct the mouth’s curved path. The head’s radius dynamically responds to the window’s height, and the layout positions the eyes with fixed offsets, with all coordinates computed from the center of the screen.

Oct 6, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a yellow emoji-like face with two eyes and a curved mouth as an SVG graphic. The face is drawn using D3's `arc` generator to create the mouth path, while the head and eyes are simple SVG circles. The `arc` function defines the mouth’s inner and outer radii and angular range, producing a smile shape. The entire face group is translated to the center of a 960x500 viewport. React manages the component structure, with D3 loaded via a UMD script and used for the arc geometry calculation.

Oct 6, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple face composed of SVG circles: a large red circle with a black stroke for the head and two smaller black circles for eyes. It demonstrates integrating React with D3 v7, using React to render SVG elements and JSX curly braces to compute coordinates. The app loads React and D3 from unpkg CDN scripts and renders into a root div, with CSS resetting the body margin for a clean fullscreen display.

Oct 6, 2022

Loading thumbnail…

Fork of map exemple

This choropleth displays global population estimates, with each country filled using a dark red gradient that intensifies for higher population counts. The visualization loads country borders and demographic data from the world-atlas TopoJSON and TSV files, then renders them as SVG paths via d3.geoPath with a Mercator projection. Interactive zooming is enabled through d3.zoom, and hovering over a country turns it purple while a tooltip reveals its name.

Oct 6, 2022

Loading thumbnail…

Fork of Xayir VizHub

This example demonstrates the basic capabilities of VizHub by displaying a centered text message that reads “Xayir VizHub!” in a large font. It shows how to set up an HTML page with D3.js loaded via UNPKG, and how to import the `select` function from D3 to manipulate the DOM. The code also utilizes a local ES6 module named `myMessage` to provide the message content. The visualization primarily serves as a template for structuring a simple D3 project.

Oct 6, 2022