Mahaveer Jain

@mjain85·13 public vizzes

CheapTricks for Interaction(Map)

This example demonstrates interactive pan and zoom on a world map, with hover highlighting of individual countries. The map is rendered as SVG paths using `d3.geoPath` and a natural Earth projection, with country boundaries from a TopoJSON file enriched by TSV name data. The `d3.zoom` API handles the zoom and pan transformations, while CSS `:hover` styles trigger the red country fill. The sphere background uses a blue fill, and country names appear as tooltips via SVG `<title>` elements.

Aug 29, 2021

Loading thumbnail…

Let's Make a map

This example displays a world map using a natural Earth projection, with countries filled in light green against a blue spherical backdrop. It loads geographic data as TopoJSON from the world-atlas package and converts it to GeoJSON features using topojson’s `feature` method. The map is rendered as SVG paths via `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and country boundaries.

Aug 29, 2021

Loading thumbnail…

Bowl Of Fruits-HoverToSelect

This example demonstrates interactive data binding with D3.js v5, rendering a bowl of fruits as SVG circles that respond to mouse hover by highlighting the selected fruit with a black stroke. The visualization shows how enter, update, and exit selections manage animated transitions for adding, removing, and modifying fruits over time. The code uses `selection.data()`, `selection.enter()`, `selection.exit()`, and `transition.attr()` to smoothly animate circle radius and position changes. Separately, text labels are bound and updated alongside the circles, with color scales mapping fruit types to visual properties.

Aug 29, 2021

Loading thumbnail…

Bowl Of Fruits-ClickToSelect

A bowl of fruit demonstrates click-to-select interaction and dynamic data updates using D3.js. Circles represent apples and lemons, with a black stroke highlighting the selected fruit. The visualization animates transitions when fruits are removed or change type, using D3's `scaleOrdinal` for colors and radii, and `selection.transition()` for smooth updates. The code employs `selectAll`, `data`, `enter`, `merge`, and `exit` patterns to manage DOM elements, with click handlers triggering re-renders via an `onClick` callback.

Aug 29, 2021

Loading thumbnail…

Fork of Bowl Of Fruits-Nested

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and transformed into lemons through a sequence of timed updates, showing how D3.js handles incremental data changes. The code uses `d3.select` and `selection.merge` to manage SVG groups and shapes, with `transition().duration()` animating circle radii when fruits change. A custom `fruitBowl` function applies ordinal color and radius scales, mapping fruit types to visual properties, while the removal and addition of data elements triggers enter, update, and exit states. The underlying data is a hardcoded array of fruit objects modified by setTimeout callbacks.

Aug 29, 2021

Loading thumbnail…

Bowl Of Fruits

A bowl of fruits demonstrates data binding and animated transitions in D3.js v5. Initially five red apples appear as circles, then examples sequentially remove an apple, change one apple to a yellow lemon, and filter out another fruit. The visualization uses `selection.data()` with key functions, `enter`, `merge`, and `exit` selections, plus `transition()` to animate radius and position changes over 500 milliseconds. SVG circles and text labels are rendered with D3 scales (`scaleOrdinal`) mapping fruit types to colors and sizes.

Aug 28, 2021

Loading thumbnail…

Temperature in SF

This scatter plot displays temperature readings in San Francisco over time, with each point representing a measurement and a maroon line connecting the sequence to highlight trends. The visualization uses D3 v5 with SVG rendering, importing specific functions like `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and scales. The data comes from a CSV file hosted on VizHub, loaded via `d3.csv` and parsed with `new Date()`. Circles are semi-transparent teal, and gridlines extend across the chart, with labeled axes for temperature and time.

Aug 23, 2021

Loading thumbnail…

Making a Scatter plot

This example displays a scatter plot of vehicle weight versus horsepower, with a point radius of 25 and semi-transparent teal circles. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom` and `axisLeft` for ticks. A heading appears at the top, with axis labels styled via CSS. The data comes from an external CSV file loaded using `csv`, parsed for numeric values, and rendered within margins specifying inner dimensions.

Aug 23, 2021

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks eight countries by population, using a CSV dataset loaded with `d3.csv`. The visualization builds static SVG rectangles, mapping population values through `d3.scaleLinear` and country names through `d3.scaleBand`, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Formatting applies `d3.format` to abbreviate tick labels, and CSS styles the teal bars and axis text. The chart also includes a title and axis label, all rendered in an SVG container sized by its HTML attributes.

Aug 23, 2021

Loading thumbnail…

D3-Face

This example creates a simple, animated face using the D3.js library (version 7) with SVG rendering. It draws a yellow circular head, two red eyes, and a mouth using an arc shape, all positioned with transform translations. The code uses D3's `select`, `append`, and `attr` to build the SVG elements, and a chained `transition().duration(2000)` to animate the eyebrows moving up and down. The visual is generated entirely from geometric primitives, with no external data source, and runs in a loop based on the declared transitions.

Aug 22, 2021

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates fundamental SVG shape rendering and CSS styling within an HTML page. It shows rectangles, circles, lines, and a path, all grouped and transformed using SVG’s scale and translate operations. The code applies fill colors, strokes, and stroke-widths both inline and through CSS classes, with a specific style targeting path elements inside the lines group. The visualization uses raw SVG and standard CSS, with no JavaScript libraries, to illustrate how geometric primitives and grouping attributes create static compositions.

Aug 22, 2021

Loading thumbnail…

HTML Chaper 2 Car Report

This example shows a simple car price report using basic HTML and CSS, listing three used vehicles with their model years and prices. The page uses an unordered list in `index.html` to display each car entry, with the first item highlighted in red via a CSS class. The `styles.css` file sets a large monospace font and black text for the body. No external libraries or APIs are used, and the data is hardcoded directly in the HTML markup, rendering a static text-only visualization.

Aug 21, 2021

Loading thumbnail…

Chapter 1

This example demonstrates asynchronous data loading and report generation from a hardcoded JSON array of car listings. It uses a Promise-based `getCars` function with a simulated two-second delay, then filters cars by price and formats matching entries into a text report via local ES6 modules (`generateReport`, `formatCar`). The report replaces the initial "loading ..." text in a `<pre>` element, showcasing modular JavaScript and DOM updates without D3.

Aug 21, 2021