M

ManasaPatange

@ManasaPatange·16 public vizzes

Loading thumbnail…

Social Network Graph ICE-8 Data Visualization

This visualization displays a social network of countries as a force-directed graph, with red circular nodes representing countries and blue links showing connections between them. It uses D3.js v4 with `d3.forceSimulation` to calculate node positions based on link forces, many-body repulsion, and centering forces, rendering the final layout as an SVG with labeled text for each country name. The graph is built for React and pulls its node and link data from a JSON file hosted on GitHub Gist.

Loading thumbnail…

Family Tree ICE- 8 Data Visualization

This interactive tree visualization displays a family tree with colored labels indicating different generations and relationships. The hierarchical data is loaded from a JSON file and rendered as SVG node-link diagrams using D3 v5’s `tree` layout and `linkHorizontal` path generator. Node labels display family member names with font sizes scaled by depth and colored fills from the dataset. The visualization supports pan and zoom through D3’s `zoom` event, while CSS styling defines the pink link paths and text shadows for readability.

Loading thumbnail…

ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, displaying relationships between individuals such as Sai, Raju, Swathi, and their descendants. The tree is rendered as an SVG with orange rectangular nodes connected by purple animated links, which draw from source to target over one second. The code constructs the hierarchy with `d3.stratify()` and positions nodes using `d3.tree()`, then applies transitions to text and paths for a dynamic reveal. Data is hardcoded as an array of child-parent pairs, with styling defined via CSS for circles, text, and paths.

Loading thumbnail…

ICE-8 DV Sweden Country Map

This choropleth-style map of Sweden visualizes the country’s counties (län) as filled purple polygons with pink internal borders, projected using the Mercator projection via d3.geoMercator and rendered with d3.geoPath. The React component loads TopoJSON data from a GitHub gist using d3.json and converts it into GeoJSON features and an interior mesh via topojson.feature and topojson.mesh. The SVG output is styled with CSS classes for landmass, borders, and interiors, with the projection automatically fitted to the viewport using fitExtent.

Loading thumbnail…

ICE-8 World Map

This example displays a world map using the Natural Earth projection, with countries filled in orange and the sphere background in light green. It loads geographic data from a GitHub-hosted TopoJSON file, parses it with `topojson.feature`, and renders paths via `d3.geoPath` with the `geoNaturalEarth1` projection. The visualization is built with D3 v5, using SVG elements, and includes a CSS-styled sphere outline. A video tutorial accompanies the code, which is structured across separate HTML, JavaScript, and stylesheet files.

Loading thumbnail…

Sports List

This visualization displays a bar chart of the top eleven sports in 2021 based on match counts, sorted vertically with a purple bar for each sport. The code uses D3 v5 (including `scaleBand`, `scaleLinear`, `csv`, and `max`) within a React component to load data from a GitHub-hosted CSV and render the chart as an SVG. Axes are manually drawn with ticks and gridlines, while text labels for sports appear on the left.

Loading thumbnail…

Data Visualization ICE-7 Line Chart

This line chart shows the yearly profits of a software company from 2009 to 2018, with time on the x-axis and profit values on the y-axis. The visualization uses d3.csv to load external CSV data, then d3.scaleTime and d3.scaleLinear to map the variables, with d3.line generating the orange path. Axes are rendered via d3.axisBottom and d3.axisLeft, while CSS styles the grid lines, tick labels, and axis titles in distinct colors.

Loading thumbnail…

Data Visualization ICE-7 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris flower dataset, showing the relationship between petal and sepal measurements across three species. Built with D3.js (v6.7.0), it uses d3.csv to load data and d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes. The plot animates every 1.8 seconds by cycling through different x-axis dimensions via setInterval, while colored circles distinguish species. The SVG rendering includes custom labels and a fixed 6-pixel radius, with data mapped from a GitHub gist URL.

Loading thumbnail…

Data Visualization ICE-7 Area Chart

This area chart visualizes the profits of a software company from 2009 to 2018. The chart uses a smooth, curved line to represent profit trends over time, with the area beneath the line filled in pink to emphasize the magnitude of the values. The visualization is rendered as an SVG using D3 v5, employing the `area` and `line` generators with a `curveBasis` for smoothing. Axes are created via `axisBottom` and `axisLeft`, with data parsed from a CSV file and dates formatted using `d3.timeParse`.

Loading thumbnail…

Data Visualization ICE-7 Pie Chart

This pie chart displays country birthrates for 2021, with each slice labeled by its percentage and a corresponding legend listing country names and values. It uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` to load and process data from a GitHub gist, then renders the chart as SVG. The `arcGenerator` computes slice centroids for text placement, while `format` applies concise numeric labels. Section colors are assigned via an ordinal scale, and legends are dynamically appended with rectangles and text.

Loading thumbnail…

Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, virginica, or versicolor). The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to screen coordinates, and render axes. Circles are drawn via SVG with `selectAll` and `join`, while the chart fills the browser window and includes rotated axis labels for clarity.

Loading thumbnail…

ICE - 6 Scatter Plot

This example visualizes the Iris Dataset, plotting petal length and width for each flower. Three species—setosa, virginica, and versicolor—are differentiated by green, orange, and blue fill colors. The code uses `d3.csv` to load data, `scaleLinear` for x and y axes, and SVG circles for rendering. Data parsing converts string measurements to numbers, while `axisLeft` and `axisBottom` append labeled axes. Despite assigning `rx` and `ry` attributes, the circles use a fixed `r` of 6.5 pixels.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot shows the relationship between petal length and sepal length for 150 iris flowers, with each flower represented as an orange circle. Built with vanilla HTML and D3 v6, the visualization uses `d3.scaleLinear` to map the data ranges to SVG coordinates, and `d3.axisLeft` and `d3.axisBottom` to render labeled axes. The data is loaded asynchronously from a remote CSV file via `d3.csv`, and the plot fills the browser window. The code explicitly sets axis text to 30 pixels for readability.

Loading thumbnail…

CSCE 5320.js

This example presents a dashboard-style HTML page that welcomes visitors to a data visualization exercise and displays summary statistics about a hospital dataset. It highlights the dataset’s size in kilobytes, row count, and column count by fetching a CSV from a GitHub gist using the `d3.csv` API. The visualization combines a custom pink heading, a large orange preformatted text block, and an inline SVG image sourced from a GitHub repository, all styled with CSS and rendered using D3 v7 within a plain HTML and JavaScript environment.

Loading thumbnail…

ABC

This example demonstrates a simple HTML page that loads and summarizes a CSV dataset using D3.js. The page displays a static SVG image and uses the `d3.csv` method to fetch data from a remote URL, then presents the file size, row count, and column count in a styled `<pre>` element. The visualization includes decorative SVG shapes and icons, with data handling performed through D3’s CSV parsing and formatting functions.

Loading thumbnail…

My Smiley

A smiley face is drawn as a static SVG graphic, centered on a blue-gradient circular face with a pink-black gradient stroke, black eyes, and a curved mouth. Built with React and D3 v7, the visualization uses the `arc` generator from `d3` to create the mouth path, while the face and eyes are rendered as SVG circles with defined linear gradients. The design is purely illustrative, with no underlying data, and is rendered directly into the DOM through ReactDOM.