Suresh John Wesly

@SureshJohnWesly11·13 public vizzes

ICE 8 - Social Network

This example visualizes a social network of nine individuals, showing friendship connections through a force-directed graph. The nodes represent people from a provided data.json file, while the links indicate friend relationships, with line thickness reflecting connection strength. The visualization uses d3.forceSimulation with forceLink and forceManyBody to position nodes, and renders the network as SVG elements. Nodes are draggable via d3.drag, and hovering highlights them with a red stroke through the nodeHover class.

Apr 13, 2023

Loading thumbnail…

ICE 8 - Family Tree

This interactive family tree visualizes three generations of a family, starting from the root patriarch Subba Rao and branching to his children and grandchildren. The diagram uses a collapsible tree layout (via `d3.layout.tree` and SVG), where nodes are colored by generational level—orange, violet, and green—through the supplied `treeData` structure. Lines connect parents to children using `d3.svg.diagonal`, and users can click any node to expand or collapse its descendants, triggering a smooth transition animation. The page loads the D3.js v3 library from a CDN and runs entirely in the browser.

Apr 13, 2023

Loading thumbnail…

ICE 8 - Country Map

This map of the United States displays all 50 states using a geographic projection that includes territories. The visualization uses `d3.geoPath()` with a `geoAlbersUsaTerritories` projection to render the land and state borders. Geographic data comes from a TopoJSON file loaded via `d3.json()`, with `feature` and `mesh` from TopoJSON. States are filled with lawngreen, turn blue on hover, and the SVG is rendered through React components.

Apr 13, 2023

Loading thumbnail…

ICE 8 - World Map

This visualization shows a world map rendered as a spherical globe, with countries filled in yellow and outlined in green against a blue ocean. Hovering over any country turns it green. The map uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, while TopoJSON’s `feature` converts world-atlas data from a remote JSON file into GeoJSON for rendering. The SVG output includes a blue background sphere and interactive hover styling defined in CSS.

Apr 13, 2023

Loading thumbnail…

Reusable D3 Scatter Plot - 11641166

This example displays the classic Iris dataset as an animated scatter plot, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every two seconds. Symbols and colors distinguish the three species of iris flowers. The visualization is built as a reusable chart using D3.js v6, with custom scales, axes, and symbol generators for a dynamic view of the data.

Mar 26, 2023

Loading thumbnail…

D3 Area Chart - 11641166

This area chart displays Apple Inc.'s average stock price from 2000 to 2023, with a line overlaid on a light blue filled area to emphasize the trend over time. The visualization is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` and `d3.line` for the shapes, and `d3.csv` to load historical stock data from a GitHub gist. Grid lines and axis labels enhance readability, while the SVG rendering shows a bold black line and a horizontal bottom line.

Mar 26, 2023

Loading thumbnail…

D3 Line Chart - 11641166

This visualization displays the average stock price of Apple Inc. from 2000 to 2023. The line chart plots the yearly average stock price, with the x-axis representing time and the y-axis showing the price value. The chart uses D3 v7’s `scaleTime` and `scaleLinear` for axes, and `line` to generate the path. Data is loaded from a remote CSV file via `csv` and rendered as an SVG.

Mar 26, 2023

Loading thumbnail…

D3 Pie Chart - 11641166

This example visualizes the top 10 countries by total medals from the 2020 Summer Olympics dataset. It displays a pie chart with color-coded segments and corresponding medal counts, alongside a legend showing country names, medal values, and color swatches. The visualization uses D3 v7 APIs such as `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeTableau10`. Data is loaded from a remote CSV file, sorted, and rendered as an SVG with interactive mouseover logging.

Mar 26, 2023

Loading thumbnail…

ICE6 - Scatter Plot - 11641166

A scatter plot visualizes penguin measurements, plotting flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Chinstrap, or Gentoo). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`, with data loaded via `d3.csv` from a remote GitHub gist. Circle positions derive from the mapped scales, while species-specific colors are assigned through a switch statement, and axis labels and a title are appended as SVG text elements.

Mar 12, 2023

Loading thumbnail…

ICE-6 - Bar Chart - 11641166

This interactive bar chart displays the maximum salary for each of the first 20 employee locations from a CSV file. The visualization uses React to manage state and D3.js v5 for rendering, with `d3.csv` fetching the remote data and `d3.scaleBand`/`d3.scaleLinear` mapping categorical locations and salary values to SVG rectangles. Axes and gridlines are drawn manually via D3’s scale objects, and the chart updates asynchronously after data loading.

Mar 12, 2023

Loading thumbnail…

ICE5

This visualization displays metadata about a professionals dataset, reporting the file size, number of rows, and column count in a simple text summary. The page loads a CSV file using D3 v7’s `d3.csv`, then calculates the formatted data length with `d3.csvFormat` and presents the statistics in a preformatted message container. A background SVG image is applied via CSS, and the dataset is linked through an HTML anchor for further exploration.

Mar 4, 2023

Loading thumbnail…

Make a face

This example builds a stylized smiley face entirely from SVG shapes generated with React and D3’s `arc` function. The face combines circles for the head and eyes, plus multiple arcs for the ears, nose, mouth, and tongue, each positioned using SVG `transform` rotations and translations. Eye highlights, green-stroked pupils, and brown inner ears add detail. The visualization demonstrates how geometric primitives can be composed into a recognizable cartoon using d3.v7’s arc generator and React’s declarative rendering.

Feb 25, 2023

Loading thumbnail…

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

A smiling face, rendered entirely with SVG shapes, animates as its rectangular eyebrows repeatedly lower and raise over a two-second cycle. Built with D3.js v5, the visualization demonstrates fundamental DOM manipulation by using `select` and `append` to construct the face from circles, rectangles, and an `arc`-generated path for the mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that tween the rectangles' `transform` attributes, shifting them vertically within the SVG canvas.

Feb 24, 2023