1

19h61a05c9@cvsr.ac.in

@aviii5·41 public vizzes

Loading thumbnail…

third

This interactive network visualizes ecosystem relationships across continents and species from an embedded CSV dataset. A root node branches to six continents, each connecting to representative species, with node size encoding average weight and color indicating hierarchy level. Users can drag nodes to reposition the force-directed layout. Built with D3 v7, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to compute layout, while attaching tooltips and drag handlers for exploration. SVG renders all elements, with a legend distinguishing root, continent, and species nodes.

Loading thumbnail…

third

This interactive network visualizes ecosystem relationships across continents and species from an embedded CSV dataset. A root node branches to six continents, each connecting to representative species, with node size encoding average weight and color indicating hierarchy level. Users can drag nodes to reposition the force-directed layout. Built with D3 v7, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to compute layout, while attaching tooltips and drag handlers for exploration. SVG renders all elements, with a legend distinguishing root, continent, and species nodes.

Loading thumbnail…

third

This interactive D3.js network graph maps an ecosystem hierarchy, showing continents connected to their resident species, with node size encoding average weight and color distinguishing root, continent, and species levels. Built with d3.v7, the visualization uses d3.forceSimulation with link, charge, center, and collide forces for physics-based layout, while d3.scaleSqrt and d3.scaleOrdinal manage proportional sizing and color coding. Users can drag nodes to reposition them and hover over elements to inspect species details like lifespan, habitat, and diet, with data parsed from CSV via d3.csvParse.

Loading thumbnail…

second

This tree visualization displays a hierarchical dataset of cities organized by continent and country, with population values shown on hover. It loads city data from a CSV URL with automatic fallback to built-in sample data. The implementation uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to compute and draw the layout, then appends SVG circles and text labels with color-coding by tree depth.

Loading thumbnail…

second

This tree visualization displays a hierarchical dataset of cities organized by continent and country, with population values shown on hover. It loads city data from a CSV URL with automatic fallback to built-in sample data. The implementation uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to compute and draw the layout, then appends SVG circles and text labels with color-coding by tree depth.

Loading thumbnail…

second

An interactive hierarchical tree visualization displays world population data organized by continent, country, and city, with color-coded nodes indicating each level. Hovering over city nodes reveals population details through a tooltip. The visualization uses D3.js version 7 with the `d3.hierarchy` and `d3.tree` layouts, `d3.linkVertical` for edges, and SVG rendering. It loads data from a CSV URL via `d3.csv` with fallback to embedded sample data, and includes validation and error handling.

Loading thumbnail…

second

This interactive D3.js v7 tree visualization displays the hierarchical relationship between continents, countries, and cities based on population data. It uses a vertical tree layout with color-coded nodes for each level (root, continent, country, city) and interactive tooltips that show population details on hover. The visualization is built with D3's `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` APIs, rendering as SVG, and loads sample data from a JavaScript array with an optional CSV URL fallback.

Loading thumbnail…

second

This interactive tree visualization displays world population data organized hierarchically from continent to country to city. Using D3.js v7, it loads a CSV file with columns for Continent, Country, City, and Population, then constructs a hierarchical layout with `d3.tree()` and `d3.hierarchy()`. Nodes are colored by depth level using `d3.scaleOrdinal()`, with circles representing cities and larger nodes for parents. Hovering reveals tooltips showing city population details. The SVG renders vertical links via `d3.linkVertical()` and scales responsively through a viewBox.

Loading thumbnail…

firstt

This interactive world map visualizes automobile metrics for 2024, showing both total vehicles and EV sales by country. Toggle buttons switch the choropleth color scale between these two metrics, while circle size represents EV sales volume and circle color encodes average car price. The visualization uses D3 v7 with d3.geoPath and topojson-client to render world topography, with SVG elements providing animated transitions when switching between metrics. A legend dynamically updates to reflect the current color scale, and tooltips provide detailed country-level data on hover.

Loading thumbnail…

firstt

This interactive world map visualizes 2024 automobile metrics across ten major markets, using D3.js v7 with SVG rendering. Users toggle between choropleth coloring by total vehicles or EV sales, while circle size encodes EV sales and circle color represents average car price. Hovering reveals detailed metrics via tooltip. The visualization leverages d3.geoPath with world-atlas TopoJSON data, d3.csv parsing, and dynamic legend updates with transition animations.

Loading thumbnail…

Fork of Fork of fourth

This area chart displays monthly sales growth from January 2021 through January 2025, showing a steady upward trend in units sold. The D3.js v6 visualization uses `d3.area()` with `d3.curveMonotoneX` to render a smooth filled path, with lightsteelblue fill and steelblue stroke. The code loads data from a CSV file via `d3.csv()`, parses dates with `d3.timeParse()`, and constructs time and linear scales using `d3.scaleTime()` and `d3.scaleLinear()`. Grid lines are added through custom axis configurations, while rotated month labels and axis titles provide context. The SVG output includes a white background, rounded corners, and a subtle shadow effect.

Loading thumbnail…

Fork of fourth

This area chart visualizes monthly sales growth from January 2021 through January 2025, with each data point from the `sales_area.csv` file showing a steady upward trend. The visualization uses D3.js v6, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveMonotoneX` to render a smooth, filled area path in SVG. The chart includes rotated x-axis labels, grid lines, and axis labels, with the area fill set to `lightsteelblue` with a `steelblue` stroke.

Loading thumbnail…

fourth

This area chart displays monthly sales growth from 2021 to 2025, with a monotonically increasing trend from 420 to 1,320 units. The visualization loads data from a CSV file, parses dates with `d3.timeParse`, and renders the area using D3's `d3.area` generator with a monotone X curve. It includes formatted axes, rotated month labels, grid lines, and clear axis labels for readability. The SVG output is styled with a light background and a shaded area against a steel-blue stroke.

Loading thumbnail…

Fork of Fork of third

This line chart visualizes monthly sales growth from January 2021 to January 2025 using a smooth monotone curve. The SVG rendering relies on d3.scaleTime, d3.scaleLinear, d3.line with curveMonotoneX, and d3.axisBottom/axisLeft, with data loaded via d3.csv from sales_trend.csv. Orange circles mark individual data points, while labeled axes and a title clarify the upward trend.

Loading thumbnail…

Fork of third

This line chart visualizes monthly sales growth from January 2021 through January 2025, showing a steady upward trend from 420 to 1,195 units. The chart is rendered as an SVG using D3.js v6, with a monotone-smoothed blue line and orange circular markers at each data point. The time-series data is loaded from a CSV file and parsed using `d3.timeParse`, with scales set via `d3.scaleTime` and `d3.scaleLinear`, and axes drawn using `d3.axisBottom` and `d3.axisLeft`. Rotated month labels and custom titles complete the visualization.

Loading thumbnail…

third

This example shows the monthly sales trend from 2021 to 2025 as a smooth line chart. The chart displays a single steelblue line with orange data points, with rotated month labels on the x-axis and a linear y-axis. Built with D3 v6, the code uses `d3.csv` to load `sales_trend.csv`, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with `d3.curveMonotoneX` for the smoothed path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The SVG rendering includes a title and axis labels.

Loading thumbnail…

Fork of Fork of second

This pie chart visualizes sales distribution across 30+ product categories using CSV data loaded via `d3.csv`. It renders SVG arcs generated by `d3.pie()` and `d3.arc()`, with a Tableau10 color scale via `d3.scaleOrdinal`. Labels are positioned along a separate `labelArc` using `centroid` calculations, while a legend lists categories with color swatches. Built with d3 v6, the chart includes interactive tooltips via appended `<title>` elements.

Loading thumbnail…

Fork of second

This pie chart visualizes sales distribution across 43 product categories, with each slice sized proportionally to its sales value from a CSV file. The visualization uses D3.js v6 with the `d3.pie()` and `d3.arc()` generators to compute slice angles and paths, rendered as SVG elements styled with a Tableau10 color scale. Labels are positioned at arc centroids using `d3.arc().centroid()`, while a legend on the right maps colors to categories. Data from `sales_data.csv` is loaded asynchronously via `d3.csv()`.

Loading thumbnail…

second

This pie chart visualizes sales distribution across 27 product categories, with each slice sized by numeric sales values loaded from a CSV file. The chart renders as an SVG using D3.js v6, employing `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths. A Tableau10 color scale distinguishes categories, and each slice includes a text label with a tooltip showing the exact sales figure. A legend on the right side maps each color to its category, while slices are ordered by the original data order due to `.sort(null)`.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of reusable scatter plot

This example presents a reusable D3.js (v6) scatter plot for visualizing the relationship between horsepower and miles per gallon in a car dataset. The scatter plot dynamically alternates between the two axes every two seconds, flipping which variable appears on the x-axis versus the y-axis. Implemented with a modular controller and a configurable scatter plot function, the chart reads data from a CSV file and renders as an SVG. The animation effectively demonstrates how the same data points reveal different correlation patterns depending on axis assignments.

Loading thumbnail…

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

Loading thumbnail…

Fork of Fork of Fork of reusable scatter plot

This animated scatter plot displays the relationship between horsepower and miles per gallon across 20 car models from a CSV dataset, alternately swapping the x- and y-axes every two seconds. Built as a reusable D3.js v6 module, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render SVG circles with tooltips. A `setInterval` timer triggers re-rendering of the chart with swapped accessor functions, while axis labels update dynamically based on the current orientation.

Loading thumbnail…

Fork of Fork of reusable scatter plot

This reusable scatter plot visualizes the relationship between horsepower and miles per gallon for 20 cars, with a 2-second interval animation that swaps the axes. Built with D3 v6, the chart uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles with tooltips, while a reusable `scatterPlot()` factory function manages the configurable width, height, margin, and accessor functions. The animation is driven by `setInterval` reassigning the x and y value accessors and re-rendering via `.call(plot)`.

Loading thumbnail…

Fork of reusable scatter plot

A reusable scatter plot cycles every two seconds between horsepower and miles-per-gallon axes for a 20-row car dataset. Built with D3 v6, it uses a reusable chart function with getter-setters for width, margin, and accessor functions. The SVG renders axes, labels, and steelblue circles with hover tooltips via appended title elements, while a setInterval reassigns xValue and yValue to flip the variables. The chart removes and recreates the SVG on each update, producing an animated axis-switching visualization.

Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

Loading thumbnail…

Fork of combines

This example shows customer behavior data from a CSV file through two interactive charts. The first is a multi-series line chart displaying annual income, spending score, and satisfaction rating across customer IDs. The second combines a bar chart of store visits with a line chart of online purchases, using dual y-axes. Both visualizations are built with Plotly.js, using its `Plotly.newPlot` method, and load data through `Plotly.d3.csv`.

Loading thumbnail…

combines

This visualization presents customer data from a CSV file through two Plotly charts. A multi-series line chart displays trends in annual income, spending score, and satisfaction rating across customer IDs. A combined bar and line chart compares store visits (bars) against online purchases (line) using dual y-axes. The code uses the Plotly.js library, loading data via `Plotly.d3.csv` and rendering charts with `Plotly.newPlot`.

Loading thumbnail…

Fork of Fork of Fork of Fork of multiseries line chart

This example displays three months of daily sales data for three products as a multi-series line chart, then presents advertising budget as a bar chart with a profit margin line overlaid on a secondary y-axis. The code uses `d3.scaleBand`, `d3.scaleTime`, `d3.line`, and `d3.axisBottom` for the D3 v7 SVG visualizations. Data from the CSV file is parsed with `d3.csv` and `d3.timeParse`, and the charts include gridlines, legends, and annotations highlighting maximum values.

Loading thumbnail…

Fork of Fork of Fork of multiseries line chart

This dashboard presents two linked views of 2025 sales data for three products. A multi-series line chart, built with `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, tracks the sales of Products A, B, and C, with a monotone curve. A second combo chart combines gray bars for advertising spend, scaled on the left axis, with a black line for profit margin, scaled on the right. Both visuals use SVG rendering via the d3 v7 library, loading data from a CSV file.

Loading thumbnail…

Fork of Fork of multiseries line chart

This visualization presents sales performance data for three products (A, B, and C) over time, along with a combined bar and line chart comparing advertising budget against profit margin. The multi-series line chart uses d3.scaleTime and d3.line with d3.curveMonotoneX to display sales trends, while the combo chart employs d3.scaleBand and d3.scaleLinear for bars and lines. Data comes from a CSV file parsed with d3.csv, and both charts render as SVG with axis labels, legends, and annotations highlighting peak values.

Loading thumbnail…

Fork of multiseries line chart

This visualization presents two complementary charts analyzing daily sales performance data from a CSV file. The first chart displays three product lines (A, B, C) as colored multiseries lines over the first half of 2025, with gridlines and a legend. The second chart combines gray bars for advertising budget on a left axis with a black trend line for profit margin on a right axis. Both charts use SVG rendering via D3 v7, with scales including `d3.scaleBand`, `d3.scaleTime`, and `d3.scaleLinear`, smooth curves through `d3.curveMonotoneX`, and annotations highlighting maximum values.

Loading thumbnail…

multiseries line chart

This multi-series line chart shows daily sales for Products A, B, and C over the first several months of 2025, with each product’s trend drawn as a separate colored line for comparison. A monetary annotation highlights the peak for Product A. A second chart uses a combo format, rendering daily advertising budget as gray bars and profit margin as a black monotone curve, with a dual y-axis for the two distinct scales. The code uses d3-based functions like `d3.timeParse`, `d3.scaleTime`, `d3.line` with `curveMonotoneX`, and `d3.axisBottom`, with data loaded from a CSV file via `d3.csv`. Both charts are rendered as SVG elements.

Loading thumbnail…

Fork of Scatter plot

A scatter plot displays 100 customers by annual income on the x-axis and spending score on the y-axis, with each dot colored by gender using a Tableau10 ordinal scale. Hovering over a point reveals a tooltip with customer details, including age, purchase frequency, and satisfaction rating. The visualization loads a tab-separated dataset via `d3.tsv`, renders axes with `d3.axisBottom` and `d3.axisLeft`, and uses `d3.scaleLinear` for both dimensions within an SVG canvas.

Loading thumbnail…

Scatter plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between annual income and spending score, with each dot colored by gender. The visualization uses D3.js v7 to render SVG circles, with a tooltip that appears on mouseover to display detailed customer information like age, purchase frequency, and satisfaction rating. The chart includes axis labels, a title, and a legend, with scales computed via `d3.scaleLinear` and `d3.extent` for data domains.

Loading thumbnail…

Scatter plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between annual income and spending score, with each dot colored by gender. The visualization uses D3.js v7 to render SVG circles, with a tooltip that appears on mouseover to display detailed customer information like age, purchase frequency, and satisfaction rating. The chart includes axis labels, a title, and a legend, with scales computed via `d3.scaleLinear` and `d3.extent` for data domains.

Loading thumbnail…

Scattet plot

This chart displays the relationship between sepal length and petal length for 100 iris flower samples, with each dot colored by species using a Tableau10 ordinal color scale. It reads the dataset from a CSV file using `d3.csv` and renders points as circles in an SVG canvas. The visualization includes axes, tick marks, and labels, and features interactive tooltips that appear on mouseover events. D3's extent and scaleLinear functions manage the continuous data mapping for both axes.

Loading thumbnail…

BAR CHART CREATION

This bar chart displays sales values for 50 products, with each product’s value encoded by the height of a horizontal bar. The visualization uses D3.js v7 to load data from a CSV file via `d3.csv`, then renders bars as SVG rects with scaling through `d3.scaleBand` and `d3.scaleLinear`. Hover interactions highlight bars in orange and trigger a tooltip showing the product name and value. The chart includes rotated x-axis labels, a title, and axis labels for Products and Sales Value.

Loading thumbnail…

BAR CHART CREATION

This bar chart displays sales values for 50 products, with each product’s value encoded by the height of a horizontal bar. The visualization uses D3.js v7 to load data from a CSV file via `d3.csv`, then renders bars as SVG rects with scaling through `d3.scaleBand` and `d3.scaleLinear`. Hover interactions highlight bars in orange and trigger a tooltip showing the product name and value. The chart includes rotated x-axis labels, a title, and axis labels for Products and Sales Value.

Loading thumbnail…

Fork of bar D3 Starter

This bar chart visualizes product sales values from a CSV dataset, with each bar representing a product and its height corresponding to the sales figure. The chart includes axis labels, a title, and interactive hover effects that display a tooltip and change the bar’s color. Built with D3.v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, all rendered as SVG within a styled HTML page.

Loading thumbnail…

bar D3 Starter

This interactive bar chart displays sales values for 49 products (Product A through Product AW), ranging from 124 to 198, loaded from a CSV file using d3.csv. Built with D3.js v7, it renders SVG rectangles scaled with d3.scaleBand and d3.scaleLinear. Hovering triggers a tooltip and changes bar fill to orange, while rotated axis labels and labeled axes aid readability.

Loading thumbnail…

cars data sales

This example displays a static HTML table of 40 car records, showing attributes such as brand, model, year, color, engine size, fuel consumption in liters per 100 km, price, and country of origin. The page uses plain JavaScript to populate the table body from an inline array of objects, with no external libraries. A green header row and zebra-striped rows improve readability. The data rendering relies on standard DOM manipulation via `document.getElementById` and `innerHTML` within a simple `<script>` block.