S

sainitish1999

@sainitish1999·17 public vizzes

Loading thumbnail…

Network Graph

This interactive network graph visualizes relationships between programming languages and related topics, with nodes representing concepts and weighted links showing connections. The graph uses a force-directed layout implemented with `d3.layout.force()` in D3 v4, rendering nodes as orange circles with purple borders and labels as SVG text. It loads the node and link data from an external JSON file, where link weights determine stroke thickness via `Math.sqrt(d.weight)`. Users can drag nodes to reposition them, while the simulation updates positions on each tick.

Loading thumbnail…

Family Tree

This visualization displays a family tree for the Konidela family using a static hierarchical layout rendered as SVG circles and links. The data is embedded in the code as an array of child-parent pairs, converted into a hierarchy with `d3.stratify()` and positioned by `d3.tree()`. Nodes are color-coded by generation using a custom `setGeneration` function, and both the connecting paths and the circles animate into place on load via `transition().duration()`. Text labels appear on each node, with the entire graphic centered and styled for clarity.

Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Loading thumbnail…

USA Country Map

This USA country map visualizes the fifty states and their internal borders using the geoAlbersUsaTerritories projection from the `geo-albers-usa-territories` package, with geographic data loaded from the `us-atlas` TopoJSON source. The React-based app fetches the topology via `useEffect` and `d3.json`, then passes land features and interior state boundaries as props to a marks component. Rendering uses `d3.geoPath` to convert GeoJSON into SVG paths, with land areas filled teal and state boundaries stroked in black, while a CSS hover effect highlights individual states. The visualization is built with D3 v5, React 16, and TopoJSON.

Loading thumbnail…

Nitish D3 Scatter Plot ICE-7

This animated scatter plot visualizes the Iris dataset, displaying petal width against sepal length with points colored by species (red for setosa, orange for versicolor, purple for virginica). The chart uses D3 v6 scales and axes, with SVG circles representing data points. Every two seconds, a `setInterval` cycles through different column pairings, animating the chart through various attribute combinations including petal length and sepal width. The visualization includes labeled axes and custom styling.

Loading thumbnail…

nitish pie chart ICE - 7 Pie Chart

A pie chart visualizes the percentage contribution of individual people to a song, using a dataset of accident rates by country fetched from a GitHub gist. The chart renders as SVG slices with distinct colors, and a legend on the right maps each colored slice to the person’s name and their exact percentage value. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to load and compute the data, while the title and axis formatting rely on `d3.format`.

Loading thumbnail…

nitish line chart ice-7

This example shows a line chart of sales data over time, plotting yearly sales figures across a continuous time scale. The SVG rendering uses D3 v5 with `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and a `line` generator to draw the dark green path. Data is loaded as CSV from a GitHub gist, with dates parsed via `d3.timeParse` and sales values converted to numbers. Axes are styled with custom ticks, red labels, and grid lines.

Loading thumbnail…

Nitish area

This visualization displays a filled area chart showing Android user data over time, with the x-axis representing years and the y-axis representing user counts. The chart uses D3 version 6 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, shaded region beneath the data line. The y-axis uses a custom tick formatter to abbreviate large numbers, and grid lines are drawn using tick sizes. The dataset is loaded from a CSV file via `d3.csv` and rendered as an SVG with margins for axis labels and a title.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of fork of ICE-7

This example shows a line chart tracking sales data across specific years, with the x-axis representing time and the y-axis representing sales figures. The visualization uses D3 v5 to load CSV data from a GitHub gist, parse the dates, and render an SVG line path. It employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks with custom styling, and `line` to generate the orange stroke path. The code also includes labeled axes and grid lines through `tickSize` and `tickPadding` settings.

Loading thumbnail…

Fork of Fork of Fork of Fork of fork of ICE-7

This example displays a line chart of sales data over time. It uses a time-scaled x-axis for years and a linear y-axis for sales values. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleTime`, `d3.line`, and axis utilities. The SVG is rendered with a path element, and the axes are customized with brown tick lines and purple tick labels. Data is loaded from a GitHub gist CSV file using `d3.csv`.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

This pie chart visualizes the percentage contribution of each person to a song, using a dataset fetched from a GitHub-hosted CSV file. The chart displays ten differently colored slices within a circular SVG, each paired with a legend that identifies the person's name and their corresponding contribution percentage. The visualization is built with D3 version 5, using its `pie`, `arc`, and `scaleOrdinal` components to generate the chart geometry and color mapping, while a legend is constructed with SVG `rect` and `text` elements. The drawing is rendered entirely as SVG, with data loading handled through D3's `csv` parser.

Loading thumbnail…

ICE-6(sai nitish)

This horizontal bar chart displays the top 10 cosmetic products by revenue, using the d3.csv function to load data from a GitHub-hosted CSV file. It employs d3.scaleLinear and d3.scaleBand for the x and y axes, respectively, with d3.axisLeft and d3.axisBottom for tick marks. The chart customizes the x-axis tick format to replace 'G' with 'B' and removes default axis lines, while rectangles are colored red via CSS. The title and axis labels are added as SVG text elements. Data is rendered as an SVG graphic.

Loading thumbnail…

ICE-6(Sai Nitish): Rendering Marks and Channels with React & D3

This example displays the top 20 countries by gold rates, using horizontal bars where length encodes the population value and the y-axis lists country names. Built with React and D3, it loads CSV data via `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles for bars plus axis ticks and labels. The visualization is rendered entirely as SVG elements, with data fetched from a GitHub gist and displayed in a React component using `ReactDOM.render`.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart, with each bar’s length proportional to population. The chart is rendered as SVG using React components, with scales from d3.scaleBand and d3.scaleLinear handling positioning. Axes are custom-built in React, and tooltips are provided via SVG `<title>` elements. Data comes from the UN World Population Prospects 2019, loaded and parsed with d3.csv.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the ten most populous countries, using horizontal bars sorted by population. The React application loads data from the United Nations World Population Prospects 2019 via a CSV file, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear. Axes are generated using d3.ticks and custom React components, with population values formatted using d3.format. The chart includes axis labels, tick marks, and tooltips, all styled with a Poppins font and a teal color scheme.

Loading thumbnail…

ICE-6(Sai Nitish): Rendering Marks and Channels with React & D3

This visualization presents the top 10 cosmetic products ranked by revenue, using a horizontal bar chart rendered as SVG. The code imports D3 v7 and React, with data loaded from a CSV via `d3.csv` and scaled using `scaleLinear` and `scaleBand`. Axes are generated with `axisLeft` and `axisBottom`, while the chart title and axis label are added as SVG text elements. Although React is loaded in the HTML, the rendering is done imperatively with D3’s selection API.

Loading thumbnail…

ICE 5

This example displays a simple text-based summary of a nutrition dataset, presenting the file size, row count, and column count in a styled HTML page. It uses D3 v5’s `d3.csv` to fetch data from a GitHub-hosted CSV file, then computes the size with `d3.csvFormat(data).length`, and writes the output into a `<pre>` element. The page also includes a static SVG image and relies on basic CSS for layout and typography, with React as the underlying framework.