anushatod

@anushatod·12 public vizzes

ICE-8 Social Network Graph Anusha

This network graph visualizes friendships among eight people, with nodes connected by green lines and arrow markers indicating the direction of the relationship. The graph uses a physics-based layout, where forces of attraction, repulsion, and collision position the nodes, and users can drag nodes to rearrange the layout. It is built with D3 v6, loading data from a JSON file and using `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` APIs. Hovering a node highlights it with a thicker green stroke.

Apr 3, 2022

Loading thumbnail…

ICE 8 - Family Tree Anusha

This interactive family tree displays the descendants of Simon in a hierarchical layout. The visualization uses color-coded nodes, with black for the root, red for direct children, and green for grandchildren, connected by curved paths. Built with D3.js v5, it employs the `d3.stratify` and `d3.tree` APIs to compute node positions and links from an array of parent-child pairs. The SVG rendering includes labeled text for each family member, with the graph sized at 800 by 650 pixels.

Apr 3, 2022

Loading thumbnail…

USA Map with TopoJson Anusha

This example displays a map of the United States by rendering the nation’s outline and state boundaries as solid blue shapes on a large SVG canvas. It loads geographic data from the us-atlas TopoJSON file and converts it using the topojson.object API. The map is drawn with D3.js v3, using d3.geo.path with a Mercator projection to generate the SVG path data. The page relies on the d3.v3 library and topojson.v0 for data processing.

Apr 3, 2022

Loading thumbnail…

World Map with the world Topojson data

This example displays a world map using the Mercator projection, with each country rendered as a filled SVG path along a light green background and dark green borders. The map is built with the d3.geo.path API, which generates path data from the TopoJSON geometry of the world-atlas dataset. The code loads geographic data from a JSON file and uses topojson.object to extract country boundaries before injecting them into SVG path elements for visualization.

Apr 3, 2022

Loading thumbnail…

ICE-7 Reusable Scatter Plot Anusha

This example shows an animated scatter plot of the Iris dataset, cycling through four different flower measurements (petal width, sepal width, petal length, sepal length) every two seconds. Each point is colored by species: black for setosa, red for versicolor, and purple for virginica. Using D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` function, it updates the x-axis domain and circle positions via `setInterval`. The SVG renders full-screen with a dark background and white axes, loading data from a remote CSV URI.

Mar 28, 2022

Loading thumbnail…

Area Chart ICE 7 Anusha

This area chart visualizes the number of passing students over time, with a green filled region beneath a line tracing the trend across passing years. The chart uses D3.js v4 to fetch CSV data from a GitHub gist, scale time and linear axes, and render SVG paths. Axis labels are added via SVG text elements, and the chart is styled using custom CSS classes. The visualization emphasizes the distribution of candidate counts per year through the area fill.

Mar 28, 2022

Loading thumbnail…

ICE-7 Line Chart

This line chart depicts the number of passing candidates per year, showing overall trends in graduation counts over time. The visualization uses D3.js v4 with SVG rendering, where a red line is drawn using the `d3.line` generator. Data is loaded from a CSV file via `d3.csv`, with the x-axis scaled by `d3.scaleTime` for years and the y-axis using `d3.scaleLinear` for candidate counts. Axis labels are manually positioned, and axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

Mar 28, 2022

Loading thumbnail…

Fork of Pie Chart For ICE-7-Anusha

This pie chart visualizes the number of passing students for each year over the past decade, with each slice labeled in thousands and a corresponding legend identifying the passing year. The visualization uses d3.pie and d3.arc to generate the chart segments, d3.scaleOrdinal for slice colors, and SVG text elements positioned via arc.centroid. Data is loaded from a CSV file using d3.csv, with slice labels formatted using d3.format. The legend is constructed manually with appended SVG groups.

Mar 28, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js v6 scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for each sample. The code uses `d3.csv` to load the data, then maps petal length and width values to the `rx` and `ry` attributes of each circle, though the hardcoded `r` radius and black fill result in uniform circular marks. SVG rendering is managed via the `select`, `append`, and `join` API, with axes generated through `scaleLinear`, `axisLeft`, and `axisBottom`.

Mar 7, 2022

Loading thumbnail…

Fork of ICE-6: No of Passing Candidates during last 10 Years with React & D3

A horizontal bar chart displays the number of passing candidates for each year over a ten-year period, with years on the y-axis and candidate counts on the x-axis. React manages the component state and lifecycle, while D3 v5 handles loading the CSV data and constructing the SVG scales and axes. The visualization uses `scaleBand` for the year categories and `scaleLinear` for the candidate counts, rendering green rectangles whose widths correspond to the values from the linked GitHub data source.

Mar 7, 2022

Loading thumbnail…

Fork of ICE-5 The Shapes of Data

This example displays a static nature-themed SVG image alongside a summary of a CSV dataset. The summary lists the data file size, number of rows, and number of columns, computed using `d3.csvParse` on data fetched from a remote gist URL via the `fetch` API. The page is styled with custom CSS and uses D3 v4 to parse the CSV, but performs no additional visualization of the dataset itself.

Feb 27, 2022

Loading thumbnail…

My Smiley Face using D3.js!

This example renders a simple smiley face in an SVG container using D3.js v5. The visualization draws a large red circle for the face, two small black circles for eyes, and an arc for the mouth, all positioned relative to the center of a 960x500 canvas. The code uses D3’s `select` to target the SVG element and `arc` to generate the mouth’s path geometry. The background is set to green via an external stylesheet, with the face elements created entirely through SVG primitives.

Feb 20, 2022