Venkat-Dhulipalla

@Venkat-Dhulipalla·12 public vizzes

ICE-8

A social network graph visualizes connections among six people, with nodes representing individuals and links showing weighted relationships. The force-directed layout spaces nodes dynamically, while circle size and link thickness convey the strength of each connection. Built with D3 v4, the example uses `d3.layout.force()` for physics-based positioning and SVG rendering. Node labels and colors distinguish groups, and the `force.on('tick')` callback updates positions in real time. Data comes from a local `data.json` file containing named nodes and weighted links.

Apr 10, 2023

Loading thumbnail…

ICE-8 Family Tree

This example shows an animated family tree with color-coded generations, from a single root ancestor down through descendants. The tree uses D3’s `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. SVG circles and text labels render each family member, while paths animate from parent to child nodes via `transition().duration()`.Generation colors are assigned by depth using a switch function, and all nodes and links transition smoothly into place, making the lineage structure easy to follow.

Apr 10, 2023

Loading thumbnail…

India Map: ICE-8

This example visualizes India’s administrative states as an SVG map, with each state filled by a categorical color from D3’s `schemeCategory10` and named via tooltips. The code loads GeoJSON from a gist, uses `d3.geoMercator` for projection and `d3.geoPath` to generate paths, while `topojson.feature` extracts the state boundaries. A black stroke between the states highlights the borders. The map displays all states except the first feature, which is removed from the dataset.

Apr 10, 2023

Loading thumbnail…

ice-8

This visualization displays a world map using an equirectangular projection, with white countries on a light blue ocean background that change to green on hover. The geographic data is loaded from the world-atlas countries-50m.json dataset and converted from TopoJSON to GeoJSON using the `feature` method. The map is rendered as SVG paths via D3’s `geoPath` and `geoEquirectangular` projection functions, with styling controlled by CSS selectors for the earth and country layers.

Apr 10, 2023

Loading thumbnail…

Area Chart of Uk Population

This area chart displays the population of the United Kingdom from 2010 to 2023, with the line and filled region clearly showing growth trends over time. The visualization is built using D3.js v5, with data loaded from a CSV file and rendered as SVG elements. It employs D3's `scaleLinear` and `scaleTime` for axis scaling, along with `area()` and `line()` generators to create the chart. The code also uses `axisLeft` and `axisBottom` for labeled axes, with a custom tick format for thousands.

Mar 25, 2023

Loading thumbnail…

D3.js Line Chart

This D3.js line chart visualizes the growth in customer numbers from 2000 to 2010 using the Iris Dataset, rendering a single steel-blue line within an SVG canvas. The code employs `d3.csv` to load the data, `scaleBand` for the categorical year axis, and `scaleLinear` for the numeric customer axis. Axes are added via `d3.axisBottom` and `d3.axisLeft`, while the line itself is drawn with a `path` element using `d3.line`. The chart includes labeled axes and uses a custom stylesheet for formatting.

Mar 25, 2023

Loading thumbnail…

Pie Chart with Legend

A pie chart breaks categorical data from a CSV file into five colored slices, each labeled with a fruit name and accompanied by a custom HTML legend built from colored squares. The chart is rendered as SVG using D3.js v6, with the `d3.pie()` layout computing arc angles and `d3.arc()` generating the paths. The legend is positioned absolutely beside the chart, and each slice uses a semi-transparent fill with white strokes to visually separate segments.

Mar 25, 2023

Loading thumbnail…

ICE 7-1 Reusable Scatter Plot

A reusable scatter plot displays the Iris dataset with petal width and sepal length on the axes. The SVG visualization uses D3 v6 API methods including `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render scales, axes, and data points as distinct symbol shapes per species. The plot dynamically cycles through different data columns every ten seconds, updating the x-axis and point positions via `setInterval`. Data loads from a CSV file, and the chart is built using a custom reusable function pattern.

Mar 24, 2023

Loading thumbnail…

ICE-6: Scatterplot for Penguin dataset

This scatterplot visualizes the Palmer Penguins dataset, plotting flipper length against body mass with points colored by species. D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` map the data to SVG circles, while `csv` loads the remote dataset. Each point’s culmen dimensions are also stored but only the primary axes are labeled, with a title overlaid via SVG text.

Mar 12, 2023

Loading thumbnail…

Air bnb

This visualization displays the top 10 most expensive Airbnb listings in New York City as a horizontal bar chart, using React to manage the component state and D3 v5 for scales, axes, and SVG rendering. The code loads CSV data via `d3.csv`, sorts by price, and slices the top 10 entries, then maps them to `scaleBand` and `scaleLinear` ranges. Bars are drawn as SVG `<rect>` elements with a red fill, while custom tick marks and labels are generated from the scales. The chart uses a light gray background and a simple title.

Mar 12, 2023

Loading thumbnail…

Oscar details

This webpage presents a summary of Oscar nominees and winners in the director category, listing the dataset’s row count, column count, file size, and column names in a styled list. It loads a CSV file from a GitHub gist using `d3.csv` and populates the summary elements via D3 selections. The page also displays a background image and a link to the raw data. The code uses D3 v7 and plain JavaScript within an HTML structure.

Mar 4, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face built with SVG shapes demonstrates D3.js v5 selection and appending methods, including circles, rects, paths, and polygons for facial features. The eyebrows move up and down repeatedly via chained `transition()` calls with `d3.easeSinInOut`, while sweat drops loop through a recursive `animate` function using data binding. The code uses `d3.select`, `d3.arc` for the mouth and tears, and explicit SVG attributes to compose the face on a gray background.

Feb 23, 2023