brindapotluri

@brindapotluri·12 public vizzes

ICE8 - Social Network Graph

This network graph displays eight fictional people as circular nodes connected by directed links labeled “Friend with,” with link thickness encoding relationship value (1 or 5). Using D3 v6’s `d3.forceSimulation`, the layout applies charge, collision, and center forces, while links are drawn as SVG lines with arrowhead markers. Text labels appear inside each node, and pointer interactions trigger `mouseover`/`mouseout` handlers to add a hover highlight via the `nodeHover` CSS class. Nodes are draggable through D3’s drag behavior, and all data comes from a local `data.json` file.

Apr 4, 2022

Loading thumbnail…

Family Tree

A family tree visualization renders hierarchical relationships from a JSON data structure. The D3.js v3 layout algorithm positions nodes in a tree layout, with each family member displayed as a colored rectangle containing their name. Clicking a node collapses or expands its children, triggering smooth animated transitions. The visualization uses SVG elements, D3's `d3.layout.tree()`, and `d3.behavior.zoom()` for panning and zooming, with jQuery handling interactions and tooltips that appear on hover.

Apr 4, 2022

Loading thumbnail…

ICE8 - USA Map

This interactive visualization displays the United States as a graticule-covered globe, with state boundaries drawn as interior lines against a landmass filled in white. It uses a React component with GeoJSON data from the us-atlas package, which is processed by topojson’s `feature` and `mesh` functions. The map is rendered using `d3.geoAlbers` and `d3.geoPath` to project the sphere and land features, with the sphere and interiors styled in a muted pink-gray.

Apr 4, 2022

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using a natural Earth projection, with countries rendered as yellow-filled paths with subtle black borders against a blue sphere representing the globe. The map is drawn as SVG paths generated by `d3.geoPath` and `geoNaturalEarth1` from D3 v5. Geographic data comes from the World Atlas TopoJSON file loaded via `d3.json` and converted to GeoJSON using TopoJSON’s `feature` function.

Apr 4, 2022

Loading thumbnail…

Area Chart Data Visualization

This area chart shows Tesla stock price over time, with a red line tracing yearly price changes and a light pink fill underneath to emphasize the area between the line and the baseline. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` to map date and price data from a CSV, while the `line` and `area` generators with `curveBasis` create the smooth connected path and filled region. Data is parsed with `d3.timeParse` and rendered as SVG.

Mar 28, 2022

Loading thumbnail…

Line Chart- Data Visualization

A line chart displays Tesla’s daily stock price over time, with the year on the x-axis and price on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the path. Data is loaded from a CSV file and parsed with `d3.timeParse`. The chart includes labeled axes and a clean grid, with the line styled in black for clarity.

Mar 28, 2022

Loading thumbnail…

Pie Chart

A pie chart displays the population distribution of the top ten most populous countries, with each slice sized proportionally and color-coded via a categorical scale. The chart renders as an SVG, generated from CSV data loaded from a GitHub gist. Using d3.pie and d3.arc, the visualization constructs the circular segments, while d3.scaleOrdinal with schemeCategory10 assigns slice colors. A legend on the right lists each country with its corresponding color swatch and population value, and hovering over a slice logs the population to the console.

Mar 28, 2022

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This example presents a scatter plot of the Iris dataset, cycling through different floral measurements on the x-axis while coloring points by species. It renders as an animated SVG, updating the axis and labels every few seconds. The visualization uses D3 v6 with a custom reusable `scatterPlot` function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create axes. Data is loaded via D3’s `csv` parser, and points are drawn with circle elements, with colors and axis titles updated dynamically through a `setInterval` loop.

Mar 28, 2022

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width to point positions, while color distinguishes the three species: setosa, versicolor, and virginica. The plot uses D3.js v6 with an SVG rendering, employing `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.extent` to set the scales. Separately, sepal length and width are encoded into the marker's width and height, though the ellipse-like shapes still use `r` for a uniform radius. Axis labels are added via SVG text elements, and the visualization adapts to the window size.

Mar 7, 2022

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays GDP per capita for twelve countries, using horizontal bars to compare values. Built with React and D3 v5, the code defines scales with `scaleBand` and `scaleLinear`, renders SVG rectangles for bars, and generates axes with `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV file via `d3.csv`.

Mar 7, 2022

Loading thumbnail…

ICE 5

This example loads the Disney movies dataset from a remote CSV file using D3 v5’s `d3.csv` and `d3.csvFormat` APIs, then displays basic metadata about the file on the page. The visualization shows a static SVG line drawing of a geometric shape with colored ellipses and grid-like lines, while the text area below reports the dataset’s size in kilobytes, row count, and column count. The SVG is hand-coded in HTML, and the data summary is rendered into a `<pre>` element. No interactive or data-driven visual encoding is present; the graphic is independent of the loaded dataset.

Feb 28, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders an emoji-like yellow face with ears, eyes, and a curved mouth using Scalable Vector Graphics (SVG) in a React application. The face is built with D3’s `arc()` generator to create the ear and mouth shapes, while plain SVG circles form the eyes and head. The code positions elements by grouping them with `<g>` transforms around a central point, and demonstrates refactoring by separating dimensions and offsets into named constants. It loads React, ReactDOM, and D3 v7 via UMD builds from unpkg.com, with all drawing happening declaratively through JSX.

Feb 21, 2022