navyasrimeka9@gmail.com

Fork of ICRISAT District Level Data - Rice Production BarChart

Fork of Crop_Yield Data

Fork of Crop_Yield - Piechart

Fork of Social_Network_graph_ICE-8

This force-directed network graph visualizes a small social network of five individuals, with weighted links indicating connection strength. The graph uses D3.js v4 with the legacy `d3.layout.force` API, where nodes are draggable circles and lines represent edges with stroke-width proportional to link weight. Data loads from a local `graph.json` file, and the SVG rendering updates positions on each simulation tick, displaying node names as text labels. The visualization applies custom styling to nodes, links, and text within the SVG canvas.

Fork of ICE - 8 Family Tree

A family tree displays ten people connected from a single ancestor across multiple generations, with each person represented as a colored circle and labeled with their name. The nodes and connecting paths animate into place, and circle colors vary by tree depth using `d3.scaleOrdinal`. Built with D3 v6, the code uses `d3.stratify()` to convert flat parent-child data into a hierarchy, then `d3.tree()` to compute node positions. The SVG is rendered with transitions on path elements and circles, applying a hardcoded dataset of family relationships.

Fork of World_Map_ICE_8

This example renders a world map using the Natural Earth projection. Country borders are shown as yellow stroke lines, with landmasses filled in green on a white sphere with graticules drawn in black. The visualization uses D3’s `geoNaturalEarth1` and `geoPath` for geographic projections, and topojson’s `feature` and `mesh` to process world-atlas data from unpkg. React manages the SVG output, with marks defined in a dedicated `Marks.js` component.

Norway Map ICE8

This example displays Norway by filtering the "Norway" feature from a Europe GeoJSON dataset and rendering it as a green map with a yellow stroke on an SVG canvas. It sets up a 600 by 500 pixel SVG and uses the `d3.geoMercator` projection with a custom center, scale, and translation, alongside `d3.geoPath` to generate the path data. The code fetches the remote GeoJSON via `d3.json`, selects the matching feature, and appends a path element for each result. It uses React, D3 v5, and topojson libraries in an HTML page.

Fork of Mexico map

A choropleth-style SVG map of Mexico renders geographic region boundaries using D3's `geoMercator` projection and `geoPath`. The map displays each state as a green path with yellow strokes, overlaid with blue graticule lines. Geographic data loads from a TopoJSON file via D3's `json` function and `topojson.feature`, while React manages the component state. The visualization also imports multiple alternative projections (`geoEqualEarth`, `geoNaturalEarth1`) though only Mercator is applied.

Fork of 3D Scatter Plot

This is a 3D scatter plot that visualizes gift-packing data, comparing actual gift dimensions against the packing dimensions. Using the Plotly.js library within a React environment, the visualization displays two distinct trace groups—one plotting actual gift length and the other actual gift width against the packing length and width. The code loads its dataset via D3’s `d3.csv` method from a GitHub gist, then passes the parsed rows to Plotly’s `Plotly.newPlot` to render the interactive scatter markers.

Fork of 3D Bar Chart using D3.js

This example shows seasonal average rainfall across multiple years as a 3D bar chart. It uses the d3-x3d library’s `barChartMultiSeries` component to render the bars in an X3DOM scene. The code loads CSV data, parses each year into winter, spring, summer, and autumn values, and binds that data to the chart container. The visualization relies on D3 v5 for data processing and selection, with d3-3d and X3DOM providing the 3D rendering.

Fork of Bonus ICE - 3D Bar chart

This example presents a 3D vertical bar chart of average rainfall per season for the years 2010 through 2013, with distinct series for winter, spring, summer, and autumn. The chart uses the Highcharts library with the highcharts-3d module, enabling an angled perspective through configurable alpha and beta rotation angles. Columns are stacked and grouped along the depth axis, with categories on the x-axis, rainfall values on the y-axis, and a z-axis labeled “Various Sources.” Data is hardcoded as arrays of coordinate-value pairs within each series definition.

Year wise rainfall analysis

This area chart visualizes average annual rainfall in millimeters across different years, with the x-axis representing years and the y-axis showing rainfall amounts. The visualization uses a purple gradient fill beneath the line to emphasize the trend over time. Built with d3.v5, the code leverages `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` to generate the SVG rendering. Data is loaded from a CSV file via `csv()` and parsed with `new Date()` for the year values. The chart includes labeled axes and a title, styled with custom CSS classes.

yearwise average rainfall

This line chart displays yearly average rainfall in millimeters, with the x-axis representing the year and the y-axis showing average rainfall. The visualization uses purple, thick line segments to connect data points, providing a clear view of rainfall trends over time. Built with D3 v5, the code utilizes `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a basis curve to render the SVG path. Data is loaded from a GitHub gist, and axis labels and a chart title are added for context.

ICE7-reusable scatter plot

This visualization displays the Iris dataset as a scatter plot, animating through different attribute combinations on the x-axis while showing petal width and sepal length on the y-axis. Circles represent individual data points, colored by species with a legend for Setosa, Versicolor, and Virginica. Built with React and D3, the code uses `csv` loading, `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` to render SVG elements. A `setInterval` timer cycles through petal_width, sepal_width, petal_length, and sepal_length for dynamic x-axis updates, with custom styling from the Share Tech font.

Fork of Pie Chart

This example displays the cost of living for the top 10 countries using a pie chart, with each slice colored and accompanied by a legend listing country names and dollar amounts. The visualization is built with D3 v5 in a React framework, rendering SVG elements via `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, while loading CSV data from a GitHub gist. Data is sorted and sliced to show only the top 10 values, with hover interactions logging slice data to the console.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, dynamically cycling through different feature pairings on the x-axis every two seconds. Built with D3, the visualization uses a reusable `scatterPlot` component to render SVG circles and axes, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The plot updates in place, animating between four different columns of the dataset while maintaining consistent scaling and margins.

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes average rainfall against average temperature, with each point colored by year (2010-2018) using a color mapping function. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, `scaleLinear` for x and y axes, and `axisLeft`/`axisBottom` to render the axes. Points are drawn as SVG circles with a fixed radius of 5, positioned via the `scaleLinear` ranges, and the chart includes labeled axes for both variables. The rendering is done through direct SVG manipulation in a React environment.

ICE-6 Bar Graph

A horizontal bar graph displays annual rainfall totals for twelve districts in Arunachal Pradesh, sourced from a CSV file loaded via `d3.csv`. The visualization uses React’s `useState` and `useEffect` hooks to fetch and filter data, with D3’s `scaleBand` and `scaleLinear` mapping district names and rainfall values to SVG rectangles. The code manually renders grid lines with `xScale.ticks()` and labels, avoiding D3 axes, while `d3.max` determines the domain. The graph updates reactively as the data loads, showing a loading message initially.

ICE 5

This example displays a company sales dataset loaded from a CSV file via D3’s `d3.csv` method, reporting the file’s size, row count, and column count in a styled HTML element. Beneath this, a confetti animation runs on a canvas using the JSConfetti library, triggered by calling `jsConfetti.addConfetti()`. The page also embeds a Fiat 500 image and a YouTube tutorial link, with overall styling set through CSS. The code uses D3 v7 for data handling and formats the output using `d3.csvFormat` to calculate byte length.

ICE 5

This example displays a text-based summary of a CSV dataset, showing the file size in kilobytes, row count, and column count. It loads data from a GitHub-hosted CSV file using `d3.csv`, then computes the formatted output size with `d3.csvFormat` and reads `data.length` and `data.columns.length` to report the statistics. The page uses a custom background image from a GitHub gist, styled with CSS, and outputs the results into a `<pre>` element via `document.getElementById`. The code also links to the original Kaggle company sales dataset.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense, colorful SVG composition of overlapping Buddha-like silhouettes, stars, diamonds, and flower shapes fills the viewport against a sky-blue background. The code generates hundreds of semi-transparent circles and polygons using nested `Array.map` loops in React, positioning elements with `Math.random()` and coloring them via dynamic `rgb()` values. The central Buddha path is rendered as an SVG `<path>` element with a transform applied, while the layout relies on React’s `ReactDOM` render method and inline JSX styling.