Maanas Katta

@maanaskatta·13 public vizzes

ICE 8 Social Network Maanas Katta

A force-directed network diagram visualizes social connections among seven agents, with lime links and aqua nodes on a black canvas. Node labels display character names, while link thickness encodes edge weight from the JSON dataset. The graph uses `d3.layout.force` for physics-based positioning and drag interactivity, rendering SVG elements with `svg.selectAll` and appending circles and text. Node groups are defined in the data but not visually distinguished. The simulation runs continuously, updating link coordinates and node transforms on each tick.

Apr 3, 2022

Loading thumbnail…

ICE - 8 Family Tree (Generations) Maanas Katta

This example shows an animated family tree built from a hard-coded dataset of parent-child relationships, with nodes colored by generation using a custom `setGeneration` function. The SVG rendering uses D3 v6’s `d3.stratify()` to convert the flat data into a hierarchy, then `d3.tree()` to compute node positions. Links animate from parent to child coordinates via `.transition().duration(1000)`, while circles expand with a separate 800ms transition. Each node displays the child’s name as bold black text.

Apr 3, 2022

Loading thumbnail…

ICE - 8 Family Tree Maanas Katta

This example shows an animated family tree with nine linked nodes, using D3 v6’s `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. Green circles with lime strokes appear and links draw themselves via `transition()`. The SVG is appended to the body, with node labels set from the data’s `child` property. The animation sequentially reveals connections over 1000 milliseconds, while circles fade in over 800 milliseconds, all rendered on a black background.

Apr 3, 2022

Loading thumbnail…

ICE - 8 Making Maps (Country Map) Maanas Katta

This example shows a single highlighted map of the United States, rendered in light green with a black outline on a blue background, while other countries are omitted. It loads world country boundaries from the world-atlas TopoJSON dataset and filters the features to keep only the USA. Using d3.geoPath with a d3.geoAlbersUsa projection, the code generates SVG paths for the selected country. The implementation relies on D3 v5 modules (select, json, geoPath, geoAlbersUsa) and the topojson feature helper to extract geometries.

Apr 3, 2022

Loading thumbnail…

ICE 8 Making Maps (World Map) Maanas Katta

This example displays a world map with every country rendered as a light green SVG path with black borders on a blue background. It uses d3-geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, pulling country boundaries from the world-atlas TopoJSON dataset. The code loads the data asynchronously, converts TopoJSON to GeoJSON with topojson.feature, and appends the resulting paths to the SVG.

Apr 3, 2022

Loading thumbnail…

ICE - 7 Line Chart Maanas Katta

A line chart displays the daily opening bid price of the EURUSD currency pair throughout 2021. The visualization uses a smooth curve to connect data points across months, with gold gridlines and blue tick labels framing red price fluctuations. Built with React and D3 v7, the code loads CSV data from a GitHub gist and uses `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveBasis` for rendering. Axes are manually constructed from D3 scales, and the chart includes labeled axes for months and opening bid price.

Mar 28, 2022

Loading thumbnail…

ICE - 7 Pie Chart Maanas Katta

This D3.js visualization presents a pie chart of the top 10 countries by deaths attributed to air pollution in 2020. Each slice is labeled with the death count in thousands, and a corresponding legend lists the country names alongside their values. The chart uses `d3.pie` and `d3.arc` to generate the segments, with colors assigned via `scaleOrdinal`. Data is loaded from a CSV file using `d3.csv`. The visualization is rendered as an SVG, with a custom legend built manually using appended SVG groups and rectangles.

Mar 28, 2022

Loading thumbnail…

ICE - 7 Reusable Scatter Plot Maanas Katta

This visualization displays the Iris dataset as a scatter plot, cycling through different variable pairings every two seconds to compare petal and sepal measurements. Circles are colored by species—setosa in blue, versicolor in red, and virginica in yellow—with white outlines for contrast. Using D3 v6, the reusable scatterPlot function employs scaleLinear, extent, axisLeft, and axisBottom to dynamically update axes, while setInterval triggers re-renders with new x-value mappings. The SVG animation renders data from a gist CSV, with a dark background and Share Tech font for the axis labels.

Mar 28, 2022

Loading thumbnail…

ICE - 7 Area Chart Maanas Katta

This area chart visualizes the opening bid price of EURUSD across 2021, using a smooth curve and semitransparent fill to show price trends over time. The x-axis maps months via `scaleTime` and `timeFormat`, while the y-axis uses `scaleLinear` with formatted tick labels. The chart is rendered as an SVG using D3 v5, with `line` and `area` generators applying `curveBasis` for smoothed paths. Data is loaded from a CSV URL and styled with custom CSS for axis colors and the aqua area fill.

Mar 27, 2022

Loading thumbnail…

Maanas Katta ICE - 6 Rendering Marks and Channels with ReactJs and D3.js

This example shows the top 10 countries by deaths from air pollution in 2020 as a horizontal bar chart, with countries on the y-axis and death counts on the x-axis. The visualization uses React to manage component state and D3 v5 functions such as `scaleBand`, `scaleLinear`, and `max` to compute scales and domains from CSV data loaded via `d3.csv`. Bars are rendered as SVG `<rect>` elements inside a React component, with alternating sky-blue and deep-sky-blue fills. The chart includes axis ticks and grid lines, all styled with violet strokes on a black background.

Mar 6, 2022

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Points are colored by species (Setosa, Versicolor, Virginica) with a legend above the chart. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG, loading CSV data via `d3.csv`. The code appends circles with `selectAll` and `join`, and styles axes and titles using custom colors and font sizes.

Mar 5, 2022

Loading thumbnail…

Maanas Katta ICE - 5

This example displays a styled HTML page with a blue background, featuring a large italic title and a table that reports dataset statistics. It also shows static SVG shapes, including circles with various fills and a rounded rectangle with a red fill and black stroke. The page loads a CSV file asynchronously using `d3.csv`, then uses `d3.csvFormat` to calculate the data size in bytes and displays the row and column counts in the table. The visualization relies on D3 v7 and basic SVG elements for rendering.

Feb 27, 2022

Loading thumbnail…

Maanas Katta Smiley Face

A black smiley face drawn with SVG circles and a D3 arc path, featuring red stroke outlines, gold and lime eyes, and a blue semicircular mouth. Built with React 17 and D3 v7, the component uses the `arc` generator from `d3` to construct the mouth’s path, while circles define the head and eyes. The face is centered via a transformed `<g>` group, with dimensions fixed at 960 by 500 pixels.

Feb 18, 2022