Priteshlip10

@Priteshlip10·11 public vizzes

Entrace Applicants Distribution

A choropleth map shows the number of students appearing in the Institute of Engineering entrance exam across districts of Nepal, with color intensity representing applicant counts. The visualization pulls from multiple years of admission data, presented as a combined view. Built with React and D3 v7, it uses `geoMercator` projection, `geoPath` for map rendering, and `scaleSequential` with the `interpolateYlGnBu` color scale. District names from the GeoJSON are normalized to match the dataset, and missing values for Manang and Mustang are set to zero.

Aug 8, 2021

Loading thumbnail…

Entrace Applicants Distribution

This choropleth map shows the distribution of students appearing in the IOE Entrance exam across Nepal’s districts for the year 2073. The visualization uses a sequential color scale (`d3.scaleSequential` with `interpolateYlGnBu`) to encode the number of applicants per district, with gray marking districts missing data. Built with React and D3 v7, it loads GeoJSON district boundaries and CSV admission data, then matches them by district name. The map is rendered as SVG using `d3.geoMercator` projection and `d3.geoPath`.

Aug 8, 2021

Loading thumbnail…

World Map

This example visualizes the districts of Nepal as a choropleth-style map, rendered with SVG paths fitted to a clipped Mercator projection. The map displays geographic boundaries in teal against a gray sphere background, with the projection centered on Nepal’s coordinates. The code uses `d3.geoMercator` and `d3.geoPath` to project GeoJSON features, while React manages the component state and rendering. District data comes from the mesaugat geoJSON-Nepal repository, and the visualization is built with React 16.9 and D3 v5.

Aug 7, 2021

Loading thumbnail…

Rendering data with React and D3

This visualization renders a horizontal bar chart of the top ten countries by 2020 population, using React to create SVG rectangles and D3’s scaleBand and scaleLinear for positioning and sizing. The data loads asynchronously via d3.csv from a GitHub-hosted UN population dataset, with the `+` operator converting string values to numbers. React manages the loading state with a text prompt, then maps the parsed data to `<rect>` elements, demonstrating how D3 utilities handle scales and parsing while React handles component rendering and updates.

Aug 7, 2021

Loading thumbnail…

Rendering data with React and D3

This example renders CSS named colors as a sunburst-style pie chart, where each slice represents one color with its own hexadecimal fill. Built with React and D3 v7, it loads data from a CSV URL using `d3.csv` and draws the visualization with SVG paths generated by `d3.pie` and `d3.arc`. The React component manages state for the loaded data and conditionally displays a loading message, while the final chart uses a pie layout with equal values to distribute slices around the center.

Aug 7, 2021

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces demonstrates that React components can be reused with different parameters for each instance. The D3 library provides the `arc` generator for the mouth path and the `range` function for creating the SVG container elements. Each face receives randomized values for stroke width, eye placement, eye radius, and mouth dimensions, producing visible variety across the grid while keeping the core structure identical. The code passes these parameters through a hierarchical set of React components, culminating in an SVG rendered within a fixed 160-by-160-pixel canvas per face.

Aug 7, 2021

Loading thumbnail…

Loading data with React

This example demonstrates how to load a CSV dataset of CSS named colors using React state and D3’s `csv` utility. The app fetches the data once via `useEffect`, stores it in a `useState` hook, and displays a text summary showing file size in kilobytes, row count, and column count. The rendering relies on React’s `ReactDOM.render` and the `d3.csvFormat` method for calculating the file size, with a loading message shown until the asynchronous data request resolves.

Aug 7, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between horsepower and country of origin, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through method chaining (e.g., `vl.markPoint`, `vl.x().fieldN`). The code registers Vega, Vega-Lite, and the Vega-Lite API in a D3 v5 environment, fetches CSV data via `d3.csv`, applies custom axis and label styling from a separate config module, and renders to SVG with an interactive tooltip handler from Vega-Tooltip.

Aug 7, 2021

Loading thumbnail…

Loading and Parsing Data

This example demonstrates how to load and parse CSV data using D3.js v7. The program fetches a CSV file of CSS named colors from a GitHub gist, then parses it with `d3.csv()` and displays summary statistics. The output shows the data size in kilobytes, the number of rows, and the number of columns in large text on a blank page. The code primarily relies on the `d3.csv` function for parsing and `d3.csvFormat` to calculate the data's byte size, with alternative fetch-based approaches commented out.

Aug 6, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a full-window SVG canvas in this React application. The visualization tracks pointer movement using the SVG `onMouseMove` event, which updates the circle's `cx` and `cy` coordinates in real time. The circle's position is stored in React state and re-rendered on every mouse move, while its radius remains fixed at 50 pixels. The program uses React 16.9 with a custom event handler to create an interactive, responsive display that maps the cursor's screen coordinates directly to the SVG coordinate space.

Aug 6, 2021

Loading thumbnail…

Smiley face part 1

A reusable React component renders a grid of identical smiley faces, each built from SVG shapes. The face uses a yellow background circle with a black stroke, two eyes positioned via offset coordinates, and a mouth drawn with a D3 arc path. The `d3.arc()` generator creates the mouth’s curved shape, while React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the structure. The app maps over a numeric range to display multiple faces, demonstrating component reuse and D3 integration within React’s declarative model.

Aug 6, 2021