lohitsai62@gmail.com

@lohitsai62·14 public vizzes

NETWORK

A network visualization maps relationships between tree families and species, with color encoding hierarchy levels (root, family, species) and node size representing average height. The force-directed layout uses d3.forceSimulation with link, charge, center, and collide forces to position nodes, while SVG rendering draws links and draggable nodes. Hovering a species displays a tooltip with details, and the dataset loads from an external CSV file via a custom parsing function that handles both regular and single-line formats. D3 v7 powers the interactive simulation, styling, and event handling throughout.

Nov 2, 2025

Loading thumbnail…

Family_TREES

This tree visualization maps university courses through a hierarchical structure of departments, levels, and individual courses, with each depth level colored distinctly. Built using D3.js v7, it renders as an SVG with interactivity, displaying tooltips when hovering over nodes. The data is loaded from a remote CSV file, and the layout is generated using D3's `d3.tree()` and `d3.hierarchy()` functions, with `d3.linkVertical()` creating the connecting edges.

Nov 2, 2025

Loading thumbnail…

world map

This interactive map visualizes 2024 automobile metrics, allowing comparison of Total Vehicles and EV Sales across major countries. Country colors reflect the selected metric, while circle sizes encode EV sales volume. Built with D3.js v7, the visualization projects country boundaries from a world-atlas TopoJSON file using `d3.geoPath` and integrates a hover tooltip. A separate legend and toggling buttons drive the color-encoding switches, with the page styled via a clean card-based CSS layout.

Nov 2, 2025

Loading thumbnail…

pie chart

This interactive pie chart displays the distribution of electric-vehicle charging stations across cities, with a dropdown menu to switch between metrics: charging ports, daily users, monthly energy, and average charge time. Built with D3 v7, it loads data from a text file, aggregates values by city using `d3.rollup`, and renders SVG slices with `d3.arc`. Hovering reveals a tooltip with percentages, while labels show city names and shares. Animated transitions update the chart when the metric changes.

Oct 26, 2025

Loading thumbnail…

area chart

This interactive area chart visualizes EV charging station metrics—charging ports, average charge time, daily users, and monthly energy—across station IDs. Built with D3 v7, it renders a smooth area path with an overlaid orange line and circular points, all using SVG. A dropdown menu lets users switch between metrics, triggering transitions that update the axes, grid, and data points. Hovering over a point reveals a tooltip with city details and the selected metric’s value, with data loaded from a remote CSV file.

Oct 26, 2025

Loading thumbnail…

line chart

This interactive line chart displays EV charging station metrics across stations, letting users toggle between charging ports, average charge time, daily users, and monthly energy consumption via a dropdown menu. The visualization uses D3 v7 to load CSV data from a GitHub gist, sort stations by ID, and render an orange line with red point markers. Smooth transitions animate point position updates when switching metrics, while hover tooltips reveal station details. The chart includes gridlines, axis labels, and a cleaned axis without domain lines.

Oct 26, 2025

Loading thumbnail…

reusable scatter plot

This example demonstrates an automated, reusable scatter plot built with D3.js (v6.7.0) that loads a CSV from a GitHub gist and dynamically selects the first two numeric columns for the x- and y-axes. It uses `csv()`, `scaleLinear()`, `axisBottom()`, and `axisLeft()` to render axes, and `scaleOrdinal()` with `schemeCategory10` to color points by the first categorical column. The visualization includes symbols from D3’s `symbol()` API, a simple hover tooltip, and automatically rotates through additional numeric x-columns every three seconds using `setInterval()`, re-rendering the SVG and scaling.

Oct 26, 2025

Loading thumbnail…

Multi graph

This visualization combines bar charts and a line graph to compare average smartphone prices and battery life across brands, using data loaded via d3.csv and aggregated by brand. The chart employs d3.scaleBand for categorical positioning, dual d3.scaleLinear axes for price and battery ranges, and renders bars with d3.selectAll while drawing a line path with d3.line. The React-based interface updates the SVG dynamically using useEffect hooks, with a dark neon theme styled through CSS variables.

Oct 20, 2025

Loading thumbnail…

Scatter plot

This dark-themed scatter plot shows the relationship between units sold and total sales for smartphone models, with each point colored by brand and sized by average rating. Hovering reveals a tooltip with model details. Built with D3 v7, the visualization loads CSV data, applies linear scales for axes and a color scale for brands, and uses SVG circles with mouse events for interactivity.

Oct 20, 2025

Loading thumbnail…

Bar chart

A horizontal bar chart ranks the 20 best-selling smartphone models by units sold, using a dark theme and brand-based color gradients. Built with React and D3 v6, it loads CSV data, sorts and slices it, then renders SVG bars with hover tooltips, gridlines, and labels. The chart maps model names to the y-axis and units sold to the x-axis, with D3’s `scaleBand` and `scaleLinear` handling layout and `scaleOrdinal` assigning colors.

Oct 20, 2025

Loading thumbnail…

Multi graph

A multi-series chart compares average smartphone price and battery life by brand from a CSV dataset. White bars show average price against a left axis, while a neon sky-blue line and dots show average battery hours against a right axis. Built with React hooks and D3 v6, it uses `scaleBand`, `scaleLinear`, `axisLeft`, `axisRight`, and `d3.line` to render SVG elements. Brand labels rotate on the x-axis, and a legend appears below.

Oct 19, 2025

Loading thumbnail…

SG

The visualization presents a smartphone scatter plot mapping price against battery life, with each dot representing a model. Color encodes brand, while dot size reflects average rating. The chart uses D3 v7 with SVG rendering, featuring a dark-themed interface, grid lines, custom axes, and a tooltip for detail inspection on hover. Data loads from a raw GitHub gist, where the code normalizes a single-line CSV by inserting line breaks between rows, then binds this data to the visualization elements.

Oct 19, 2025

Loading thumbnail…

Bar chart

This horizontal bar chart ranks the top 20 smartphone models by units sold (in millions), with each bar colored by brand using a pastel ordinal scale. The visualization uses React 16.9 and D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `scaleOrdinal` for color encoding. Data is fetched from a remote CSV, normalized from single-line format, and rendered as SVG rectangles with tooltips showing price, rating, and battery life.

Oct 19, 2025

Loading thumbnail…

EV SALE 2024

This interactive web tool displays a preview of the first five rows of a CSV file loaded from a user-provided URL. It renders the data in a clean, stylized HTML table with a dark theme, showing column names as sticky headers and alternating row colors for readability. The interface includes a text input for the URL and a load button, with status and metadata (row and column counts) displayed dynamically. Built with D3.js for potential data handling, the example uses core DOM manipulation and CSS styling to present a functional CSV previewer.

Oct 5, 2025