momopng

ICE - 8 :Part-2 Task-1 Family Tree

This interactive family tree visualizes hierarchical relationships using a collapsible node layout, with each generation colored differently (red, yellow, green, orange) based on the `type` field in the JSON data. The D3.js v3 implementation uses `d3.layout.tree` to compute node positions and SVG elements for rendering, including custom rectangles with drop shadows, tooltips, and animated transitions on click. The view supports zoom and drag interactions through `d3.behavior.zoom`, while a breadth-first traversal dynamically adjusts the canvas dimensions based on tree depth and width.

Apr 3, 2022

ICE 8 part-B Trees and Networks

This visualization displays a small network of seven named individuals connected by weighted links, with each node colored blue and labeled in green. The graph uses a force-directed layout via `d3.layout.force` to position nodes and links, and supports dragging nodes interactively. Data is loaded from a local `data.json` file containing node names, group assignments, and link weights, with stroke widths scaled by the square root of each link’s weight. The SVG rendering is implemented using D3 v4 and v2 scripts, with CSS styling for node circles and text.

Apr 2, 2022

ICE-8 part-A Task2 - Country Map

This visualization displays a map of the United States using an Albers equal-area conic projection. It shows landmasses, state boundaries, and a sphere outline, with states rendered in light blue and internal borders in teal against a white background. The code uses React to manage data loading via useEffect and useState, fetching GeoJSON from a TopoJSON file via d3.json. D3’s geoPath and geoAlbers generate SVG paths, while topojson’s feature and mesh functions extract nation boundaries and state interiors for rendering.

Apr 2, 2022

ICE-7 Pie Chart Q2

This pie chart visualizes 2015 US vehicle sales by brand, broken down by YTD sales figures for each manufacturer. The chart uses an SVG rendering with D3 v5’s `pie` and `arc` generators to create segments, while `scaleOrdinal` assigns a distinct color to each brand. Data is loaded asynchronously from a CSV file via `d3.csv`, with sales values formatted in thousands using `d3.format`. A legend on the right lists each brand alongside its corresponding sales total, providing a clear comparison of market share among the eleven included companies.

Reusable Scatter Plot ICE-7

This example presents an animated scatter plot of the Iris Dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while sepal length remains on the y-axis. Dots are colored by species (setosa, versicolor, virginica) using green, red, and blue. The chart uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, built as a reusable function with setters for width, height, data, margins, and radius. SVG rendering and a setInterval drive the animation.

ICE7 Area Chart Q4

This area chart displays India’s death counts from 1960 to 2020, with a smooth curve filling the space beneath the line. D3 v5 loads CSV data from a GitHub gist, parses dates and numeric values, and renders an SVG using `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft`. The chart includes labeled axes, a title, and gridlines, with all styling defined in an external stylesheet.

ICE7 Line Chart Q3

This line chart shows India’s death counts from 1960 to 2020, with time on the x-axis and the number of deaths on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG path. Data is loaded via `d3.csv` from a GitHub gist and parsed into `Date` and numeric values. The chart includes labeled axes, a title, and a blue stroke for the line, with grid lines drawn by the axes’ tick sizes.

bar viz for testing

This example visualizes death rates by year using a horizontal bar chart, with each bar’s length encoding the death count and the y-axis listing years. The chart is rendered as SVG using D3.js v5, primarily leveraging `d3.csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` for tick generation. Data is sourced from a CSV file, and death values are multiplied by 1,000 before plotting. Styling is applied via CSS, setting bars to steelblue and customizing axis text.

Bar chart visualization using d3.js

This example displays a horizontal bar chart of death rates across different years, sourced from a custom dataset loaded via `d3.csv`. The bars are rendered as SVG rectangles within a React component, using D3 v5 scales (`scaleLinear` for the x-axis and `scaleBand` for the y-axis) and axes (`axisLeft`, `axisBottom`). The chart highlights numeric formatting on the x-axis and includes custom axis labels, with grid lines removed for a cleaner visual.

Scatter plot visualization of iris data using d3.js ICE-6

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width for each observation while coloring points by species (setosa, versicolor, or virginica). Positioned using d3.scaleLinear and d3.extent, circles are rendered in SVG with fixed radius, while additional sepal measurements are attached as rx and ry attributes. Axes are generated with d3.axisLeft and d3.axisBottom, and labels annotate both dimensions and the chart title. Data loads via d3.csv from a remote GitHub gist.

Bar viz using d3 testing

This example displays horizontal bars ranking the top 20 most-traded securities on Brazil’s B3 exchange by volume, with tick labels formatted using d3’s `format('.3s')`. The chart is built in SVG using D3 v5, loading data from a CSV via `csv()`, scaling values with `scaleLinear` and `scaleBand`, and rendering axes via `axisBottom` and `axisLeft` in a straightforward bar-viz demonstration.

Creating a dataset and using the dataset on webpage

This example demonstrates how to load an external CSV dataset and display basic metadata about it on a webpage. The page fetches a CSV file from a GitHub gist using D3’s `d3.csv` method, then calculates and presents the dataset’s size in kilobytes, row count, and column count in a `<pre>` element. Alongside this textual summary, a static SVG triangle is rendered as an image. The visualization relies on D3 v7’s CSV parsing and formatting APIs, with styling handled through external CSS and inline HTML.

Feb 25, 2022