Skip to main content
Log in
V

Vijay

@vijhhh2·11 public vizzes

Loading thumbnail…

Hello VizHub

This bar chart displays the top 10 most populous countries, with population values read from a CSV file and multiplied by 1000. The visualization uses D3 v5 with an SVG rendering approach. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and both `d3.axisLeft` and `d3.axisBottom` for ticks. The x-axis tick labels are formatted using `d3.format` with a custom replacement of 'G' with 'B' for billions.

Oct 3, 2019
Loading thumbnail…

Hello VizHub

This bar chart displays the top 10 most populous countries, with population values read from a CSV file and multiplied by 1000. The visualization uses D3 v5 with an SVG rendering approach. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and both `d3.axisLeft` and `d3.axisBottom` for ticks. The x-axis tick labels are formatted using `d3.format` with a custom replacement of 'G' with 'B' for billions.

Oct 3, 2019
Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries as a horizontal bar chart, using population values loaded from a CSV file. The axes are heavily customized: the y-axis removes its domain line and tick marks, while the x-axis applies a custom tick format that abbreviates numbers (e.g., converting billions to "B") and draws full-width grid lines. Both axes and the chart title use large sans-serif fonts with muted gray fills. The code relies on D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`.

Oct 3, 2019
Loading thumbnail…

Hello VizHub

This bar chart displays the populations of the ten most populous countries, with horizontal bars representing each nation’s total population in thousands. The visualization loads data from a CSV file using `d3.csv`, scales the values linearly with `scaleLinear` for the x-axis and uses `scaleBand` for the categorical y-axis. It renders SVG rectangles and axes via `axisLeft` and `axisBottom`, with styling applied through external CSS.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

A cheerful robot face rendered in SVG responds to interaction with an animated eyebrow raise and mouth movement. The example demonstrates fundamental D3.js v5 techniques, including shape generation with the `arc()` function, dynamic attribute updates via `transition()`, and group transformations for positioning facial features. A yellow circle serves as the head, with eyes, eyebrows, and a mouth built from primitive SVG elements. The animation cycles over two seconds, first lifting the eyebrows and then shifting the mouth from a smile to an open shape.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

A bright yellow smiley face rendered in SVG with D3.js v5. The visualization uses D3's `select`, `append`, and `attr` methods to construct circles for the face and eyes within a centered group. A D3 `arc` generates the mouth path, while the SVG canvas is sized from the markup. The styling relies on an external Google Fonts import via CSS.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

A yellow circle with a simple face—two black-outlined eyes—is centered in an SVG canvas. Built with D3 v5, the code uses `d3.select` and `d3.append` to create circular and group elements, with `attr` calls positioning the eyes via fixed pixel offsets. The visualization demonstrates basic SVG rendering and DOM manipulation within the VizHub framework, using the provided `styles.css` for font styling.

Oct 2, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization: a solid yellow circle with a black outline centered on an SVG canvas. The circle fills the full height of the 960x500 pixel viewport, positioned via a translated group element. The code imports the `select` and `arc` functions from D3 v5, though only `select` is used to manipulate the SVG. Rendering is done entirely with SVG primitives, with styling defined in an external CSS file that imports the Ubuntu font and sets the page background. The visualization serves as a basic template for testing VizHub’s editing environment.

Oct 2, 2019