E

EeshwarReddy

@EeshwarReddy·25 public vizzes

Loading thumbnail…

ICE8 Social Network

A force-directed network diagram visualizes the friendships among eight people in a social group, using orange circular nodes and directed links with arrowheads to show one-way relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while the code also implements drag interactions and hover highlighting via mouseover and mouseout events. Node positions update on each simulation tick, with labels displayed at the center of each node. The data comes from a JSON file containing node IDs and link definitions.

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes a hierarchical dataset of car types, from the root “Car” down to specific models like “Toyota Camry” and “Jeep Wrangler.” Rendered with D3 v3 and SVG, nodes are color-coded by type and displayed as rectangles with text labels, while links include directional arrows. The layout recalculates on load and supports zooming and dragging via `d3.behavior.zoom`, with click interactions to toggle node collapse and expand. Data comes from a JSON file containing nested `children` objects, and animations are applied during updates using D3’s `transition` methods.

Loading thumbnail…

ICE 8-Mexico map

A choropleth-style map of Mexico renders state boundaries as red-stroked gray polygons using a Mercator projection, centered on the country with d3.geoPath and d3.geoMercator. React fetches TopoJSON state data from a GitHub-hosted file via d3.json and converts it to GeoJSON features with topojson.feature. The SVG visualization includes graticules and sits on a white background, with state shapes filled gray and no color encoding for quantitative data.

Loading thumbnail…

Fork of Fork of Fork of India Map

This example displays a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale and labeled with its name. It uses a Mercator projection configured through `d3.geoMercator` and renders geographic features via `d3.geoPath`. State boundaries and names come from a TopoJSON file loaded with `d3.json`, processed through `topojson.feature`, and drawn as SVG paths. The code assigns colors using `d3.scaleOrdinal` with `schemeCategory10`.

Loading thumbnail…

World Map ICE 8

This example displays a world map using an equirectangular projection, with individual countries colored brown against a blue sphere background. Hovering over a country highlights it in dark orange. The visualization is rendered as SVG using D3 v5, with geographic paths generated by `d3.geoPath` and country boundaries derived from the world-atlas TopoJSON dataset. The `geoEquirectangular` projection defines the map layout, while CSS hover rules handle the interactive highlighting.

Loading thumbnail…

Fork of ICE-8 World Map and USA Maps

This interactive example lets users switch between a world map, US states, and US counties. The React component fetches TopoJSON data from the `world-atlas` and `us-atlas` CDNs, converts it to GeoJSON with `topojson.feature`, and renders SVG paths using `d3.geoPath` and either `d3.geoNaturalEarth1` or `d3.geoAlbersUsa` projections. Buttons toggle the active dataset and map type, with the SVG clearing and redrawing on each change.

Loading thumbnail…

ICE 7 Line Chart

This line chart shows the number of U.S. immigrants per year from 2006 to 2021, with the year on the x-axis and immigrant counts on the y-axis. The data is loaded from a CSV file hosted on GitHub using d3.csv. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render an SVG path, with styled tick lines, axis labels, and a title. The chart displays red line segments on a white background with labeled axes.

Loading thumbnail…

ICE 7 Area Chart

This area chart displays the number of USA immigrants from 2006 to 2021, with the data loaded from a CSV file and rendered as an SVG. The visualization uses D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and `d3.area` with a `curveBasis` smoothing function. The chart combines a red line trace with a blue filled area beneath it, while axis labels and tick formatting are applied via D3’s axis and format utilities.

Loading thumbnail…

ICE 7 Pie Chart

This example shows the top 10 countries and their total medal counts from the 2016 Olympics as a pie chart, with a legend listing each country and its numerical total. The chart is rendered as SVG using D3 v5, with the pie layout and arc generator creating the segments from a CSV dataset fetched from a GitHub gist. A scaleOrdinal maps the total values to a fixed array of section colors, and legend entries are built from the same pie data, formatting values with d3.format.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris Dataset, showing the relationship between petal width and sepal length with distinct symbols for each species. Built with a custom scatterPlot function, it uses D3's `scaleLinear` and `scaleOrdinal` for axes and symbol scaling, `axisLeft` and `axisBottom` for axis rendering, and `symbol().size()` to generate varied path shapes. The SVG output fills the browser window, with margins and a fixed symbol size of 100, while the data is parsed from a remote CSV, converting numeric columns to numbers before plotting.

Loading thumbnail…

Fork of ICE-6

This visualization shows the tempo of the top 15 most-streamed songs on Spotify, displayed as a horizontal bar chart. The bar lengths correspond to each song’s tempo value, with song titles listed on the y-axis and tempo ticks on the x-axis. Built with React and D3 v5, the code uses `d3.csv` to load remote data, `scaleBand` and `scaleLinear` for scaling, and renders bars and axes as SVG elements computed from the data.

Loading thumbnail…

ICE-6

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each point by species using a custom color function. The code loads data from a CSV file via `d3.csv`, scales the axes with `scaleLinear` and `extent`, and renders circles with SVG. Axis ticks are drawn using `axisLeft` and `axisBottom`, with text labels added for both axes and a title.

Loading thumbnail…

ICE-6

This example visualizes the tempo of the top 15 most-streamed Spotify songs as a horizontal bar chart. The chart uses React state management with `useState` and `useEffect` to load data via `d3.csv`, then renders SVG bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axis ticks and labels are generated manually with `xScale.ticks()` and `yScale.domain()`, while the bar widths are computed from each song's tempo value. The data comes from a GitHub-hosted CSV file listing the top 100 streamed songs.

Loading thumbnail…

ICE5

This page displays metadata about the Top 100 streamed songs dataset, including its size in kilobytes, row count, and column count. The information is rendered as plain text in a preformatted element. The code uses D3 v7's `d3.csv` to load a remote CSV file and `d3.csvFormat` to calculate its size. The page is styled with CSS, featuring a background image of a Top 100 chart and centered headings.

Loading thumbnail…

ICE5

This example displays metadata about the Top 100 streamed songs dataset, including its size in kilobytes, row count, and column count, on a page with a background image of the dataset. The code loads the CSV using `d3.csv` and computes the metadata with `d3.csvFormat` to measure string length. It presents this information in a `<pre>` element while the page uses CSS for styling, including a background image loaded from a URL. The project uses D3 v7 and is built as a minimal HTML page with JavaScript.

Loading thumbnail…

ICE5

This visualization displays metadata about the Top 100 streamed songs dataset. It shows the file size in kilobytes, the total number of rows, and the number of columns, presented in large centered text. The page loads a CSV from a GitHub gist, and uses the D3.js library's `d3.csv` and `d3.csvFormat` functions to fetch and measure the data. A background SVG image of the top 100 songs is set via CSS, while the computed metadata is written to the page using JavaScript's DOM manipulation.

Loading thumbnail…

Fork of homework smiley face

A static smiley face is rendered as a single SVG graphic in a React component. The face is composed of D3-generated arc paths for the mouth, ears, and eye highlights, alongside plain SVG circles, ellipses, lines, and a custom path for hair. The code uses React 17, D3 v7’s `arc` method, and ReactDOM to mount the SVG directly into the page. The drawing is centered in a 960×500 viewport using a translation transform group.

Loading thumbnail…

Fork of Cat smiley

This interactive visualization, built with React and D3.js v7, renders a stylized cat smiley face as a static SVG graphic. The code constructs the face using D3 arc generators (`d3.arc`) to define the cat's mouth, eyes, and ears, and combines these with standard SVG shapes like circles, ellipses, and lines for facial features. The rendering leverages React's declarative component model to structure the SVG output, with the entire composition centered on a fixed canvas.

Loading thumbnail…

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

This example shows a yellow face built with D3.js v5, rendered as animated SVG elements. A circle forms the head, two circles create the eyes, and an arc generates the mouth. The eyebrows, drawn as rectangles, animate upward and then back down using chained `transition` calls with a two-second duration. All shapes are positioned within a centered group using SVG transformations. The code imports `select` and `arc` from D3, and reads the SVG dimensions from the DOM attributes to set the layout dynamically.

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.

Loading thumbnail…

Fork of Smiley Face Part III

A stylized smiley face is rendered in SVG, with a yellow circular head and black outline. The face features asymmetrical eyes (one white, one light blue with a green stroke), dark pupils, a purple nose, grey eyebrows, and a wide, open mouth created from arcs. Hair is suggested by a black path at the top. The composition is built using React, with D3's `arc` function generating the curved shapes for the mouth and brows, and SVG `transform` attributes rotating and translating these elements.

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3.js v5 application renders a stylized smiley face as an SVG, with radial gradients for the face and concentric arcs for the mouth and eyebrows. The code uses `d3.arc` to define the mouth and brow shapes, then applies SVG transforms like `rotate` and `translate` to position them asymmetrically. Eyes, pupils, and a purple nose are drawn as primitive circles and paths, with distinct stroke and fill colors (e.g., green stroke on the right eye) to add character. The face’s layout is computed from fixed constants in JavaScript, and the entire graphic is composed inside a single `<g>` element centered on the canvas.

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3.js v5 application renders a stylized smiley face as an SVG, with radial gradients for the face and concentric arcs for the mouth and eyebrows. The code uses `d3.arc` to define the mouth and brow shapes, then applies SVG transforms like `rotate` and `translate` to position them asymmetrically. Eyes, pupils, and a purple nose are drawn as primitive circles and paths, with distinct stroke and fill colors (e.g., green stroke on the right eye) to add character. The face’s layout is computed from fixed constants in JavaScript, and the entire graphic is composed inside a single `<g>` element centered on the canvas.

Loading thumbnail…

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

This D3.js example builds a simple animated smiley face out of SVG shapes, including a green head, eyes, eyebrows, and a mouth. The visualization demonstrates fundamental DOM manipulation by selecting the SVG canvas and appending groups and shapes with attributes like position, radius, and color. It uses `d3.select` for element selection, the `arc` generator for the mouth path, and chained `transition` calls to animate the eyebrows moving up and down over two-second intervals. The scene is static except for this repeating eyebrow motion.

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in SVG, with the face constructed from D3.js v5 primitives including `select`, `append`, `arc`, and attribute setters. The eyes and mouth are drawn as circles and an arc path, while the eyebrows are rectangles that move up and down using chained `transition().duration()` calls. The code demonstrates fundamental DOM manipulation by building the figure from scratch and applying a two-second animated transform to the eyebrow group.