divyakota99

ICE8 - Animal Groups

This visualization displays a hierarchical tree of animal groups, from broad categories like "Wild" and "Normal" down to specific examples such as "Tiger," "Lion," "Cat," and "Dogs." Rendered as an SVG with animation, it uses D3 v3’s `d3.layout.tree` to compute node positions and supports interactive zoom and drag via `d3.behavior.zoom`. Node colors correspond to a `type` field in the JSON data, with tooltips and a drop-shadow effect for visual enhancement.

Jul 9, 2022

ICE 8 Animals Tree

This example visualizes a hierarchical animal taxonomy as a tree, with green circles representing each node and red lines tracing the connections between parent and child categories. The dataset is manually defined in JavaScript, listing animals such as Wild, Tiger, Lion, and Pets, with branches extending to species like Cheeta, Black tiger, and Dog. The visualization uses D3.js v6’s `d3.stratify` and `d3.tree` layout to position nodes, while SVG circles and paths render the structure. Animated transitions animate the links drawing downward, and text labels appear with staggered delays based on node depth, bringing the classification hierarchy to life.

Jul 9, 2022

ICE 8 India Map

This example displays a choropleth map of Indian states rendered as SVG paths, with each state filled using a categorical color scale and labeled with its name at the centroid. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the boundaries, while `topojson.feature` extracts the geometry from a remote India states dataset. State polygons are hover-highlighted via CSS, and the color scheme is generated with `d3.scaleOrdinal` and `schemeCategory10`.

Jul 7, 2022

ICE 8 World Map with Topojson Data

This visualization displays a world map rendered as an SVG, with country boundaries drawn from TopoJSON data sourced from the world-atlas dataset. It uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` to project and draw each country as a blue path with white strokes, while a white sphere outlines the globe. The `topojson.feature` method converts the TopoJSON topology into GeoJSON features for rendering. Hovering over any country changes its fill color to orange via CSS.

Jul 7, 2022

Fork of Historical Space Launches on a map

This interactive visualization combines a bubble map of historical space launch sites with a time-series histogram of launch counts. The map uses D3’s `geoEqualEarth` projection and `geoPath` to render landmasses, while circle radii are scaled with `scaleSqrt` based on launch frequency per site. A brushing interface on the histogram, implemented with `d3.brushX`, filters the map to show launches within the selected date range. The application is built with React, loads CSV data from a GitHub gist, and renders all graphics as SVG elements.

Jul 7, 2022

ICE-7 Area Chart Divya

This area chart visualizes year-wise death rates, plotting cost values over months using a smooth curved line. The chart is rendered as an SVG within a React framework, using D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate the path elements. Data is loaded from a CSV file via `csv()` and parsed with `d3.timeParse`, with the y-axis formatted using `format('.3s')`. Gray shading fills the area beneath the black line, while gridlines and axis labels provide context for the time series.

ICE-7 Line Chat Divya

This chart shows the year-wise death rate as a line graph, with months on the x-axis and the number of deaths on the y-axis. Built with D3 v5, it loads CSV data from a GitHub gist, parses dates using `d3.timeParse`, and renders the visualization as an SVG. The chart uses `scaleTime` and `scaleLinear` for axes, with gridlines and labels styled via CSS, and a black line path drawn using D3's `line` generator.

ICE 7 Line Chart Divya

This line chart shows monthly car sales in India from 2009 to 2019, with time on the x-axis and sales counts on the y-axis. It is built with D3 v5 and rendered as SVG, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the plot. Grid lines and labels are styled via CSS, and the data is loaded from a CSV file using `d3.csv` before being parsed and drawn.

ICE-7 Area Chart Divya

This area chart shows mobile device deaths over time, with the x-axis representing months and the y-axis representing the number of deaths. The chart uses a smooth basis curve to render both the line and the gray filled area beneath it, making trends visually prominent. The visualization is built with React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axis scaling, `line` and `area` generators with `curveBasis` for the path, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a remote CSV file and parsed using D3's `timeParse` before rendering in an SVG canvas.

ICE-7 Area Chart Divya

This area chart visualizes mobile phone prices across different countries, using death statistics as a proxy for market demand. The visualization employs D3.js v5 within a React framework, rendering an SVG with smoothed lines and filled areas. The chart maps country data on the x-axis and death counts on the y-axis, with data loaded from a GitHub gist CSV file. The code uses D3's `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` functions to create the smooth area chart, complete with labeled axes and gridlines.

ICE 7 Reusable D3 Scatter Plot Divya

This reusable scatter plot visualizes room measurements from the Iris dataset, with each point’s shape encoding species and axes dynamically cycling through four numeric columns every 15 seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, `axisBottom`, and `join` for SVG rendering. The chart animates by resetting its x-value accessor and re-invoking the chart function, demonstrating the reusable chart pattern.

ICE - 7 Pie Chart Divya Kota

This pie chart visualizes the top 10 countries’ deaths in 2020 attributed to air pollution, using a colorful segmented donut-style layout with each slice labeled by its death count in thousands. The chart is rendered in SVG and built with React, leveraging D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate the arcs and legend. Data is loaded asynchronously from a CSV file via `d3.csv`, and each slice’s fill color is mapped from a fixed array. A legend on the right pairs country names with their corresponding death values.

Fork of Hello VizHub

This example demonstrates a minimal integration of D3.js with ES6 modules in a VizHub project, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN via UNPKG, import the `select` function from D3, and import a local string from `myMessage.js`. The code uses `select('#message').text(message)` to set the content of a div, with CSS styling for large centered text. No data visualization or animation is present; it focuses on setup and module usage.

Fork of HTML Starter

This example displays a static web page with the message “Hello HTML!” centered and styled with large, bold text. It demonstrates a minimal setup using raw HTML, embedded CSS within a `<style>` tag, and no JavaScript logic beyond the document structure. The page relies on standard HTML elements and CSS properties, specifically a `.message` class that sets the font size and text alignment. It serves as a basic starting point for building more complex visualizations or interfaces in a web browser.

Fork of ICE - 7 Pie Chart Maanas Katta

This D3.js (v5) visualization presents a pie chart of the top 10 countries by air pollution-related deaths in 2020, with each slice labeled with the death count in thousands and a corresponding color-coded legend listing country names and values. The SVG-based chart is rendered using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, with data fetched from a CSV file via `d3.csv`. Slice labels are placed using the arc centroid for positioning, while a legend is built separately with appended rectangles and text elements.

Fork of United Nations Bar Chart with SVG

This example visualizes the 2020 population estimates for the ten most populous countries, displaying horizontal bars with each country’s flag positioned at the end of its bar. Built with React and D3 v7, it loads CSV data via `d3.csv`, scales the values using `scaleLinear` and `scaleBand`, and renders the chart as an SVG. Flags are embedded as external SVG images using `xlink:href`, creating a visually distinctive and informative comparison of population sizes across nations.

Fork of ICE-6: Rendering Marks and Channels with React & D3

A horizontal bar chart displays revenue per month for twelve products from a supermarket dataset, loaded via `d3.csv` from a GitHub Gist. React state and hooks manage the asynchronous data loading, while D3’s `scaleBand` and `scaleLinear` map product categories and revenue values to SVG rectangles. Axes and gridlines are manually rendered with D3’s `ticks` and positioned using SVG transforms, with React generating the markup for each element.

Fork of Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart ranking the ten most populous countries, with the heading “highest population” and bars rendered in steelblue. It loads CSV data from a GitHub gist, parses the population column, and uses React hooks (useState, useEffect) to manage asynchronous data loading. D3 v5 modules (scaleBand, scaleLinear, max, csv) compute the scales and data parsing, while React elements generate SVG rects and tick labels. The visualization demonstrates a hybrid approach where D3 handles data preparation and scales, and React handles the rendering of marks and axes.

Untitled

This visualization displays a horizontal bar chart comparing the top 12 countries by population, with bars extending from a shared origin. It uses React for component management and D3 v5 for data processing and chart construction, specifically leveraging `d3.csv` to load data and `d3.scaleBand` and `d3.scaleLinear` to map categories and values. The SVG rendering includes blue grid lines and axis labels, though the title mentions "Markers and Channels" while the on-screen heading reads "top 10 most countries." The bars are rendered as `rect` elements positioned and sized using the computed scales.

Welcome to Flavors

The visualization displays a colorful, patterned canvas of flavor-themed imagery, rendered as a static SVG composed from a single base64-encoded PNG image. The page, built with React, uses this embedded image as a repeating pattern to fill the entire 600 by 420 viewport via SVG `<pattern>` and `<image>` elements. It does not use D3.js or interactive features, serving instead as a simple visual introduction with a custom graphic.

Jun 23, 2022

Fork of Cat smiley

A stylized cat smiley face rendered as an SVG in React, using D3 v7 arc generators for the mouth, eyes, and ears. The face is built from layered circles, ellipses, and lines, with colored arcs and strokes defining features like pink cheeks, red eyes, and a purple border. The component calculates geometry via `d3.arc()` for curved ear and eye shapes, then transforms them with rotation and translation properties, all within a fixed 850×455 viewport.

Jun 19, 2022

Fork of Let's make a face with

This example uses D3.js v5 to construct an animated smiley face directly in SVG. The code builds the face from primitive shapes—a blue circle for the head, two black circles for eyes, and a small arc path for the mouth—while defining the eyebrows as rectangles within a group. The eyebrows animate by automatically transitioning the group’s transform attribute upward and then back down, creating a continuous raising and lowering motion. The visualization demonstrates fundamental DOM manipulation, using D3’s selection, attribute, and transition methods to choreograph a simple, playful animation.

Jun 19, 2022

Fork of Data_Visualization_YellowFace_PY

A hand-drawn style smiley face built with D3 v7, rendered as SVG shapes. The face consists of a yellow circle with a blue outline for the head, two black circles of different sizes for the eyes, and a mouth created using the `d3.arc()` path generator with specified inner and outer radii and start/end angles. The code uses static, hardcoded coordinates for the head, positioned at (480, 250) and eyes at (350, 180) and (600, 180), with a transform offset of (450, 300) applied to the mouth group. The example demonstrates basic geometric shape composition and D3’s arc API.

Jun 18, 2022