PYATA SHARAN

ICE 8 - Animal Tree test

This example presents an interactive animal taxonomy tree, grouping species into Herbivores, Omnivores, and Carnivores. The visualization uses a D3.js hierarchical layout with collapsible nodes and animated transitions, rendering links as red diagonal paths. Node circles are teal, with SVG elements updating smoothly on click. The code leverages `d3.layout.tree`, `d3.svg.diagonal`, and D3’s enter/update/exit pattern to animate node positions and toggle child visibility, making the hierarchy exploreable.

Mar 30, 2023

Network Graph : ICE-8

This example shows a force-directed network graph of 13 people, with colored nodes representing individuals and weighted links indicating connections between them. The graph is rendered as an SVG using React, with data loaded from a local graph.json file. The visualization uses D3.js v2's `d3.layout.force` for layout and simulation, applying charge, distance, and size parameters to position nodes and links dynamically. Node colors come directly from the data, while link stroke widths scale with the square root of each connection's weight.

Mar 30, 2023

ICE - 8: World Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. Countries are filled with green and outlined with subtle strokes, while the surrounding sphere is colored light blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate paths, with TopoJSON's `feature` extracting country boundaries from the world-atlas dataset. It appends a sphere path first, then loads country geometries asynchronously from the CDN-hosted TopoJSON file.

Mar 28, 2023

India Map: ICE-8

This visualization displays a choropleth map of India's states, with each state filled by a distinct categorical color and labeled with its name at its centroid. The map is rendered as an SVG using the D3.js library, employing a geoMercator projection with specific translation and scaling to position the country. State boundaries are extracted from a TopoJSON file fetched via d3.json, and the d3.geoPath function generates the SVG paths. State labels are placed using the pathGenerator.centroid method, while d3.scaleOrdinal and d3.schemeCategory10 assign the color palette.

Mar 28, 2023

ICE 7: Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three flower species distinguished by color. The visualization animates through different x-axis dimensions—petal width, sepal width, petal length, and sepal length—cycling every 1.5 seconds while updating axis labels. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and a reusable `scatterPlot` function to generate SVG circles and legends. Data loads from a CSV URL via D3’s `csv` method with automatic type parsing.

Mar 13, 2023

ICE 7: Line Chart

This example visualizes Bitcoin prices from 2008 to 2020 with a line chart. It uses D3 v5 to render an SVG, mapping years on the x-axis and costs on the y-axis. The code builds linear and time scales, adds axis labels, and generates a red line path from the loaded CSV data. The chart uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator.

Mar 13, 2023

ICE 7 Area Chart

This area chart visualizes Bitcoin prices from 2008 to 2020, combining a black line for the price trend with a green filled area beneath it. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, along with `line` and `area` generators with a `curveBasis` interpolation. The SVG rendering includes gridlines via axis tick sizes and data is loaded from a CSV file using `d3.csv`.

Mar 12, 2023

ICE - 7 Pie Chart

This pie chart visualizes the cost of F1 TV Pro subscriptions across different countries, with each slice labeled with its price in US dollars and accompanied by a color-coded legend. The visualization is built using D3.js v5, fetching CSV data from a GitHub gist and rendering it as SVG. The code uses `d3.pie` to compute arc angles, `d3.arc` for path generation, and `d3.scaleOrdinal` to map costs to a fixed palette. The legend is manually positioned, and all text labels use `d3.format` for numeric formatting.

Mar 11, 2023

Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions as animated circles. Using D3’s scaleLinear, axisLeft, and axisBottom, it maps data points to SVG coordinates. The chart cycles through four attribute combinations every two seconds via setInterval, updating the x-axis and circle positions dynamically. This reusable chart pattern, inspired by Towards Reusable Charts, demonstrates how to encapsulate a scatter plot into a configurable function that can be easily updated with new data mappings.

Mar 11, 2023

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

This horizontal bar chart displays the cost of F1 TV Pro subscriptions across 18 countries, using a linear scale for cost and a band scale for country names. Built with React and D3 v5, it renders SVG rectangles whose widths encode the price values, with manually drawn axes and grid lines. The data is loaded asynchronously from a CSV file via d3.csv, and React’s useState and useEffect manage the data-fetching lifecycle.

Mar 9, 2023

Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to bill length on the x-axis and body mass to bill depth on the y-axis, with circle sizes representing bill dimensions and colors indicating species (Adelie, Gentoo, or Chinstrap). It uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale the data from a GitHub-hosted CSV, rendering SVG circles with custom labels and a cursive font.

Mar 9, 2023

ICE5

This visualization presents metadata about a company's employee dataset, displayed as plain text over a decorative background image. The page loads a CSV file from a GitHub gist using `d3.csv` and computes summary statistics, including the approximate file size in kilobytes (via `d3.csvFormat` and the `length` property), the number of rows, and the number of columns. These values are then inserted into a `<pre>` element using the DOM API. The page also provides a clickable link to view the raw dataset.

Mar 2, 2023

ICE-5

This example displays basic metadata from a CSV file containing employee details in a company. It shows a text summary reporting the dataset’s approximate file size in kilobytes (rounded), row count, and column count. The code loads the data with D3 v7’s `d3.csv` method and formats it using `d3.csvFormat` to compute the file size, then displays the result in an HTML `<pre>` element. The page also provides a link to view the dataset.

Mar 2, 2023

Fork of ICE5

This visualization displays metadata about a credit card customer dataset, reporting the file size, row count, and column count as text on the page. It loads the data from a CSV file hosted on GitHub using `d3.csv`, then formats the raw data with `d3.csvFormat` to calculate its size in kilobytes. The page is built with HTML, CSS, and D3.js v7, and presents the information in a simple `<pre>` element via the DOM API `textContent`.

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data from a remote URL using the D3.js library, displaying basic dataset statistics in a styled HTML page. The code fetches data from a GitHub gist using `d3.csv` and calculates the file size in kilobytes, total row count, and column count, then renders these values as text in a `pre` element. The page also embeds a separate SVG image file and uses custom CSS styling for the header and data display.

Fork of ICE5

This example displays metadata about a credit card customer dataset, showing the file size in kilobytes, row count, and column count as text on a webpage. It loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate the size. The resulting message is inserted into a `<pre>` element via the DOM API `textContent`. The page includes a link to the dataset and uses minimal CSS for styling, with JavaScript handling all data processing and display.

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example displays a welcome message for a data visualization project, summarizing the size and structure of a top-100 actors dataset loaded from a CSV file. It fetches the data using `d3.csv` and computes the formatted output length in kilobytes, row count, and column count, presenting these stats in a large centered `<pre>` element. The page also includes an externally hosted SVG image and applies CSS styling to headers and background colors. The visualization is minimal, focusing on preliminary data inspection rather than graphical representation.

Fork of Cat smiley

A cat smiley face is rendered as a purple circle with black outlines, featuring yellow eyes with black or yellow pupils, green and white line whiskers, and a grey arc-shaped mouth. The face also includes white eye arcs and black ear arcs, all positioned around the center. Built with React and D3.v7, the visualization constructs the face using SVG primitives and D3's `arc` function to define the mouth, eye, and ear path shapes.

Fork of Half way Smiley face

This example shows a static, stylized smiley face rendered as SVG, composed of a gradient-filled background circle, two distinct eyes, and a half-open mouth with teeth. The face is built in React using separate components for each facial feature, and it uses D3's `arc` function to create the mouth and teeth paths. The overall composition is centered and sized based on the given width and height, with all facial elements positioned relative to the center point.

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

This example shows a smiling face built in SVG whose eyebrows animate up and down. Using D3 v5 and the `d3.arc` and `d3.select` APIs, the code constructs a sky-blue circle for the head, adds eyes, and attaches two rectangles as eyebrows. A path with an arc generator forms the mouth. The eyebrows move via chained `transition.attr` calls over 2-second intervals, demonstrating basic DOM manipulation and selection-based updates without external data.

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

This animated SVG example uses D3.js v5 to construct a stylized smiley face with a yellow circle, two eyes, a curved mouth, and moving eyebrows. The underlying code demonstrates DOM manipulation by building each facial feature through `d3.select` and `svg.append` methods. The eyebrows animate by chaining `d3.transition` calls, moving them upward and back over two-second intervals. The mouth shape is generated through `d3.arc` with specified inner and outer radii and angular ranges, while all coordinates are calculated relative to the visualization's center.