Skip to main content
Log in
A

abhi051197

@abhi051197·15 public vizzes

Loading thumbnail…

ice8 abhi 3.2

A force-directed network graph displays seven named nodes connected by weighted links, with node size and stroke thickness reflecting link weights. The visualization uses the D3 v4 force layout (d3.forceSimulation) to position and drag nodes interactively, rendering SVG circles, yellow text labels, and green link lines on a pink background. Data originates from a local JSON file containing node groups and link weights. Custom styles define red circle borders, aqua fills, and cursor behavior, while the force simulation applies gravity, distance, and charge parameters.

Apr 5, 2022
Loading thumbnail…

ice8 abhi3.1

This example visualizes a family tree as an animated node-link diagram, showing relationships between ten individuals. Nodes are rendered as large aqua circles with brown strokes, connected by animated black paths that grow from parent to child. The tree layout and animations are built using D3 v6's `stratify`, `tree`, and `transition` APIs, with data defined as parent-child links in a flat array. The SVG output is drawn in the browser viewport, and text labels display each person's name within the circles.

Apr 5, 2022
Loading thumbnail…

ice8 abhi3

This animated family tree uses a D3.js layout to display hierarchical relationships, with each node represented as a colored circle and connected by lines. The visualization assigns colors based on generation depth, starting with red for the root and progressing through green, blue, and yellow. The tree is built using `d3.stratify()` to structure the parent-child data and `d3.tree()` to compute node positions. Animated paths draw the connections over one second, while circles expand to their full size over 800 milliseconds, with text labels displaying each person's name.

Apr 5, 2022
Loading thumbnail…

ice8abhi2.1

This visualization displays neighborhood boundaries in Portland using a geometric map projection. The map renders geographic features as red-outlined polygons, with the page title “portland” appearing above the SVG canvas. The code applies `geoConicEqualArea` for projection and `geoPath` to draw the shapes, while `topojson.feature` converts the TopoJSON data into GeoJSON. The data comes from a PortlandNeighborhoods.json file hosted on GitHub, and the visualization is built with React and styled with Poppins typography.

Apr 5, 2022
Loading thumbnail…

ice8abhi2

This example displays the geographic boundary of the United States as a single dark green polygon with a red stroke on an aqua background, rendered using SVG. The code loads world country data from the World Atlas TopoJSON source via `d3.json`, converts it using `topojson.feature`, filters for the United States, and projects the path with `d3.geoAlbersUsa` and `d3.geoPath()`. The `geoAlbersUsa` projection is scaled and translated to center the map within the 960 by 500 pixel viewport.

Apr 5, 2022
Loading thumbnail…

ice8abhi1

This example displays a world map rendered as dark green countries with dark grey outlines on an aqua background. It uses the D3 library, specifically `d3.geoNaturalEarth1` and `d3.geoPath`, to project and draw geographic shapes from the world-atlas dataset’s countries-110m JSON. The code fetches that data, extracts country features using topojson, and appends SVG paths to the canvas, resulting in a static chloropleth-style map.

Apr 5, 2022
Loading thumbnail…

ice 7 Abhishek

This animated scatter plot cycles through different iris flower measurements, mapping petal width, sepal width, petal length, and sepal length against sepal length on the y-axis. The visualization uses D3.js v6 with `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function that updates the x-axis attribute every two seconds via `setInterval`. Each circle represents a data point from the Iris dataset, colored by species (setosa, versicolor, virginica). The SVG rendering includes dynamically updated axis labels and a crimson background, with data fetched from a remote CSV file.

Mar 29, 2022
Loading thumbnail…

ice 7 abhishek question 4

This visualization shows the population of Hyderabad from 1990 to 1999 using a combined line and area chart rendered in SVG. The x-axis displays years via a time scale, while the y-axis shows population values with formatted tick labels. The chart uses d3.line and d3.area generators with a curveBasis interpolation to create smooth paths, and d3.scaleTime, d3.scaleLinear, axisBottom, and axisLeft for axes. Data is loaded from a CSV file using d3.csv and processed with Date parsing and numeric conversion.

Mar 29, 2022
Loading thumbnail…

ice7 question3

A line chart displays the population of Hyderabad from 1990 to 1999, with years on the x-axis and population on the y-axis. The React application uses D3’s `csv` to load and sort the data, and `scaleTime` and `scaleLinear` to map values. The line is drawn using `line` with a basis curve, while custom axes, green tick lines, and aqua tick text are rendered as SVG.

Mar 29, 2022
Loading thumbnail…

Ice 7 Abhishek Question2

An interactive pie chart visualizes iPhone series sales comparisons. Each slice represents a different iPhone model, with its area proportional to sales figures, labeled with sales values and color-coded. A legend lists each series with its corresponding color and sales amount. The visualization is built with D3 v5, using the `pie`, `arc`, `scaleOrdinal`, and `format` APIs, and renders as an SVG. Data is fetched asynchronously from a CSV via a Gist URL.

Mar 29, 2022
Loading thumbnail…

Top 10 car sales in the year 2104

A scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and petal width to the y-axis, with each point colored by species (setosa, versicolor, and virginica). The chart uses SVG circles with elliptical radii derived from sepal dimensions, rendered via D3 v6. Axes, labels, and scales are created using `scaleLinear`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`.

Mar 8, 2022
Loading thumbnail…

car sales in the year 2014

This example shows a horizontal bar chart ranking the top 10 car manufacturers by total sales in 2014. The chart uses blue, rectangular bars on a pink background, with manufacturer names listed along the vertical axis and sales values on the horizontal axis. The data comes from a CSV file, and the chart is rendered as an SVG using React and D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions within a React component.

Mar 8, 2022
Loading thumbnail…

Top 11 car sales in the year 2014

A bar chart displays the top 11 countries by population in 2014, using steelblue rectangles to show each country's total population. The visualization renders as SVG via D3 v7, with a linear x-scale for population values and a band y-scale for country names. Axes are generated using `axisLeft` and `axisBottom`, while data is loaded from a CSV file and formatted by multiplying values by 1000. Country labels and gridlines are omitted, keeping the focus on population comparisons.

Mar 8, 2022
Loading thumbnail…

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

This example demonstrates how to load and parse CSV data from a remote GitHub URL using D3.js. It displays the fetched dataset’s size in kilobytes, row count, and column count in a styled HTML `<pre>` element, alongside a static SVG image. The code uses `d3.csv` to asynchronously retrieve the data, then `d3.csvFormat` to calculate its length. The page includes custom CSS for the header and message container, with the script running inside a plain HTML document without any React integration.

Feb 25, 2022
Loading thumbnail…

Fork of homework smiley face

This example uses React with SVG rendering to display a colorful smiley face composed of primitive shapes. The face is built from concentric circles for the head and eyes, with pink and red strokes, green pupils, and a purple nose. The smile is drawn using a d3 arc path with an inner radius, and multiple brown and blue lines create stylized hair and facial features. The code leverages D3's `arc` function to generate the mouth path, while React manages the SVG elements.

Feb 19, 2022