kavi-kumaran

@kavi-kumaran·6 public vizzes

tax

This interactive prototype presents a web-based form for orphanage registration, with fields for the orphanage's name, license ID, and address, along with file uploads for a stamp and signature. Upon submitting the form, it links to a generated donation receipt template that displays the entered donor information, orphanage details, and a line item for donated goods. The project uses HTML and CSS for page structure and styling, with D3.js v5 loaded for potential data manipulation. The receipt template reads from a CSV file containing donor and donation details, presenting a structured bill layout with maps to external resources like Bootstrap and Google Fonts.

Jan 7, 2020

Loading thumbnail…

JS For Beginners

A basic HTML form demonstrates food categorization with a dropdown menu of South Indian dishes and a quantity input, styled with a green theme and a submit button. The page loads d3.v4 from a CDN, but the JavaScript logic in `index.js` only adds an event listener that prevents form submission without rendering any visualization. The `food.csv` file contains static data with food names, categories, color tags, and age tags, though this data is not actively used by the current code. The example appears to be an incomplete starter project for future interactive data visualization work.

Jan 6, 2020

Loading thumbnail…

Bar chart

This bar chart displays the population of seven global regions using circles scaled along a linear axis, with country names on a point scale. Built with D3 v5, the visualization loads data from a CSV file, converts population values, and renders SVG elements. It uses `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `tickFormat` to format values in billions, while custom margins and axis styling enhance readability.

Jan 2, 2020

Loading thumbnail…

Bar chart

This bar chart displays the populations of seven global regions using a horizontal layout, with the population values loaded from a CSV file and formatted in billions. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data to SVG rectangles, while `axisLeft` and `axisBottom` generate the chart’s axes. The code also demonstrates DOM manipulation through D3 selections, appending elements, and applying attributes. A title and axis label are added via SVG text elements, and the styling is handled through an external CSS file.

Jan 1, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by constructing a smiling face from SVG primitives and animating its eyebrows. A yellow circle forms the head, with two smaller circles for eyes, a path generated with `d3.arc()` creating the mouth, and two rectangles serving as eyebrows. The animation uses `transition().duration(2000)` to sequentially move each eyebrow vertically, creating a winking effect. The face is centered using a `transform` translation, and the rendered output is SVG.

Dec 31, 2019

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000. It fetches a hardcoded JSON array of car objects via a simulated asynchronous `getCars()` promise, filters them by price, and formats each entry into a string like “2009 Ford F150 : $1950” using `formatCar.js`. The React-free page renders the final multi-line output into a `<pre>` element. The code uses native JavaScript promises, array `filter` and `map`, and DOM `textContent` to update the view.

Dec 31, 2019