M

Maneesh Kumar

@Chintu1024·17 public vizzes

Loading thumbnail…

MK_NetworkVisualization

This interactive network visualization shows a conceptual collaboration graph connecting six authors to six papers, with blue squares representing authors and green circles representing papers. The force-directed layout uses d3.forceSimulation with link, many-body charge, center, and collision forces to arrange the bipartite structure. Node colors and shapes encode node type via d3.scaleOrdinal, while hovering highlights connected neighbors. Animated SVG rendering with a fixed tooltip displays node details on interaction.

Loading thumbnail…

MK_TreeVisualization

This interactive D3 v7 visualization presents the hierarchy of programming languages using a custom four-layer tree layout, grouping languages by family, paradigm, and name. The visualization uses SVG rendering with animated transitions between node states, where each layer is distinguished by color and geometric shape (circles, squares, diamonds, and triangles). The data is either embedded directly or loaded from a CSV file, with the layout computed through D3's tree and stratify modules, and rendered using custom link paths and node labels with a fixed tooltip.

Loading thumbnail…

MK World Map.

This example shows a world choropleth map of population data, with each country colored using a sequential square-root scale. Countries with no data appear gray, and hovering reveals a tooltip with the country name and population. The visualization uses D3 v7 with TopoJSON data from world-atlas and CSV population data. It renders SVG paths via d3.geoPath with a geoNaturalEarth1 projection, mapping ISO3 country codes to populations and applying an interpolateYlGnBu color scale.

Loading thumbnail…

MK Area Chart

This example demonstrates a reusable area chart built with D3 v7, visualizing monthly sales data from a local CSV file across 2023 and 2024. The chart uses a blue gradient fill and a monotone curve, with axes, labels, and a title configured through a fluent API. Interactive tooltips appear on hover, displaying the month and sales value for each data point. The implementation leverages `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`, while the `main.js` script parses and sorts the CSV data before invoking the chart. The reusable component supports an optional update method for animated transitions.

Loading thumbnail…

MK Line Chart

This dark-themed line chart visualizes monthly sales data from January 2023 through December 2024, sourced from a CSV file. Built with D3 v7, the reusable `lineChart()` function renders an SVG path using `d3.line()` with `curveMonotoneX`, along with circles for data points. Interactive tooltips appear on mouse hover via D3 event handlers. The chart includes a programmatic `update()` method that animates transitions for axes and the line when new data is provided.

Loading thumbnail…

MK Pie Chart

A dark-themed donut chart displays total sales by product category across 20 stores, with slices labeled by category name and percentage. Data from a CSV file is aggregated using `d3.rollups` and rendered with the reusable `pieChart()` function, which leverages `d3.pie` and `d3.arc` for the layout and `d3.scaleOrdinal` with `schemeTableau10` for coloring. Interactive tooltips appear on hover using `d3.select` and mouse events, while leader lines and a legend clarify slice values.

Loading thumbnail…

MK Reusable Scatter Plot

This is a reusable, animated D3.js v7 scatter plot that visualizes the relationship between bill length and flipper length in three penguin species. Rendered as an SVG, it uses the `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` APIs to create responsive axes, with `d3.schemeTableau10` color-coding points by species. The plot features tooltips on hover and a `transition` API for smooth data updates. The included CSV dataset from VizHub demonstrates its interactivity, with color-encoded groups and a legend.

Loading thumbnail…

Maneesh of multi charts

Two animated charts visualize annual sales trends from a CSV dataset aggregated by year. The first chart displays three overlaid lines for sales units (divided by 100), revenue, and profit margin, each with interactive tooltips. The second chart combines bars for sales units with a line for profit margin on a dual axis. Built with D3 v7, the visualization uses SVG rendering, `d3.rollups` for aggregation, and shared scales for alignment.

Loading thumbnail…

multi series chart_Maneesh

This multi-series chart displays global registered vehicle counts by country as animated blue bars, while a red line with a Catmull-Rom curve shows the corresponding registration year on a secondary axis. Built with React and D3 v7, the visualization loads data from a CSV file and renders to SVG. Bars grow upward via `transition().duration()`, and the line draws itself using `stroke-dasharray` and `stroke-dashoffset` animation.

Loading thumbnail…

Fork of multi charts

This example presents two SVG charts built with D3 v7, visualizing 180 days of daily sales data for three series (A, B, and C) from `sales_trends.csv`. The top chart is a multi-series line chart showing trends for all three series over time. The bottom chart combines bars for series A and B with a line for series C, using a dual-scale approach. The code relies on `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for rendering.

Loading thumbnail…

multi charts

This example presents two SVG charts built with D3.js v7, both visualizing daily sales trends for three series (A, B, C) from `sales_trends.csv`. The top chart displays multi-series line plots, while the bottom combines bars for series A and B with an overlaid line for series C. The code uses `d3.csv` with `d3.autoType` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders interactive tooltips styled via CSS.

Loading thumbnail…

charts

This example combines a bar chart and a line chart in a single SVG to compare daily totals with the average of three component values. Light blue bars represent the total sum of fields A, B, and C, while a purple line traces the daily average across the same time period. The chart uses dual y-axes, with left labels for totals and right labels for averages, and a time-based x-axis showing date ranges. It is built with d3.v7, loading data from a CSV file via `d3.csv` and `d3.autoType`, then rendering using `d3.scaleBand`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with SVG output.

Loading thumbnail…

charts

This example visualizes monthly sales trends from a CSV data source, comparing three product lines from 2019 to 2023. It shows a multi-series line chart with time-scale axes, using D3 v7 and SVG rendering. The code loads data with `d3.csv`, maps dates via `d3.timeParse`, and draws lines with `d3.line`, alongside a legend and axis labels. The second part combines a bar chart for total sales with an overlaid line for average price, using a dual y-axis scale.

Loading thumbnail…

scatter

A scatter plot visualizes U.S. state population against their population rank for 2024, where each dot represents a state and rank 1 is the most populous. The chart uses D3 v7 with SVG rendering, employing `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.scaleSequential` with the Blue interpolator for color encoding. Hover tooltips via SVG `<title>` elements reveal state details. Data comes from `usa_states_population_2024.csv`.

Loading thumbnail…

bar charts

This example shows U.S. state populations for 2024 as a horizontal bar chart, sorted in descending order with the District of Columbia moved to the end. The bars encode population values using length, position, and color, with a purple-to-blue gradient fill and hover highlighting. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Gridlines and tooltips via SVG `<title>` elements are also included.

Loading thumbnail…

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three species. Points are colored by species, with hover interactions on the legend fading non-matching points. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs. Data is loaded via `d3.csv` from a remote CSV file, and the chart includes a title, subtitle, axis labels, and a source attribution.