Vikas Pathak

@vikaskpathak·6 public vizzes

Line Chart with Multiple Lines

This visualization displays a bar chart of population data for eight countries, using horizontal bars to compare values. The chart encodes population on a linear scale along the x-axis and country names on a categorical band scale along the y-axis. Built with D3 v5, it loads data from a CSV file, parses the population column as numbers, and renders SVG rectangles via `scaleLinear` and `scaleBand`. A color legend from a separate module is also included, though the chart itself does not implement multiple lines as its title suggests.

Apr 5, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This example shows animated multi-line charts tracking COVID-19 confirmed cases over time for several countries, with colored lines that progressively extend as the day counter advances. A legend and axis labels accompany the visualization. The code uses d3.nest() to group data by country, d3.line() with curveBasis for smooth paths, and d3.scaleLinear for x/y axes. Circle markers and text labels display the latest value of each line. Data comes from CSV files processed through a custom loadAndProcessData function.

Apr 4, 2020

Loading thumbnail…

D3 Course 1: Bar Chart

This bar chart displays the population of ten countries, using horizontal bars sorted alphabetically by country name. The visualization is built with D3 v5, loading data from a CSV file and rendering it as SVG. It uses `d3.scaleLinear` and `d3.scaleBand` for positioning, `d3.axisLeft` and `d3.axisBottom` for axes, and `d3.format` to abbreviate large numbers (e.g., converting billions to “B”). The chart includes a title, axis label, and grid lines, with a margin convention applied to the SVG layout.

Apr 4, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible HTML page, rendering the text "Hello HTML" centered on a white background using plain HTML and CSS. The code defines a single `<div>` body containing static text, styled with a large 13em font size and text-align center. It shows the fundamental structure of an HTML document with a `<head>` section for metadata and a `<body>` for content, requiring no JavaScript libraries or external data. The page serves as a minimal starting point for understanding basic web output.

Apr 4, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in the center of a page at a very large font size. It demonstrates the minimal structure of an HTML document, using a `<style>` block to set the body’s `text-align`, `font-size`, and the `<title>` tag for the browser tab. The code relies solely on standard HTML and CSS, with no external libraries or frameworks, serving as a bare-bones starting point for web-based visualizations.

Apr 4, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the minimal setup for rendering content in a web browser using plain HTML and CSS. It displays the text “Hello HTML” centered on the page with a very large font size, achieved through inline CSS styling in the `<style>` tag. The code uses no external libraries or JavaScript, relying solely on standard HTML elements and CSS properties to define the visual output, serving as a bare-bones starting point for web-based visualizations.

Apr 4, 2020