A

arcothanmukha

@arcothanmukha·24 public vizzes

Loading thumbnail…

Social Network ICE-8

This social network diagram visualizes connections between seven individuals, using blue links whose thickness reflects interaction weight, and labeled nodes for each person. The graph uses D3 v4's force-directed layout (`d3.layout.force`) to position nodes, with interactions enabled through the drag-and-drop API. SVG rendering displays each node as a white circle with grey stroke and purple text, while JSON data defines the network structure and edge weights. The visualization also includes a self-loop on node Kovi, indicating a weight-25 self-connection.

Loading thumbnail…

Family Tree with Colors ICE-8

A static hierarchical family tree rendered as an SVG, with nodes colored by generation depth using a custom `setGeneration` function. The tree is built from link data via `d3.stratify` and laid out with `d3.tree`, showing relationships from a root ancestor down to descendants. Circle nodes are animated with a growing radius on load, while connecting paths animate from source to target positions. Text labels display each person's name, and the chart uses a grey background with pink node strokes for visual contrast.

Loading thumbnail…

Family Tree ICE-8

A family tree visualization built with D3 v6 renders hierarchical relationships as an orange-node SVG tree on a purple background. The code uses `d3.stratify()` to convert flat parent-child data into a tree structure and `d3.tree()` to compute node positions. Animated paths draw connecting links over one second via `transition()`, while circles and text labels appear with a shorter transition. The final layout positions nodes using the tree’s computed coordinates, with names displayed inside each circle in bold gray text.

Loading thumbnail…

Fork of Country map ICE-8

This example displays a map of Africa using an azimuthal projection, rendered as brown filled regions with black borders. The visualization loads geographic data from a JSON file hosted on GitHub Gist and draws it using D3.js v4’s `d3.geoMercator` projection combined with `d3.geoPath`. The code fetches the GeoJSON features, appends SVG `path` elements to the page, and styles them with fill and stroke attributes. No interactivity or additional layers are shown; the result is a static, single-color country map.

Loading thumbnail…

Swedish Country Map ICE-8

This example displays a choropleth map of Swedish counties using the Mercator projection, with each county filled in blue and interior boundaries outlined in gray. The map renders as SVG through React, with geographic features generated from TopoJSON data using `d3.geoPath` and `d3.geoMercator`. The code applies `projection.fitExtent` to scale the map to fit the viewport, and county boundaries are extracted via `topojson.feature` and `topojson.mesh`. The visualization uses the d3 v5 library alongside React 16.9.

Loading thumbnail…

Country Map ICE-8

This visualization displays Indonesia as a violet-colored country on a green background, extracted from a global TopoJSON dataset of country boundaries. The code uses d3.geoAlbersUsa to project the geographic coordinates and d3.geoPath to generate SVG paths, filtering the world data to isolate Indonesia. It loads country polygons from the world-atlas TopoJSON file and renders the selected feature onto a 960×500 SVG canvas. The projection is scaled to 780 and translated to center the map, with each path styled via a CSS class.

Loading thumbnail…

Fork of India Map: ICE8

This interactive map of India displays district-level boundaries filled with color and state-level outlines in steel blue. Users can zoom and pan the map through a custom zoom interaction. Built with the D3.js library, it employs `geoMercator` for projection and `geoPath` for rendering shapes. The visualization overlays two TopoJSON datasets, one for states and one for districts, fetched from GitHub, and uses `scaleOrdinal` colors to differentiate districts.

Loading thumbnail…

Fork of World Map ICE-8

This fork of the World Map ICE-8 visualizes world countries using a natural Earth projection. It renders each country as a grey SVG path with black stroke. The code uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate path data. It fetches country boundary data from a world-atlas JSON endpoint, processes it with the topojson feature function, and appends the resulting paths to the SVG canvas.

Loading thumbnail…

Fork of World Map : ICE-8

This example visualizes a world map using an azimuthal equidistant projection, with countries rendered as light green SVG paths over a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON features using `topojson.feature`, and draws them with `d3.geoPath` and `geoAzimuthalEquidistant`. The code imports these functions from the d3 v5 and topojson libraries within a React framework context.

Loading thumbnail…

Fork of Population of Texas ICE-7 Q4

This visualization shows the population of Texas over time using a combined line and area chart, highlighting trends with a smooth curve. It loads data from a CSV file and renders an SVG graphic using D3 v5. The code uses `scaleLinear` and `scaleTime` for axes, `line` and `area` generators with `curveBasis`, and `axisBottom` and `axisLeft` for tick marks. The area is filled pink, with an orange and green axis styling.

Loading thumbnail…

Fork of Bike Sales ICE-7 Q3

A line chart displays bike sales over time, with the x-axis showing yearly dates and the y-axis measuring population as a proxy for sales volume. The visualization loads CSV data from a GitHub gist using `d3.csv`, then renders an SVG path generated with `d3.line` and scales from `scaleTime` and `scaleLinear`. Axes are drawn with `axisBottom` and `axisLeft`, including custom tick marks and labels, while CSS styles the orange stroke and red title.

Loading thumbnail…

Fork of Accident Data ICE-7 Q2

This example shows a pie chart of accident costs from major U.S. states, with each slice colored and paired with a legend listing the state name and its corresponding cost value. The visualization loads CSV data from a GitHub gist using the `d3.csv` method, then computes the pie layout with `d3.pie` and renders the segments as SVG paths using `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and legend labels are formatted with `d3.format`. The SVG is selected and manipulated through D3 v5, with styling defined in an external stylesheet.

Loading thumbnail…

Fork of Scatter Plot for Iris Data ICE-7 Q1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each specimen while coloring points by species (blue, orange, purple). It uses D3 v6 with SVG rendering, employing `d3.csv` for data loading, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes. The code also draws on sepal dimensions via attribute binding, though circles are positioned by petal values. Axis labels and large fonts are styled inline, with data sourced from a GitHub-hosted CSV.

Loading thumbnail…

Scatter Plot for Iris Data

This example renders the classic Iris dataset as a scatter plot using D3 v6. It maps petal length and petal width to the x and y axes, coloring each point by species (setosa, versicolor, or virginica) with yellow, pink, or blue fills. The dataset is loaded via `d3.csv` from a GitHub raw URL, with numeric parsing of all measurements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, using `d3.scaleLinear` and `d3.extent` to set domains based on the data.

Loading thumbnail…

Fork of ICE-6

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring points by species. It uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom to render axes. Circles are appended via data joins, with fill colors assigned per species. The chart fills the browser window with a yellow background, and axis labels describe petal length and sepal length, though only the former matches the plotted data.

Loading thumbnail…

ICE-6

This interactive bar chart displays the cost of accidents across the top 50 major states, using data loaded from a CSV file. The visualization employs React with D3 v5, utilizing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles represent each state’s cost, with gridlines and tick labels generated through D3’s axis utilities. The chart presents data in a sorted horizontal layout, rendering directly to the DOM via React components.

Loading thumbnail…

ICE-6 Data

This example displays a bar chart of salary hikes for the top 20 countries, with each bar’s length proportional to a population value from a CSV file. The visualization uses React to manage state and render the SVG, while D3 v5’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing, scaling, and layout. Green rectangles represent the bars, with blue gridlines and tick labels generated manually from the scales. The data is fetched from a GitHub-hosted CSV via a raw URL.

Loading thumbnail…

ICE-6_11447937

This bar chart displays the populations of ten countries, with China and India leading in total population. The visualization uses a linear scale for population values on the x-axis and a band scale for country names on the y-axis, rendering bars as SVG rectangles. The code employs d3.csv to load the data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the scales and axes. Population values are multiplied by 1,000 during data preprocessing, and the chart applies a steelblue fill to the bars.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the dataset in a large, styled text block alongside a static SVG image. The code fetches a remote CSV file from a GitHub gist using `d3.csv`, then calculates and presents the formatted data size in kilobytes, the total row count, and the number of columns. It relies on the D3.js `csv` and `csvFormat` APIs, with a custom HTML page using CSS for visual styling.

Loading thumbnail…

Fork of Smiley Face Max: React

This example uses a React component structure to build an animated SVG smiley face. The facial features are composed of geometric shapes: a pink background circle, red body, grey and yellow eyes, and a mouth drawn as a D3 arc path. Using the React framework, the `Eyes` component constructs a symmetrical, layered pattern of circles with varying sizes and offsets, which the `BackgroundCircle` and `Mouth` components complement to form the complete character. The code relies on React’s declarative syntax and D3’s `arc` function to define the mouth’s path, all rendered into the SVG canvas within the `App` component.

Loading thumbnail…

Smiley Face

A smiling face rendered with React and SVG combines a red circular head with custom eye and mouth components. The eyes and smile are constructed from layered SVG paths, ellipses, and circles, with fills and gradients defined in CSS classes. The main App component positions these elements using SVG transforms, scaling and rotating the imported Eyes and Smile components into place. This example demonstrates composable React components for building structured vector illustrations.

Loading thumbnail…

Fork of Smiley Face

This example shows a stylized smiley face rendered as an SVG graphic. The face is composed of a red circle for the head, two smaller circles for eyes, and a curved mouth path generated with D3’s `arc` function using specified inner and outer radii and angular ranges. The visualization is built with React components, with D3 v5 providing the arc generator, while React manages the SVG element structure and props. The code uses fixed numeric constants for positioning, radii, and stroke widths, resulting in a static, declarative scene.

Loading thumbnail…

Fork of Fork of Hello HTML teste

A single stylized face renders in the center of an SVG canvas using React components for the background circle, eyes, mouth, and nose. The face uses a yellow-to-red linear gradient for its eyes, an SVG filter with specular lighting for a shiny border effect, and a d3.arc-generated path for the mouth. Although the code maps over a range of one, allowing for multiple faces, only one is displayed. The face’s dimensions and features are defined with static constants, though some attributes like stroke width and eye radius are set with random values.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example shows a simple emoji-like face with a yellow circular head, black outline, two eyes, and an open mouth arc, built using React and D3. It renders the face as an SVG by composing D3 arc and circle primitives within a group element that centers the drawing via a transform. The code uses d3.arc to generate the mouth path, and relies on the React UMD build and D3 v7 loaded from unpkg. The composition is a fork that refactors the drawing logic into reusable constants for layout.