yesyesnono01@yahoo.com

@codemamadg·9 public vizzes

vs_q3

This example displays a blank SVG canvas with placeholder axes prepared for a time-series bar chart. It uses D3 v4 to define margins, padding, and scales for time and linear values, then appends an SVG group structure with `d3.select`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The code loads data from a CSV via `d3.dsv`, but the data-fetching and bar-drawing logic remains unimplemented, leaving only the scaffolded visualization framework visible. The rendering is entirely SVG-based, with hardcoded dimensions of 960 by 500 pixels.

Jan 22, 2024

Loading thumbnail…

vs1

This example shows a simple vertical bar chart of three labeled values using D3 v4. The code creates an SVG with scales for the x and y axes, then draws steelblue rectangles for each data point. It uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numeric axis, with `d3.axisBottom` and `d3.axisLeft` to render the tick marks. The chart is embedded in a React project but works as a standalone HTML page with static data.

Jan 22, 2024

Loading thumbnail…

vs_bar_chart

This chart shows a minimalist horizontal bar chart comparing values for categories A, B, C, and D, with the first bar highlighted in blue and outlined in black. The chart is rendered as an SVG using specific rectangular coordinates for each bar and text elements for the labels. The code sets the bar widths directly, appears to use the Share Tech font loaded from Google Fonts, and relies on raw SVG elements rather than a charting library.

Jan 22, 2024

Loading thumbnail…

svg3

This example demonstrates fundamental SVG shape construction using raw SVG elements within an HTML document. The page displays overlapping red and green circles, a navy diagonal line, a custom path forming a horizontal capsule shape, and a black polyline path with a right-angle turn. The SVG canvas is set to 960 by 500 pixels with hidden page overflow. The code uses literal SVG tags such as `<circle>`, `<line>`, and `<path>`, with explicit coordinate and styling attributes, including fill colors, stroke colors, and stroke widths. A commented-out rectangle shows an alternative shape configuration without rendering it.

Jan 22, 2024

Loading thumbnail…

vs2

This example demonstrates a minimal interactive SVG scene featuring a single red rectangle with a thick black stroke. On hover, CSS transitions animate the fill to green and the stroke width from 20 pixels to 100 pixels over three seconds. The rendering is achieved through a raw SVG element embedded directly in the HTML, with styling rules applied to the `rect` element. The `transition` CSS property controls the smooth color and stroke changes, while the `:hover` pseudo-class triggers the state modifications.

Jan 22, 2024

Loading thumbnail…

vs2

This example demonstrates the simplest possible VizHub V3 Runtime Environment setup, rendering a static "Hello World!" message directly into a container DIV using vanilla JavaScript. The main function exports from `index.js` and sets the container's inner HTML with inline styling, including a large 212-pixel font size. No external libraries are used, and the code relies entirely on the V3 Runtime's hot-reloading capability triggered by the absence of an `index.html` file. The example serves as a foundational starting point for interactive data visualization development.

Jan 22, 2024

Loading thumbnail…

s_test1

This example demonstrates the minimal setup required for a VizHub V3 visualization, acting as a blank canvas with no visible output. It highlights the runtime environment’s core structure: an `index.js` file must export a `main` function that receives a `container` DIV, and there is no `index.html` to trigger the V3 runtime. The code shows only raw HTML tags within the JavaScript file, without any rendering libraries or data operations. It serves as a starting template for understanding the expected module pattern and hot-reloading interactions in the VizHub environment.

Jan 22, 2024

Loading thumbnail…

vs_test1

This example demonstrates a minimal SVG scene rendered inside the VizHub V3 runtime, using the `main` function exported from `index.js` to append content to a provided container DIV. It relies on the runtime’s hot-reloading environment, triggered by the absence of an `index.html`, and draws static SVG elements directly via the DOM API without external libraries. The visualization shows raw HTML-like SVG source code as a starting template, illustrating the fundamental setup for interactive widget development without any data or animation logic.

Jan 22, 2024

Loading thumbnail…

VS_SVG_learn

This example demonstrates a simple static HTML page that renders a large, centered text message reading “Hello HTML!” using CSS styling and JavaScript integration. The page consists of a single `<div>` element with a font-size of 13em, displaying the greeting via plain HTML markup. The code uses basic CSS for text alignment and sizing, with no external libraries or data sources involved. It serves as a minimal starter template for understanding the relationship between HTML, CSS, and JavaScript in a web environment.

Dec 27, 2023