Rajneesh Kumar

@Phusun·4 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of country populations from a CSV file, with bars sized using d3.scaleLinear and positioned with d3.scaleBand. The SVG rendering is driven by d3.csv loading and parsing the data, converting population strings to numbers, then appending rectangles. The code relies on D3 v5’s select, csv, scaleLinear, max, and scaleBand APIs to build the chart without axes or labels, as the stylesheet defines no text elements.

Aug 4, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be defined and styled using CSS. It shows circles, rectangles, lines, and paths, with some shapes using inline `fill` and `stroke` attributes and others inheriting styles from CSS classes. A group element applies a `translate` transform and sets default `fill` and `stroke` properties, while the CSS rule for the `.lines` class specifies stroke width and color for the line and path elements. The rendering relies entirely on SVG markup, CSS, and transforms.

Aug 3, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be styled and combined within an SVG scene using both inline attributes and external CSS. The code relies on raw SVG elements and CSS rules to control fill colors, strokes, stroke-widths, and line joins, with transform groups repositioning and scaling the shapes. A light-blue group applies a shared fill and black stroke, while a second group uses the `.lines` class to render dark teal strokes with rounded corners. The rendering is entirely SVG-based, with the page automatically scaling the entire graphic by a factor of 1.6.

Aug 3, 2019

Loading thumbnail…

Cars Report

This example displays a static message, “What's going on?”, in large styled text on a dark blue background. It shows how VizHub combines multiple ES6 modules, including a separate `cars.js` file that exports parsed JSON data about used cars. The page renders using plain HTML and the `textContent` API to update a `<pre>` element, while styles.css applies the Ubuntu font and color scheme. The visualization itself does not yet use any charting or data-driven graphics libraries.

Aug 2, 2019