vijaysaichigullapally1@gmail.com

Fork of React & D3 Starter- ICE_8_1.2(country)

This choropleth map shows estimated tourist visits per U.S. state for 2024, using a red color scale from light to dark red to indicate increasing visitor counts. The visualization renders a U.S. map with state boundaries defined by white strokes, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to generate SVG paths. A hover tooltip displays state-specific data, while a legend and caption provide context. The map is built with D3.js v7, pulling TopoJSON geographic data via the topojson-client library, with a fixed sample dataset embedded in the code.

Nov 9, 2025

Fork of React & D3 Starter- ICE_8_2_network

This network visualization maps relationships between six music genres and six artists using a force-directed layout. Orange artist nodes connect to blue genre nodes through nine links, with additional cross-genre connections showing influences beyond primary pairings. The code uses d3.forceSimulation with link, charge, center, and collision forces to position SVG elements, rendering labeled circles as nodes and lines as edges.

Fork of React & D3 Starter- ICE_8_2_tree

This interactive tree diagram maps programming paradigms, languages, and associated frameworks across four hierarchical levels. Built with React and D3.js v7, it renders an SVG visualization where nodes are positioned and connected by curved links. The chart displays the relationships from a root node representing programming languages, branching into categories like Object-Oriented and Functional, then to specific languages such as Java or Haskell, and finally to example frameworks. The code uses the D3 `stratify` function to convert flat parent-child data into a tree structure.

Fork of React & D3 Starter - ICE_8_1

A choropleth map of world GDP in trillions of USD, colored on a red scale from light to bright red, with country boundaries in white and a graticule overlay. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the SVG, with TopoJSON data for country shapes. A hover tooltip displays country-specific GDP values from a hardcoded dataset.

Fork of React & D3 Starter - ice 8 - 1

This choropleth map shows the number of internet users by country in millions for 2022, using a blue color scale to represent the range from small (e.g., Switzerland, Australia) to large values (e.g., China, India). It renders a Natural Earth projection of the world with a graticule layer and a hover tooltip, built with D3 v7’s `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code assigns country-specific values via an ISO3 lookup table mapped from TopoJSON’s numeric IDs.

Fork of D3 Starter - vijq3

This area chart shows the relationship between study hours and exam scores for 120 students. The filled region, rendered using the `d3.area()` generator with a monotone-x curve, emphasizes the magnitude of exam scores as study hours increase. Individual data points appear as blue circles with interactive tooltips. Data from the CSV file is plotted using `d3.scaleLinear` for both axes and the SVG rendering framework.

Fork of D3 Starter - vijq2(line chart)

A line chart visualizes the relationship between study hours and exam scores for a dataset of 120 students. The chart plots study hours along the x-axis and exam scores along the y-axis, with individual data points rendered as blue circles and a smooth monotone curve connecting them. The visualization uses the D3.js v7 library, specifically the `d3.line()` generator with the `curveMonotoneX` curve option, and renders as an SVG. Interactive tooltips display the exact values for each point on hover, implemented via mouse event listeners. The data, containing study hours, exam scores, and letter grade categories, is loaded from a CSV file using `d3.csv()`.

Fork of D3 Starter - vijq2(pie chart)

A pie chart visualizes the total exam score contribution for each grade category (A–D) using data from a 120-row CSV file. The D3.js v7 code loads the data, aggregates scores by category with `d3.rollup` and `d3.sum`, and renders slices via the `d3.pie` and `d3.arc` generators. Interactive tooltips appear on hover, displaying each category's total and letter label. A legend maps colors from `d3.scaleOrdinal` with the Tableau10 scheme, and the SVG output is white-stroked.

Fork of Reusable D3 Scatter Plot - vijq1

This example presents a reusable scatter plot that visualizes the relationship between study hours and exam scores, with points colored by four categories (A through D). Built with D3 v7, the chart uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeSet2` for categorical coloring, and `axisLeft`/`axisBottom` for labeling. A legend is rendered manually, while the `scatterPlot` module follows the “Towards Reusable Charts” pattern with chainable setters. The data comes from an external CSV file, parsed with numeric conversion before rendering as SVG circles.

Fork of Reusable D3 Scatter Plot - q1

A reusable scatter plot shows the relationship between study hours and exam scores across four categories (A–D), with points colored by category and a legend identifying each group. The chart uses D3.js v6 with the reusable chart pattern, implementing scales via `scaleLinear` and `scaleOrdinal`, axes through `axisLeft` and `axisBottom`, and `schemeSet2` for colors. Data is loaded from a CSV file using `d3.csv`, and the plot is rendered as SVG with circles positioned using the configured x and y accessor functions.

Fork of D3 Starter - ice 7 - scatter plot

This scatter plot visualizes the relationship between study hours and exam scores for 120 students, with each point colored by category (A–D) and a legend mapping colors to these groups. The D3 v7 code loads data from a CSV file, converts the numeric columns, and uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart. Axes are labeled, and the plot uses a built-in color scheme (`d3.schemeSet2`).

Fork of D3 Starter 2

A scatter plot visualizes the relationship between study hours and exam scores for 120 student records from a CSV file. Each point is colored by student group (A, B, C, or D) using an ordinal color scale with the Tableau10 scheme. The D3 v7 code loads the external dataset via `d3.csv`, converts string values to numbers, and maps data to SVG circles with linear `d3.scaleLinear` axes. Interactive tooltips appear on `mousemove`, displaying group, study hours, and exam score.

Fork of Fork of D3 Starter 3.1

This example presents two SVG charts built with D3.js v7 to visualize a multi-value time-series dataset containing daily sales, profit, and expenses. Chart 1 is a multi-series line chart with three colored lines and an interactive tooltip, while Chart 2 combines bars (sales) with an overlaid line (profit) on a shared axis. Both charts use `d3.csv`, `d3.scaleUtc`, `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for rendering. The data is loaded from a local CSV file.

Fork of D3 Starter 3

This multi-series line chart shows the daily trends of sales, profit, and expenses over the first half of 2024, applying D3’s `scaleLinear` and `scaleUtc` to map the data. It renders three monotone curves via `d3.line()` and `d3.curveMonotoneX`, using ordinal colors for each series and displaying interactive tooltips on hover. The visualization includes rotated monthly axis ticks, a legend, and axis labels, all drawn as SVG elements.

Fork of D3 Starter

This bar chart visualizes 150 product values across four groups (A–D), sorted descending to compare item magnitudes. Built with D3 v7, it uses `d3.csv` to load `ice6_products_150.csv`, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeTableau10` for group colors. Hovering reveals a tooltip with product, value, and group details; bars are SVG `<rect>` elements with a hover transition, and the chart includes rotated x-axis labels and a legend.

Fork of HTML Starter

This D3.js v7 example summarizes a remote Retail Sales CSV dataset and visualizes the first ten records as a bar chart using `d3.scaleBand` and `d3.scaleLinear`. The page also renders two decorative SVG illustrations—a car and a smartphone—drawn with primitive shapes like `rect` and `circle`. The dashboard displays dataset statistics in a styled summary box and uses `d3.axisBottom` and `d3.axisLeft` for chart axes.

Oct 4, 2025