Amit Kumar

@amitforamit·11 public vizzes

Bowl of Fruit - Click to Select

A bowl of fruit shows four red apples arranged in a row, each rendered as a circle with D3’s `scaleOrdinal` for color and radius. Clicking an apple selects it, adding a black stroke via React state `setSelectedFruit`. The example uses React components to render SVG circles, with D3 v5 scales for styling and fruit positioning calculated from array indices.

Mar 10, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles represent apples in an SVG bowl, then change over time as the data updates. The example demonstrates D3’s general update pattern with `selection.enter`, `merge`, and `exit` to handle added, removed, and modified fruit. It uses `d3.scaleOrdinal` for color and radius, with `setTimeout` to sequentially pop, replace, and filter items from a JavaScript array, triggering a re-render via the `fruitBowl` function.

Mar 10, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit. The example uses React state with `useState` to track the selected fruit’s ID, and `d3.scaleOrdinal` maps fruit types to colors and radii. Each circle’s `onClick` handler updates the selection, while an SVG renders the circles as React components. The code also comments on transitioning circles with D3 transitions, but active animation is not implemented.

Mar 10, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, with population values read from a CSV file and rendered as SVG rectangles. It uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis categories, and d3.axisLeft and d3.axisBottom to draw the axes. The chart includes a formatted x-axis tick label using d3.format, a title, and a population axis label, all styled via external CSS.

Mar 10, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout where each bar’s length corresponds to population size. The visualization is built with D3 v5 within a React framework, rendering to an SVG canvas. The code loads data from a CSV file, applies a linear scale for population and a band scale for country names, and adds axis labels and a title. Styling is handled through a separate CSS file, with steelblue bars and custom fonts for readability.

Mar 10, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generated from a hardcoded JSON array of five vehicles. It shows how to filter cars under a specified price threshold and format each entry as a readable string with year, make, model, and cost. The code uses JavaScript’s `JSON.parse` to load the data, a custom `formatCar` module for string interpolation, and a `filter` and `map` pipeline within `generateReport` to produce the output. The result is rendered into a `<pre>` element via `document.getElementById`.

Mar 10, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal web page that displays the text “Hello VizHub!” using D3.js. It shows how to set up an HTML document with a linked stylesheet and import D3 from a CDN. The code uses D3’s `select` function to target the `#message` div and set its text content, with the string supplied by a custom ES6 module. The styling centers the message and sets its font size to 12em, resulting in a simple, large-text visualization.

Mar 6, 2020

Loading thumbnail…

cars reports

This example demonstrates a text-based report of car listings filtered by price. It shows how asynchronous data loading and string formatting can drive a simple DOM update. The code uses `getCars` to return a Promise that resolves a hardcoded JSON array after a 1-second timeout, then `generateReport` filters cars under a max price and maps them through `formatCar` into readable lines. The result is displayed in a `<pre>` element via `document.getElementById`, with styling applied through an inline style attribute.

Mar 6, 2020

Loading thumbnail…

cars reports

This example demonstrates a simple text-based report of car listings, filtering a small hardcoded JSON dataset to display only vehicles priced under a given threshold. It shows how modular JavaScript functions can transform and present data as formatted strings in the browser. The code imports car data from a parsed JSON array, applies a filter for maximum price, maps each car through a custom formatter that outputs year, make, model, and price, and joins the results into a readable list. The output is rendered into a `<pre>` element in the HTML page using standard DOM manipulation, with no external visualization libraries.

Mar 6, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello” centered on a plain white page. The visualization demonstrates the simplest possible HTML document structure, using standard HTML elements and inline CSS to control the layout. The page relies on the browser’s default rendering of the `<body>` tag, with a `<style>` block that applies a large font size and text alignment. It serves as a minimal starting point, showing how raw HTML and CSS can produce a basic visual output without any external libraries or JavaScript. The example is entirely static, with no data or interactive behavior.

Mar 4, 2020

Loading thumbnail…

HTML Starter

Mar 4, 2020