H

Harishma Nallala

@ha5757·20 public vizzes

Loading thumbnail…

ICE-8

A force-directed network graph displays 13 named nodes connected by weighted links, with each node colored and labeled from the JSON data in `graph.json`. The visualization uses `d3.layout.force()` to position nodes with a charge of -500 and distance of 160, while link stroke widths vary proportionally to the square root of each edge's weight. Node positions update on each force simulation tick, and the SVG canvas renders circles with grey strokes and text labels, with drag interaction enabled through `force.drag`.

Loading thumbnail…

ICE-8

This interactive family tree visualizes three generations of the Reddy family, using a color-coded hierarchy where each level is distinguished by a distinct node fill color. Built with the D3.js library (version 3.5.17), it employs a tree layout and cubic Bézier diagonal links to connect parent and child nodes. The SVG rendering supports animation, with nodes and links smoothly transitioning as the tree expands, while node text labels identify each family member.

Loading thumbnail…

ICE-8

This visualization renders a choropleth map of India using a spherical Mercator projection, with each state filled by a categorical color scale and labeled with its name. The map is drawn as SVG paths generated via `d3.geoPath` and `geoMercator`, using TopoJSON data from the `IND_adm1` collection. State boundaries are emphasized with thick black strokes, and each state’s centroid, calculated with `pathGenerator.centroid`, positions its text label. The code loads data via D3’s `json` promise and applies `scaleOrdinal` with `schemeCategory10` for coloring.

Loading thumbnail…

World Map : ICE-8

The visualization displays a world map of ICE-8, using a geoNaturalEarth1 projection to render continents as filled countries with distinct borders. It employs d3.geoPath to generate SVG paths for the sphere and country boundaries, while the topojson feature function extracts geographic features from a world-atlas JSON dataset. The map uses color-coded fills—purple for the sphere and teal for landmasses—to highlight the global distribution of the ICE-8 phenomenon, with the data sourced from the countries-110m.json file.

Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the Iris Dataset, mapping three numeric attributes—Employed, Employed_full_time_year_round, and Total—onto the x, y, and z axes. Built with Plotly.js and D3.js, the chart renders markers with fixed size and thin blue outlines, using the dataset’s CSV loaded via `d3.csv`. Each axis features distinct background and grid colors, though the plot margins are minimized, focusing attention on the spatial distribution of data points in three dimensions.

Loading thumbnail…

3D Bar Chart

This 3D bar chart visualizes social sentiment data for the top 10 most-liked stocks and cryptocurrencies, comparing metrics like likes, posts, and price. It uses the d3-x3d library to render interactive 3D bars within an X3DOM scene, driven by D3 v5 for data loading and scaling. The visualization reads CSV data from a GitHub gist, parsing each asset’s name and its three numeric values. The chart’s multi-series layout displays each metric as a separate clustered bar group, with a custom-styled title and a blue background enhancing the visual presentation.

Loading thumbnail…

ICE - 7

This interactive scatter plot animates through different attributes of a college dataset, cycling the x-axis among Unemployment_rate, Employed_full_time_year_round, Unemployed, and Employed every 1.9 seconds while the y-axis remains fixed on Employed. Each point represents a major category, colored distinctly by its category, with a reusable scatterPlot module built on D3's scaleLinear, axisLeft, and axisBottom. The SVG visualization, rendered on a wheat background, uses the Share Tech font and updates labels dynamically to reflect the current x-axis metric.

Loading thumbnail…

Area Chart

This area chart visualizes the growth of Netflix users from 2001 to 2011, using a pink filled area beneath a black line to emphasize the upward trend. The chart is rendered as an SVG using D3 v5, with the `scaleLinear` function for both the x (Year) and y (Users) axes, and `axisLeft` and `axisBottom` for tick marks. The line and area shapes are generated via `line()` and `area()` with a `curveBasis` for smoothing. Data is loaded from a CSV file and parsed using D3’s `csv` method, with custom tick formatting applied via `format`.

Loading thumbnail…

line chart visualization

This line chart visualizes Netflix user growth from 2001 to 2011, with the year on the x-axis and user count on the y-axis. The SVG chart uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to generate the path and axes. Data is loaded as CSV from a GitHub gist using d3.csv, with the date parsed via `new Date()` and user values converted to numbers. Styling includes colored tick lines, axis labels, and a title, with grid lines created through negative tick sizes.

Loading thumbnail…

Untitled

This example visualizes iPhone user data from a CSV file loaded from a GitHub gist. Using D3’s `csv` function, the data is fetched asynchronously and returned as an object. The visualization likely maps user attributes into a graphical layout, though the code excerpt only shows data loading and does not include rendering logic. It relies on standard D3 data-handling APIs, with the source URL indicating a public dataset of iPhone users. The visualization’s appearance and interactive behavior are not specified in the provided code.

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes the top 9 COVID-reported states in India as a pie chart, with each slice sized by the number of cases and accompanied by a legend labeling states and their case totals. The chart renders as SVG using D3 v5, employing `d3.pie` to compute slice angles, `d3.arc` to generate the paths, and `d3.scaleOrdinal` to map slice colors. Data is loaded asynchronously from a CSV via `d3.csv`, with values formatted using `d3.format`. A separate legend group uses rectangles and text to show state names and case counts.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four columns of the Iris Dataset, cycling the x-axis every two seconds. The chart uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map petal width, sepal width, petal length, and sepal length against sepal length. SVG circles render the data points with a fixed radius. The implementation follows the reusable chart pattern, with `scatterPlot()` exposing width, height, data, value, margin, and radius accessors. Data loads via `d3.csv` from a GitHub Gist, and the visualization updates through `selection.join()` and `setInterval`.

Loading thumbnail…

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

This visualization displays the top 10 most-liked companies for stocks and crypto using a horizontal bar chart. The bars are rendered as SVG rectangles, with orange fills atop a green background, and the chart includes axis tick marks and labels. The code loads data from a CSV file using `d3.csv`, then uses a React component with `useState` and `useEffect` hooks to manage state. D3’s `scaleBand` and `scaleLinear` map company names and like counts, while the chart is drawn with JSX inside an SVG element, combining React’s declarative rendering with D3’s data utilities.

Loading thumbnail…

ICE6: Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each specimen while color-coding points by species. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with SVG circles as marks. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and numeric fields are coerced with a custom row parser. The chart fills the browser window, with species-specific colors assigned through a switch statement and styled with a green background.

Loading thumbnail…

Harishma Nallala

This example displays summary statistics about a dataset of top 51 football players, using an inline SVG illustration of a soccer scene as a visual backdrop. The page presents the dataset’s size in kilobytes, row count, and column count within a styled text element. The code loads the data from a CSV file via `d3.csv`, then uses `d3.csvFormat` to calculate the byte length and accesses the `data.length` and `data.columns.length` properties to compose the message. Styling is handled with CSS, while the SVG is authored directly in HTML.

Loading thumbnail…

Fork of homework smiley face

This example displays a cartoon-style smiley face rendered as an SVG using React and D3.v7. The face is composed of a pink circular head, eyes with green pupils, and multiple black lines and arcs that form eyebrows, ears, and a mouth. The code constructs these shapes using SVG primitives like circles, ellipses, lines, and paths, with the mouth and other arcs generated by D3’s `arc()` generator with specified inner/outer radii and angle ranges. React manages the component tree, while D3 provides the geometric path data for the curved elements.

Loading thumbnail…

Fork of Cat smiley

This fork of a cat smiley uses React to render an SVG face with D3-generated arcs for the mouth, eyes, and ears. The code defines the smiley with `d3.arc` for curved shapes, alongside basic SVG circles, ellipses, and lines for whiskers and facial details. It shows a pink circular face with purple stroke, red eyes with black pupils, orange cheek ellipses, and purple ear arcs positioned via transforms. The rendering relies on static D3 path calculations within a React component, with no interactive behavior.

Loading thumbnail…

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

Loading thumbnail…

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

This example builds a smiling face in SVG using D3.js v5 and React, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.arc` to generate the mouth path and `d3.select` to append and style elements. An animated eyebrow movement is achieved with chained `transition` calls that shift a group containing two rectangles up and down over two-second durations. The face is centered via SVG transforms, with positions calculated from the viewport dimensions.

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a stylized smiley face composed of SVG shapes, rendered at the center of a 960-by-500 canvas. The face consists of a pink background circle with a black stroke, two eye circles, and a mouth drawn as an arc. The code uses React components to structure the SVG elements, while D3’s `arc` generator computes the mouth path. All geometry is defined by constants like `eyeOffsetX`, `eyeRadius`, and `mouthRadius`, with the scene translated to the viewport center.