Eshwarreddyt

@Eshwarreddyt·12 public vizzes

ICE8 Network Graph

This interactive network graph visualizes friendships among a group of ten people, with nodes representing individuals and edges denoting "Friend with" relationships. The visualization uses D3’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes, rendering them as sky-blue circles with labels in an SVG. Users can drag nodes to rearrange the network, and hovering highlights a node with a thicker stroke, as implemented via `d3.drag` and CSS class toggling.

Mar 29, 2023

Loading thumbnail…

ICE8 Animal Tree

This interactive visualization shows a hierarchical animal classification tree, mapping the relationships between major taxonomic groups from the root "Animals" down to specific classes like Mammals, Birds, and Insects. The layout uses colored node strokes and level-based colors to distinguish parent categories from leaf nodes. Built with React and D3.js version 3.5, the diagram uses the `d3.layout.tree` function and SVG diagonal paths to draw curved links, with smooth animated transitions when nodes update or expand. The tree data is embedded directly in the code as a JSON array.

Mar 28, 2023

Loading thumbnail…

ICE8 Country Map

This example shows a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale. The map uses a Mercator projection and renders SVG paths via d3.geoPath. State boundaries are drawn from TopoJSON data loaded with d3.json, and each path includes a tooltip title showing the state name. The color scale is created with d3.scaleOrdinal and d3.schemeCategory10, while the SVG is selected using d3.select.

Mar 28, 2023

Loading thumbnail…

ICE 8 WORLD MAP

This interactive world map visualizes global landmasses and oceans in a static SVG rendering. It uses D3 v5 with the natural Earth projection, rendering ocean as a sky-blue sphere and countries in brown with black borders. The code loads TopoJSON world data, converts it to GeoJSON features, and projects it onto an SVG canvas using the geoNaturalEarth1 and geoPath APIs. The map demonstrates geographic projection and vector-based cartographic rendering without additional interactivity or animation.

Mar 28, 2023

Loading thumbnail…

ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, encoding sepal length against a cycling x-axis that rotates through petal width, sepal width, petal length, and sepal length every 10 seconds. Points are colored by species using `d3.scaleOrdinal` with `schemeCategory10` and shaped via `d3.symbol` with distinct symbols per species. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with `selectAll` and `.join` for SVG updates, rendering animated transitions as the axis changes.

Mar 13, 2023

Loading thumbnail…

ICE 7-4 Area Chart

This area chart shows bike sales in India from 2012 to 2022, using a time-scaled x-axis for years and a linear y-axis for sales volume. The visualization combines a black line path with a grey filled area beneath it, drawn using SVG via D3 v5’s `line()`, `area()`, and `curveBasis` generators. Data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are created using `axisBottom` and `axisLeft` with custom tick formatting. The chart includes labeled axes and a rotated y-axis label.

Mar 12, 2023

Loading thumbnail…

ICE 7-3 Line Chart

This example visualizes bike sales in India from 2012 to 2022 using a line chart rendered as an SVG. It loads a CSV dataset, parses the year and sales values, and uses `d3.scaleTime` and `d3.scaleLinear` to map the data to axes. The chart draws a single line with `d3.line`, applies grid lines via `axisBottom` and `axisLeft`, and includes labeled axes with custom formatting. The code uses D3 v5 modules imported directly, and styling is applied through an external CSS file.

Mar 12, 2023

Loading thumbnail…

ICE - 7-2 Pie Chart

This example visualizes the top 10 most populated states in India as a pie chart, labeling each slice with its population in millions and pairing it with a color-coded legend. The chart’s slices use a d3.pie layout, with d3.arc generating the segment paths and d3.scaleOrdinal assigning categorical colors. Data is loaded asynchronously from a CSV via d3.csv, then rendered to SVG, with text labels positioned using the arc generator’s centroid method and a custom legend built from grouped SVG elements.

Mar 12, 2023

Loading thumbnail…

Penguin Data Scatter Plot

This visualization displays a scatter plot of penguin data, comparing flipper length on the x-axis against body mass on the y-axis. Each circle represents a penguin, colored by species (orange for Adelie, gray for Gentoo, black for the default species), with a fixed radius of 5 pixels. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG elements in a React framework. Axis labels are added via appended text, with the title "Scatter Plot" displayed near the top.

Mar 9, 2023

Loading thumbnail…

ICE 6 Rendering Marks and Channels

This example shows a bar chart of the top 10 most populated states in India, using horizontal bars to encode population size. The chart loads data from a CSV file via `d3.csv` and renders with React and SVG. It uses `d3.scaleBand` for the y-axis state categories and `d3.scaleLinear` for the x-axis population values, with `d3.max` to determine the scale domain. Axes are drawn manually using SVG elements rather than d3 axis components, and gray grid lines are added for each tick value.

Mar 8, 2023

Loading thumbnail…

ICE-5 The Shapes of Data

This example displays metadata about a Chipotle stores dataset, reporting its size in kilobytes, row count, and column count. The visualization is a simple HTML page that uses D3.js (version 7) to fetch and parse the CSV data from a remote URL via the `d3.csv` function. The page presents the metadata as plain text in a styled `<pre>` element, with a background image embedded through CSS. The code also includes a link to view the raw dataset, and the output updates dynamically after the data loads.

Mar 1, 2023

Loading thumbnail…

11506566 - Smiley face

A cartoon smiley face with animated eyebrows and a mustache, beard, ears, teeth, and hair is rendered in SVG. The face is constructed using D3 selections and shape generators, including `arc` for the mouth and `line` with `d3.curveBasisClosed` for the mustache and beard. Eyebrows animate via chained `transition().duration(2000)` calls that move them up and down. The example demonstrates fundamental DOM manipulation with D3 v5, building all elements from hardcoded coordinates and attributes rather than external data.

Feb 23, 2023