Skip to main content
Log in
P

Prasanth Damarla

@damarlaprasanth·20 public vizzes

Loading thumbnail…

ICE-8: Social Network graph

This example shows a small social network of nine people, grouped into four clusters, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and edges, which are rendered as SVG circles and lines. The code employs d3.layout.force, the v2/v4 D3 API, and force.drag to make nodes interactive. Node names appear as text labels, and link thickness reflects the weight value from the JSON data file.

Apr 4, 2022
Loading thumbnail…

ICE 8 - Family Tree

This D3.js v5 example renders a family tree as a tidy tree layout using SVG. The visualization shows three generations of a family, with nodes colored by depth: violet for the root, steelblue for the second level, and gold for the deepest leaves. The code builds the hierarchy with `d3.stratify()`, computes positions via `d3.tree()`, and draws curved cubic Bézier links between parent and child nodes, with each person's name labeled to the right of their node.

Apr 4, 2022
Loading thumbnail…

ICE-8 USA Map

This interactive SVG map of the United States visualizes the boundaries of all 50 states and their shared interior borders. The landmasses are styled with a solid olive fill, while the adjacent-state boundary lines are stroked in cyan. The map uses the geoAlbersUsaTerritories projection via `d3.geoPath` and `d3.geoGraticule`. React drives the front-end, loading topojson data from the unpkg-hosted `us-atlas` package, which is then processed through the `topojson` library's `feature` and `mesh` functions to generate the display.

Apr 4, 2022
Loading thumbnail…

ICE-8 Making Maps

This example displays a natural Earth projection of world countries, using light green landmasses against a blue oceanic sphere. It loads the world-atlas TopoJSON dataset and converts it to GeoJSON features with topojson’s `feature` method. The map is rendered as SVG paths generated via `d3.geoPath` and `geoNaturalEarth1`, with a separately drawn spherical outline. Basic styling from CSS sets fill colors and stroke opacity for the country boundaries.

Apr 4, 2022
Loading thumbnail…

ICE 8 Network Graph

This example visualizes a network graph of eight named nodes connected by seven links, with two large main nodes and smaller child nodes. A force-directed layout using `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` positions the nodes, while SVG circles, lines, and text labels render the structure. Node colors and sizes are assigned from a separate color module, and dragging is enabled via the D3 drag behavior.

Apr 4, 2022
Loading thumbnail…

ICE - 8 Social Network

This example shows a force-directed social network graph of people and films, with colored nodes representing different groups and links labeled by relationship types such as "Acted in" and "Directed." The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to position nodes, while nodes are rendered as SVG circles with text labels. Drag interactions are enabled via `d3.drag` to reposition nodes, and hover highlighting is applied through CSS classes. The data comes from a local JSON file with explicit source and target node references.

Apr 3, 2022
Loading thumbnail…

Family Tree

This interactive family tree uses a static dataset of parent-child relationships to display three generations of a family. The visualization uses D3.js v6 and React, rendering circles as nodes connected by animated lines in an SVG. The tree layout is computed using D3's stratify and tree algorithms, with the nodes and links animating into place via transitions that vary in duration based on node depth. The data is hardcoded in the source file, and each node displays the family member's name.

Apr 3, 2022
Loading thumbnail…

ICE8 - Family Tree

This example renders a family tree as an interactive SVG diagram using D3.js v3. The visualization shows hierarchical relationships between family members, with each node represented by a colored circle and name label. Node size and color encode the member’s value and level, while link strokes inherit the parent’s level color. The code implements a D3 tree layout (`d3.tree()`), uses `d3.hierarchy` to structure the JSON data, and creates curved paths for parent-child links. Circle radius is set by the `value` property, and fill and stroke styles come from the `level` and `type` fields.

Apr 3, 2022
Loading thumbnail…

ICE-8 USA Map

This example visualizes the contiguous United States with an Albers equal-area conic projection, displaying state boundaries as black interior lines and the nation as a blue filled shape. Rendered as an SVG element within a React component, it uses d3.geoAlbers and d3.geoPath to generate the geography, while d3-geoGraticule prepares grid lines. The map loads TopoJSON data from the us-atlas repository, converting it to GeoJSON features and meshes via the topojson library. The visualization is set to 2000 by 600 pixels.

Apr 3, 2022
Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes e-commerce sales from 2009 to 2019, with a smoothed line and filled region beneath it. Using D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis` for smoothing, and `csv` to load remote data. The SVG rendering includes labeled axes with gridlines and a green title, while CSS styles the chart’s tick marks and area fill.

Mar 28, 2022
Loading thumbnail…

ICE-7 Line Chart

This line chart displays annual sales for an e-commerce site from 2009 to 2019, with a blue line tracing the trend over time. Using D3 v5, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. The SVG includes gridlines from tick marks, axis labels, and a styled path, with sales values formatted using `format('.3s')`. The chart is rendered entirely in SVG with axes positioned inside a margin-defined area.

Mar 28, 2022
Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the cost of various products as a pie chart, with each slice labeled and accompanied by a legend. Built with D3 v5, it loads cost data from a CSV file hosted on GitHub. The chart’s slices are generated using `d3.pie` and `d3.arc`, with each slice's percentage label positioned via the arc's centroid. A separate legend group displays a color swatch, product name, and cost value for each item.

Mar 27, 2022
Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This example displays the Iris dataset as an interactive scatter plot with colored circles representing species, where green, red, and blue distinguish Iris-setosa, Iris-versicolor, and Iris-virginica. The visualization uses a reusable D3 module that implements a custom scatter plot function, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal width and sepal length onto axes. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the plot re-renders with each button cycle through different measurement combinations.

Mar 27, 2022
Loading thumbnail…

ICE-6: Iris Dataset Scatter Plot

A D3.js scatter plot visualizes the Iris Dataset, mapping petal length and width on the x and y axes, with circles colored by species (setosa, versicolor, virginica). It uses `d3.csv` to load data, `scaleLinear` for axes, and `axisBottom`/`axisLeft` for ticks. The code includes misplaced `rx`/`ry` attributes on circles, which do not affect SVG rendering, and labels the axes incorrectly as "Sepal Length" and "Petal Length" despite the actual mapped variables.

Mar 7, 2022
Loading thumbnail…

ICE-6: Marks and Channels

This example displays product costs as a horizontal bar chart using React and D3 v5. The visualization maps product names to the y-axis with a band scale and costs to the x-axis with a linear scale, rendering blue rectangles with yellow strokes. The component loads CSV data from a GitHub gist, slices it to the first ten items, and uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions within a React functional component with hooks. Custom tick marks and gridlines are drawn manually rather than using axis generators.

Mar 7, 2022
Loading thumbnail…

ICE-6

This example shows a bar chart of video game sales, comparing the total sales across different game platforms. A dropdown menu lets the viewer switch the y-axis metric among customer-related attributes like name, segment, country, city, or state. Built with React and rendered as SVG, the chart uses d3.scaleBand and d3.scaleLinear for axes, with custom AxisBottom, AxisLeft, and Marks components. Data is loaded asynchronously via d3.csv from a Kaggle-hosted dataset of top game sales.

Mar 7, 2022
Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size, row count, and column count in a styled HTML page. The code uses the `d3.csv` method to fetch data from a remote CSV file and `d3.csvFormat` to measure its size in kilobytes. The page also includes a decorative SVG illustration and custom CSS styling, with results rendered into a `pre` element via JavaScript. The visualization emphasizes data summary metrics rather than graphical charts.

Feb 28, 2022
Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size, row count, and column count in a large orange text block. It uses `d3.csv` to fetch data from a GitHub gist URL, then formats the summary with `d3.csvFormat`. The page also includes a decorative SVG illustration of a figure holding a sword, styled with raw HTML and CSS, while the accompanying code shows D3’s `select` function and local ES6 module imports. The visualization highlights D3 v7’s data-handling capabilities within a static SVG rendering.

Feb 28, 2022
Loading thumbnail…

ICE-4

A yellow smiley face is drawn in the center of a 960x500 SVG canvas, with two eyes, a mouth, and eyebrows. The code uses D3.js v5 to select the root SVG element and append a group, circle, and path for the face and mouth. The animation animates the eyebrows upward and back down over four seconds by applying sequential D3 transitions to the group's transform attribute. All shapes are styled with SVG attributes for fill, stroke, and dimensions, and the example demonstrates fundamental DOM manipulation with D3's `select`, `append`, `attr`, and `transition` APIs.

Feb 21, 2022
Loading thumbnail…

ICE-4

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The face is drawn as an SVG circle with two eye circles, a mouth created using the `d3.arc` path generator, and rectangular eyebrows. The eyebrows animate by chaining two `transition` calls with `duration(2000)`, moving them upward and then back to their original position. The code uses `d3.select` and `d3.arc` from D3 v5, with all elements appended to a centered `<g>` group within an SVG canvas.

Feb 20, 2022