Harsh Patel

@hkp98·6 public vizzes

Fork of Customizing axis

This bar chart displays population data for each country, with countries listed along the y-axis and population values on the x-axis. The visualization uses a linear scale for population and a band scale for countries, with custom tick formatting that converts large numbers into readable units like "Md" for millions. The chart is rendered using D3 v6 with SVG, pulling data from a CSV file sourced from the United Nations population data. Axes are customized by removing default domain lines and applying custom tick styling for a cleaner appearance.

Feb 2, 2021

Loading thumbnail…

HTML Cars Report

This example displays a simple cars report with three identical listings for a 2012 Nissan Leaf at $1800, presented as a bulleted list. The first item is highlighted in blue, distinguishing it from the others. The page uses standard HTML and CSS, with the body styled at a large monospace font size. The styling is applied through a class selector, `.highlighted`, which sets the blue color on that particular list item.

Feb 1, 2021

Loading thumbnail…

Fork of test

This gallery example presents an interactive stacked bar chart that visualizes financial data over time from 2021 to 2044, with bars divided into six categories such as spent income, spent return, and retained capital. The chart uses negative and positive value ranges to show spending versus retained amounts, with mouseover highlighting to emphasize individual bars. Built with D3 v4, the visualization employs `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and SVG rendering with CSS-based highlighting triggered by mouse events. The data originates from a custom `FinancialPlan` class containing hardcoded arrays.

Feb 1, 2021

Loading thumbnail…

Fork of data visulization

This bar chart displays the populations of 335 country codes, where each bar's length corresponds to the population value. The visualization uses D3.js v6 within a React framework to render the data as SVG. The code loads data from a CSV file, scales the population values (multiplied by 1000), and uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axis labels are generated using `axisLeft` and `axisBottom`, while the bars themselves are appended as SVG rectangles.

Feb 1, 2021

Loading thumbnail…

Fork of Cars report

A fork of the Cars report displays the make "Honda" from the first entry of a hardcoded JSON dataset, rendered as large text in the browser. The code imports a parsed `cars` array from `cars.js` and sets the text content of a `div` element via `document.getElementById`. It uses minimal HTML, inline CSS, and vanilla JavaScript within a React starter template, reading data that is manually embedded as a JSON string.

Feb 1, 2021

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hard-coded JSON dataset, rendered prominently in large text. It loads and parses the dataset using JSON.parse, then accesses the first record’s “make” property directly in JavaScript. The result is injected into the page via the DOM’s textContent property on a pre element. The page itself uses plain HTML and CSS for styling, with no additional visualization libraries or frameworks.

Feb 1, 2021