Shantanu Tripathi

@shantanu098·10 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face in an SVG canvas, with animated eyebrows that respond to a timer. The code uses `d3.select` and `d3.append` to build the face’s elements, while `setTimeout` and a `render` function update the positions of the eyebrows over time. It also illustrates data-binding through a mutable `fruits` array, where elements are removed or change type, triggering re-renders that reflect those updates in the SVG. The example relies on D3 v5’s core selection and data-join methods rather than any external data source, focusing purely on interactive, time-driven graphic changes.

Jul 1, 2020

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of various countries. The visualization uses a linear scale for the population values on the x-axis and a band scale for the countries on the y-axis. The chart is rendered as an SVG using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. Data is loaded from a CSV file, with the population values multiplied by 1000 upon parsing.

Jul 1, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping motion. The example demonstrates fundamental DOM manipulation by building the face from SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is achieved through chained `transition` calls that alternate between two vertical positions over two-second intervals. The code uses `d3.select` to access the SVG and applies attributes via `.attr`, with static geometry defined by constants for spacing and sizing.

Jun 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face with yellow circular head, black eyes, and a curved mouth is rendered in SVG using D3.js v5 and ES6 modules. The eyebrows are rectangular shapes that animate vertically via chained `transition()` calls, moving up and then returning to their original position over repeated 2-second intervals. D3's `select` and `arc` APIs construct the SVG elements, with layout driven by hardcoded dimensions from the parent `<svg>`.

Jun 30, 2020

Loading thumbnail…

Let us make a face with D3.js

The visualization constructs a cartoon face inside an SVG canvas, starting with a yellow circle for the head, followed by eyes and a mouth. It demonstrates an animated movement of the eyebrows using a chained transition sequence, shifting them down over a two-second duration before returning them to their original position. The code relies on D3.js v5 functions including `select`, `append`, and `arc` for generating the mouth path, with SVG shapes styled via CSS attributes. The face is centered using a group transformation, and the animation is driven by D3's transition API with a specified duration.

Jun 29, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and SVG attributes. It shows a scaled and translated group of basic geometric forms, with colors applied both directly in the markup (e.g., `fill="red"`, `fill="#83cc2a"`) and via CSS classes like `.lines`. The illustration highlights inheritance of presentation properties, such as fill and stroke, from parent `<g>` elements, while also showcasing stroke width, line join, and cap styling on a polyline and a path.

Jun 28, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal “Hello World” visualization, displaying a large, centered text message on a webpage. It showcases the basic setup of a D3.js project within VizHub, including how to structure files and import modules. The implementation uses D3 v5’s `select` function to target a specific HTML element by its ID and update its text content with a string exported from a separate ES6 module. Styling is applied via an external CSS file, setting the font size and alignment for the displayed message.

Jun 26, 2020

Loading thumbnail…

Cars Report

This example uses D3.js v5 to display a short, personalized hello message. It demonstrates importing functions from D3 and local ES6 modules in a VizHub project. The `select` API sets the text content of an HTML element, rendering a hand-written greeting. The visualization leverages the core D3 selection and mutation methods without resorting to more complex plotting or data analysis.

Jun 26, 2020

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small static dataset, rendering the string "Merecedes Benz" prominently on the page. It uses React and a custom `cars.js` module that defines a JSON array of three car objects with year, model, make, and price. The main `index.js` file imports the parsed data and sets the text content of a DOM element via `document.getElementById`, leveraging the browser’s native DOM API for output.

Jun 26, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtering a static JSON array to show only vehicles priced under $2,000 and formatting each entry as a line with year, make, model, and price. The page initially displays "Loading..." and then updates a `<pre>` element with the generated report. The code uses JavaScript modules (`import`/`export`), `JSON.parse` on an embedded string, and `Promise` with `setTimeout` to simulate a two-second data fetch, with `getCars`, `generateReport`, and `formatCar` as custom functions.

Jun 26, 2020