Yamini Malikireddy

@Yaminimalikireddy20·13 public vizzes

Fork of HTML Starter

This example visualizes a student-club network with six nodes representing three students and three clubs, connected by eight links that show memberships. It uses D3 v7’s `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes. Students appear as blue circles, clubs as orange circles, with labels rendered as SVG text. Interactive drag functionality is implemented via D3’s `.drag()` handler, allowing users to reposition nodes while the simulation updates link and node positions on each tick.

Apr 13, 2026

Loading thumbnail…

Fork of HTML Starter

This example displays a top-down hierarchical tree chart representing an AI taxonomy, with a red root node, blue child nodes, and green leaf nodes arranged vertically. The visualization uses D3.js v7 and builds the tree structure with `d3.hierarchy` and the `d3.tree` layout algorithm, positioning the root at the top center. It renders the structure in an SVG canvas, drawing black links between nodes via `g.selectAll('line')` and labeling each node with its name using D3's text elements.

Apr 13, 2026

Loading thumbnail…

Fork of HTML Starter

This interactive world map visualizes population data for select countries, with a Mercator projection rendered as SVG paths. Users can click buttons to smoothly zoom into India or reset the view, using D3 v7 transitions and geo path bounds calculations. The map loads TopoJSON country geometries from the world-atlas package and merges them with a local population JSON file, coloring each country with a sequential blue scale based on its population value.

Apr 12, 2026

Loading thumbnail…

Fork of HTML Starter

This chart displays monthly expenses across three categories—food, transport, and entertainment—using a stacked area chart powered by D3 v7. The visualization loads data from a CSV file and renders SVG paths generated by `d3.area` and `d3.stack`. The y-axis scales linearly with `d3.scaleLinear`, while the x-axis uses `d3.scalePoint` for month categories. A legend maps category colors via `d3.scaleOrdinal`, and the chart includes axis labels, a title, and rotated x-axis tick labels using `d3.axisBottom` and `d3.axisLeft`.

Mar 28, 2026

Loading thumbnail…

Fork of HTML Starter

This multi-line chart tracks monthly spending across three categories—food, transport, and entertainment—using a CSV dataset. Rendered as SVG paths and circles, it employs the reusable `multiLineChart()` function with D3's `scalePoint`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding. Axis labels, a bold title, and an interactive legend clarify the trends. The chart is built with D3 v7, loading data via `d3.csv` and appending SVG elements.

Mar 28, 2026

Loading thumbnail…

Fork of HTML Starter

This pie chart visualizes expense categories and their corresponding values from a CSV dataset. Using D3.js v7, the chart generates colored slices with SVG paths via `d3.pie()` and `d3.arc()`, with white labels positioned at arc centroids. A legend constructed with SVG rectangles and text displays each category alongside a color scale based on `d3.scaleOrdinal` and `d3.schemeCategory10`. The data is loaded asynchronously with `d3.csv`.

Mar 28, 2026

Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between food and transport expenses across twelve months, with each circle representing a month’s spending on these two categories. The visualization is rendered as an SVG using D3.js v7, employing a reusable `scatterPlot()` function that leverages `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded from a local CSV file (`data.csv`) and parsed into numeric values, while the chart’s configurable parameters (x/y mappings, labels, dimensions) are set via fluent setter methods before rendering.

Mar 27, 2026

Loading thumbnail…

Fork of HTML Starter

This visualization shows monthly food and transport expenses as a scatter plot, with each circle representing a month and positioned by its food and transport costs. The reusable chart function `scatterPlot()` uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles with a steelblue fill. Data is loaded from an external CSV file via `d3.csv` and parsed as numbers. The chart includes labeled axes, a bold title, and configurable setters for dimensions and value accessors.

Mar 27, 2026

Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for 150 flowers. Each point is colored by species—setosa, versicolor, and virginica—using a D3 ordinal color scale with blue, orange, and green. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render ticks. A legend identifies the three species, and the SVG rendering includes labeled axes and semi-transparent circles.

Mar 8, 2026

Loading thumbnail…

Fork of HTML Starter

A bar chart displays product sales distribution across 100 products, with steelblue bars showing sales amounts for each product name. The visualization uses D3.js v7 to load CSV data via `d3.csv`, map products to an x-axis using `scaleBand`, and map sales values to a y-axis with `scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels, and section titles label the chart axes.

Mar 8, 2026

Loading thumbnail…

Fork of HTML Starter

This chart shows the distribution of product sales across 100 products, using a bar chart to display each product’s sales amount. The visualization uses D3.js v7 to load the `product_sales.csv` data, with `d3.scaleBand` for the horizontal product axis and `d3.scaleLinear` for the vertical sales axis. Bars are rendered as SVG rectangles in steelblue, with rotated labels on the x-axis for readability. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, and the chart includes axis labels for "Product Name" and "Sales Amount."

Mar 8, 2026

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes student test scores from a CSV file, with each student’s name on the x-axis and their numeric score on the y-axis ranging from 0 to 100. The visualization uses D3.js v7’s `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles filled with steel blue, while `d3.axisBottom` and `d3.axisLeft` render the axes. The code loads the data asynchronously via `d3.csv` and renders the chart entirely in SVG within a styled container.

Mar 8, 2026

Loading thumbnail…

Fork of HTML Starter

This dashboard displays AI model data through an interactive bar chart, with summary cards showing the total rows, minimum, average, and maximum values of the selected metric. Users can switch between Parameters (Billions) and Release Year via the metric selector. The visualization uses d3.scaleBand and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and animated transitions on bar height. Data loads from a CSV file via d3.csv. Tooltips appear on bar hover, and decorative circles and a legend enhance the SVG output.

Mar 1, 2026