Lokesh

@lokesh0803·8 public vizzes

Fork of Fork of ICE-8 (Network)

A force-directed network graph visualizes a small study group of seven people, with nodes representing members and links showing their connections. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG rendering draws lines and circles with `d3.schemeTableau10` colors. Node dragging via `d3.drag` allows interactive repositioning. The accompanying `data.csv` file—though not directly loaded in the code—lists country codes and values, suggesting a separate dataset unrelated to the in-script node/link arrays. The dark-themed interface renders entirely client-side using D3 v7.

Nov 9, 2025

Loading thumbnail…

Fork of ICE-8 (Tree)

This example displays a family tree as a horizontal dendrogram, with nodes colored by generation using a custom ordinal color scale. The visualization is built with D3 v7, using the `d3.hierarchy` and `d3.tree` layout algorithms, and rendered as SVG with `d3.linkHorizontal` for the curved links. The static data is defined inline as a JSON-like object, and the chart is presented on a dark background with labeled parent, aunt, cousin, sibling, and self nodes.

Nov 9, 2025

Loading thumbnail…

ICE-8

A world choropleth maps country-level numeric values from a CSV file onto a natural Earth projection, using a plasma color scale and gradient legend to encode magnitude. The visualization links ISO numeric country codes to TopoJSON geometry from the world-atlas dataset, rendering with D3 v7’s `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.scaleSequential`. Hovering over a country reveals a tooltip with its name and value, while countries without data appear in a muted blue.

Nov 9, 2025

Loading thumbnail…

ICE7-AreaChart

This area chart displays monthly e-scooter sales and profit data from a CSV file, with sales shown as a light blue filled area and a steel blue line overlay using d3.area and d3.line with curveMonotoneX. The visualization uses D3 v7 to create an SVG with scales, axes, and labels, including a point scale for months and a linear scale for sales values. The dataset spans January through June, showing a steady upward trend in sales from 120 to 260 units.

Oct 28, 2025

Loading thumbnail…

ICE7-LineChart

This line chart displays monthly e-scooter sales data from a CSV file, plotting sales values as a steelblue line with orange circular points. The visualization uses D3 v7 to construct SVG elements, with `d3.scalePoint` for the categorical month axis and `d3.scaleLinear` for the sales axis. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`, while the line itself is generated via `d3.line`. The chart includes labeled axes and a title, with data loaded through `d3.csv`.

Oct 28, 2025

Loading thumbnail…

ICE7-PieChart

This pie chart visualizes monthly e-scooter sales data from `escooter_sales.csv`. Each slice represents a month, with its arc length proportional to sales figures; the labels display both the month name and sales value, and a color-coded legend on the right matches each month to its sales total. The visualization is built using D3 v7, employing the `d3.pie` layout, `d3.arc` for slice geometry, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, all rendered as SVG shapes. The chart’s title, "Monthly Sales Pie Chart," appears at the top, and the design uses the Share Tech font throughout.

Oct 28, 2025

Loading thumbnail…

ICE7-ScatterPlot

This example shows a reusable scatter plot of monthly e-scooter sales versus profit from an external CSV file, using an SVG rendering approach. The chart maps sales to the x-axis and profit to the y-axis with labeled axes, and displays steel-blue circles for each data point. The code uses d3.csv for data loading and d3.scaleLinear for scales, while the reusable chart function chainably configures dimensions, margins, and value accessors. The visualization is built with D3 v7 and rendered into a pre-existing SVG element.

Oct 28, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This dashboard displays a summary of an e-scooter sales dataset, using D3.js v7 to load CSV data and populate stat cards with aggregate metrics like total units and revenue. A bar chart shows total units by region using `d3.rollup` and `d3.sum` with sorted descending bars. The visualization is rendered as SVG and features a dark-themed card layout with an inline scooter icon. Data is fetched from a remote Gist URL, and the page uses `d3.format` for number display.

Oct 5, 2025