Skip to main content
Log in
K

karthikLingeswaran

@karthikLingeswaran·7 public vizzes

Loading thumbnail…

d3.js

A horizontal bar chart displays population figures for ten countries, ordered from most to least populous. The visualization uses d3.v5 with SVG rendering, applying a linear scale for the population axis and a band scale for countries. It loads data from a CSV file, multiplies the population values by one thousand, and renders steel-blue rectangles. The chart includes left and bottom axes, with a margin-based layout within a 960 by 500 pixel viewport.

Jun 4, 2020
Loading thumbnail…

Let's make a face using D3.js

This example draws a large red circle as a face using D3.js v5, rendering to an SVG element. It loads country and length data from a CSV file, parsing the numeric Length values with a `d3.csv` call. The code uses `d3.scaleLinear` to establish an x-axis domain based on the maximum data value, while appending the circle with fixed pixel coordinates. Although the face itself is static, the visualization prepares to bind CSV rows to SVG rectangles, demonstrating a basic data-loading and scaling workflow.

Jun 4, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” centered on the screen at a very large font size. It uses plain HTML with embedded CSS to style the body with text alignment and a 13em font size. The page contains no JavaScript or external libraries, demonstrating the simplest possible structure for rendering static content in a browser. The styling is applied directly within a `<style>` tag in the document’s head.

Jun 4, 2020
Loading thumbnail…

Let's make a face using D3.js

This example draws a large red circle as a face using D3.js v5, rendering to an SVG element. It loads country and length data from a CSV file, parsing the numeric Length values with a `d3.csv` call. The code uses `d3.scaleLinear` to establish an x-axis domain based on the maximum data value, while appending the circle with fixed pixel coordinates. Although the face itself is static, the visualization prepares to bind CSV rows to SVG rectangles, demonstrating a basic data-loading and scaling workflow.

Jun 4, 2020
Loading thumbnail…

Cars Report

This example demonstrates a simple report that lists cars under a specified price, filtering a JSON dataset and formatting each entry as text. It uses React for rendering, though the display is handled primarily through DOM manipulation with `getElementById` and `textContent`. The code relies on ES6 modules (`import`/`export`), promises with `setTimeout` to simulate asynchronous data loading, and JavaScript array methods like `filter`, `map`, and `join` to generate the output. The final message appears in a large `<pre>` element styled via inline CSS.

Jun 4, 2020
Loading thumbnail…

Lets make a face!

This example demonstrates a playful face constructed entirely from SVG shapes, using D3.js v5 within a React framework. The visualization renders a simple, cartoonish face with eyes, a nose, and a mouth as separate geometric elements. The code initializes an SVG canvas and logs the D3 library to the console, though no data binding or interactive behavior is implemented. The face is static, relying on hardcoded coordinates and D3’s selection and append methods to build the SVG structure. The minimal setup highlights basic SVG manipulation with D3.

Jun 3, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser resizing by redrawing an SVG to fill the viewport. A green X-shaped pair of lines is rendered with thick, semi-transparent strokes, and its dimensions update dynamically whenever the window size changes. The code uses a container `<div>` with CSS `position: fixed` to occupy the full page, then extracts `clientWidth` and `clientHeight` during a `redraw` function. It sets the SVG's `width` and `height` attributes accordingly and rebinds line coordinates via `selectAll` and `merge`, with a `resize` event listener triggering updates.

Jun 3, 2020