Amar09nath

Fork of ICE8 - Amar_Social Network Graph

This visualization shows a small social network of eight people with friendship links radiating from Ray to AMAR and others. Each node is a yellow circle labeled with a person’s name, and directed lines with arrow markers indicate the relationship direction. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide`, while nodes are rendered as SVG circles with hover highlighting via CSS classes. Interaction is supported through `d3.drag`, and the data is loaded from a local JSON file.

Apr 4, 2022

ICE8 - Amar_Social Network Graph

This network graph visualizes social connections among eight people, with red circular nodes representing individuals and directed black lines indicating "Friend with" relationships. The layout is computed using d3.forceSimulation with link, charge, collision, and center forces, while nodes are rendered as SVG circles and labels. Hovering a node triggers a CSS class change that turns its stroke green. The data comes from a JSON file containing node groups and repeated link entries for some pairs.

Apr 4, 2022

ICE 8 - Family Tree of Amarnath

This example displays a family tree using a hierarchical layout, with nodes colored by depth (black, green, or red) and connected by steel-blue cubic Bézier curves. It uses D3 v5’s `d3.stratify()` to structure flat parent-child data and `d3.tree()` to compute positions, rendering circles, paths, and labels in an SVG. The data comes from a small hardcoded array of family member names, and the visualization is embedded in a React project with a yellow background.

Apr 3, 2022

ICE 8 - Country Map-Amarnath

This example displays a map of the United States rendered as yellow SVG paths on a black background. It uses d3.geoPath with a d3.geoAlbersUsa projection to draw the nation’s outline from TopoJSON data loaded via d3.json from the us-atlas package. The code sets a custom margin, height, and width, and applies stroke and fill styling to the generated paths. The visualization demonstrates a minimal React-free setup using only D3 v4 and topojson-client.

Apr 3, 2022

ICE 8- WORLD MAP OF AMARNATH

This example shows a static world map rendered as brown landmasses on a green SVG background, centered within a bordered HTML page. The visualization uses D3 v4’s `d3.geoPath` with a Mercator projection and TopoJSON data from the world-atlas package. The code fetches the land-10m.json file, converts its features via `topojson.feature`, and appends each as a `<path>` element to the SVG. A simple `styles.css` file sets the page background and centers the chart.

Apr 3, 2022

Fork of ice - 7-1

This animated scatter plot cycles through four Iris dataset measurements on the x-axis every two seconds, using D3’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and colored circles by species. The reusable `scatterPlot` function updates via `setInterval`, while D3’s `csv` loads the data and SVG selection joins drive the dynamic transitions.

Ice 7-1

This interactive scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3.js, it renders each data point as a circle colored by species (green for setosa, grey for versicolor, brown for virginica) against a black background with white axes. The animation uses `setInterval` to update the x-axis scale and re-render the SVG, leveraging D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` utilities.

Fork of ICE 7 -4

This visualization displays U.S. household income trends over time as a smooth line over a filled area chart. The SVG graphic, rendered with D3 v5, uses `d3.line` and `d3.area` with a Basis curve to connect yearly data points. The chart, titled "USA Income by year," loads CSV data from a GitHub gist, employs `d3.scaleLinear` for axes, and includes axis labels and tick marks via `d3.axisBottom` and `d3.axisLeft`.

Fork of ICE 7-3

This line chart visualizes USA income by year from 1999 to 2013, plotting income values against a time-based x-axis. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the chart, with data loaded from a GitHub-hosted CSV file via the `csv` function. The chart applies margins, axis labels, and a purple title, with blue styled line paths and styled tick marks.

Ice 7 Pie Chart-2

This visualization presents a pie chart of countries by income, sourced from a CSV file fetched via D3’s `csv` method. Each slice’s color is mapped using `scaleOrdinal`, while `d3.arc` and `d3.pie` generate the segment paths and text labels positioned via the arc centroid. A legend on the right lists each country with its income value, formatted using D3’s `format` function. The chart renders in SVG with a title, using D3 v5.

Fork of ICE 7 Area Chart

This area chart displays the income from car sales in India from 2009 to 2019, with a black line and an orange filled area beneath it. The visualization uses D3 v5 with SVG rendering, loading CSV data from a GitHub gist. It employs `scaleTime` and `scaleLinear` for the axes, and `line` and `area` generators with `curveBasis` for the smooth curve, while `axisBottom` and `axisLeft` create the labeled ticks.

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with each point colored by species. It uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with axes and labels. The code demonstrates `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `join` method for binding data to SVG elements. The chart includes custom tick styling and a simplified color scheme for the three iris species.

Irish dataset

This example visualizes the Iris dataset as a scatter plot with D3.js v6 in React, mapping petal length and width to the x- and y-axes. Each circle’s fill color distinguishes the three species (setosa, versicolor, and virginica) via a custom marker function. The code loads CSV data from a GitHub gist, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes with SVG. Although `rx` and `ry` attributes are set from sepal dimensions, they have no visual effect on circles.

ICE 6

This visualization displays income levels for the top 20 countries using a horizontal bar chart rendered as SVG. The chart maps each country’s income to bar width via a d3.scaleLinear x-axis, while a d3.scaleBand y-axis positions the bars by country name. React’s useState and useEffect hooks load and parse the CSV data, and d3.csv fetches the dataset, which is then sliced to the first 20 rows. The visualization demonstrates a clean, static comparison of income values with labeled axes and blue gridlines.

ICE 6

This example displays the Iris dataset as a scatter plot of petal length against petal width, with each data point colored by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load the data, scale axes, and render SVG circles. Although the code defines `rx` and `ry` attributes from sepal measurements, the circles are drawn with a fixed radius, so the plot shows a standard clustered distribution.

Ice 6

This visualization plots the Iris dataset’s petal length against petal width, using a D3.js scatter plot rendered as SVG. Circles are colored by species (light blue, light pink, or yellow) with radii fixed at five pixels. The code fetches CSV data from a GitHub gist, applies `d3.scaleLinear` for axes, and uses `d3.select` and `.join` for efficient element creation. Axis labels and tick marks are styled with custom font sizes.

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample while coloring points by species. Using D3 v6, the chart renders as SVG circles, with dimensions computed from a linear scale on both axes. The code loads CSV data via `d3.csv`, parses numeric fields, and applies a custom scale for the shapes’ `rx` and `ry` attributes, though the actual circle radius is fixed. Axis components are generated with `axisLeft` and `axisBottom`, and the visualization fills the full browser window.

ICE6- Irish

This visualization is a scatter plot of the Iris dataset, mapping sepal and petal measurements against categorical species. The plot uses color to distinguish the three iris species: setosa (blue), versicolor (red), and virginica (black), with each point representing a data entry. The code loads the CSV data via `d3.csv`, scales the axes with `scaleLinear`, and renders circles using D3’s `selectAll` and `join` pattern, alongside `axisLeft` and `axisBottom` for coordinate labels. The visualization is rendered as an SVG, filling the entire browser window.

ICE 6

ICE 6

This visualization displays the first 20 countries from a COVID-19 dataset as a horizontal bar chart, with bar lengths representing confirmed cases on January 28, 2020. The React component loads data via d3.csv and renders SVG rectangles using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Grid lines and tick labels are manually generated from the scales, with a blue stroke for vertical lines. The chart updates once data arrives, showing a loading message beforehand.

Mar 6, 2022

ICE 6

This bar chart visualizes the number of corona cases across the top 20 countries, using a horizontal layout where bar length corresponds to case counts. The visualization loads data from a CSV file via `d3.csv` and renders SVG elements using React. It employs `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the numeric case values, and manually drawn gridlines and tick labels using D3’s scale methods. The title "Corona Cases" appears in the HTML header.

Mar 6, 2022

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

This visualization shows the top 10 most populous countries as a horizontal bar chart, using the 2019 population figures from a CSV file. It renders an SVG with React, creating rectangular bars for each country and scaling the x-axis linearly to represent population values. The chart displays numeric tick labels on both the x and y axes, and text within the plot area identifies each country and its population count.

Mar 5, 2022

ICE5_amar.js

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying its size in kilobytes, row count, and column count in a styled HTML page. It also includes a static SVG illustration of weather-related graphics, such as clouds and wind symbols. The page uses D3 v7’s `d3.csv` method to fetch the data from a remote GitHub Gist URL and updates a `<pre>` element with the parsed information, while CSS styles the heading and message container. An embedded `<img>` tag references an external SVG file.

Feb 28, 2022

ICE5_amar.js

This example loads and parses a CSV dataset using d3.csv, then displays basic statistics about the file size, row count, and column count in a styled HTML `<pre>` element. It also renders an SVG illustration of an iceberg and industrial elements via an embedded `<img>` tag. The page uses D3 v7 for asynchronous data fetching and formatting, while CSS styles the header and message container. The visualization demonstrates simple data loading and summarizing without any interactive charts or complex rendering.

Feb 28, 2022

ICE5_Amar

This example demonstrates how to load and parse a CSV dataset with D3.js, displaying a summary of the data's size, row count, and column count in a large HTML `<pre>` element. The page also renders a static SVG illustration of a city scene, which is embedded directly via an `<img>` tag. The code uses the `d3.csv()` function to fetch data from a remote GitHub Gist URL and then updates the message container using JavaScript DOM manipulation. The visualization pairs a simple text-based data overview with a decorative SVG graphic, showcasing basic D3 data loading within a styled HTML page.

Feb 27, 2022

ICE5

This example demonstrates loading and parsing a remote CSV dataset using D3 v7. The page displays a summary of the loaded data, including its size in kilobytes and the number of rows and columns, within a styled HTML page. It uses the `d3.csv` and `d3.csvFormat` APIs to fetch and process the data from a GitHub gist. The visualization also includes an embedded static SVG city illustration.

Feb 27, 2022

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

This example demonstrates how to load and parse CSV data using D3.js version 7. The page displays a heading, a paragraph describing the dataset’s size, row count, and column count, alongside an embedded SVG city illustration. The code fetches a remote CSV file via `d3.csv()` and computes summary statistics using `d3.csvFormat()` to measure the data size in kilobytes. The parsed data is then presented in a styled `<pre>` element.

Feb 27, 2022

ICE 4

This example renders a stylized smiley face using SVG within a React application, built with D3.js v7 and React 17. The face consists of a green circle with a red stroke for the head, white eyes with brown pupils, and a curved mouth generated using the `d3.arc` API. Additional SVG elements, including lines and ellipses, form eyebrows, a nose, and blue hair-like shapes. The visualization is static, with all shapes positioned via absolute coordinates and rendered as SVG primitives in a 960x520 viewport.

Feb 21, 2022