gayathri

ICE8 network graph

This network graph visualizes the relationships between seven named nodes (A through G) grouped into four categories, with links weighted by values like 2 and 3. The graph is rendered as an SVG using D3.js v4, where each node is a draggable orange circle with a text label. The force-directed layout is driven by D3’s `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Link thickness is derived from the square root of each link’s weight, and the graph data is loaded from a local JSON file.

Apr 4, 2022

India Map

The example displays a choropleth-style map of Indian states and territories, rendered as orange SVG paths on a full-screen canvas. It draws geographic boundaries using a Mercator projection centered on the country, with `d3.geoPath` converting GeoJSON features into SVG path data. The map data is loaded remotely from a TopoJSON file, which is converted to GeoJSON via `topojson.feature`. The visualization is built with React components, where the `Map` component receives the parsed feature collection and applies the projection, while React manages the overall SVG rendering.

Fork of Fork of Fork of Force Network

A force-directed network graph displays the relationships between Tom Hanks films and their directors, with nodes colored by group. The visualization uses D3 v6’s `d3.forceSimulation`, along with `d3.forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines render the data from a JSON file. Drag interactions are enabled via `d3.drag`, and link arrowheads are defined using SVG markers, though text labels remain incomplete.

question paper model

The visualization shows a hierarchical question paper model with "questions" branching into "Long," "short," and "objective" categories, which further split into "5 marks," "3 marks," and "1 mark" nodes. It uses a static tree layout via `d3.stratify` and `d3.tree`, rendering SVG circles and text labels. Links animate from source to target using `transition`, while circles fade in with a radial growth effect. Node colors change by depth through a custom `setGeneration` function, and the data is defined as an inline array of parent-child pairs.

Fork of Family Tree

This fork of a family tree visualizes blood group inheritance through a hierarchical tree layout. Nodes are circles representing blood types (A, B, AB, O) and their Rh factor variants, with color indicating generation depth. The visualization uses D3.v6’s `d3.stratify()` and `d3.tree()` APIs to compute the layout, while SVG paths animate edges over one second via `transition().duration(1000)` as they draw from parent to child. Each node’s label is placed directly on the circle, and the palette shifts from dark red for the root to light red for deeper levels.

Fork of Family Tree

This visualization presents a branching tree of blood group categories, from the top-level "BloodGroup" node down to specific types like A+ve and O−ve. It shows the hierarchical structure of blood types and their subsets. The code uses D3.js v6 with the `d3.stratify()` and `d3.tree()` APIs to compute the tree layout from an array of `{child, parent}` pairs. Nodes are rendered as SVG circles with animated transitions that grow in radius, while connecting paths animate from parent to child positions. Colors change by depth level, using a custom `setGeneration` function.

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot displays iris flower measurements, using petal width and sepal length as primary axes while encoding species through colored markers (pink, yellow, and grey). The visualization cycles through different data dimensions every two seconds using `setInterval`, updating the x-axis mapping between petal width, sepal width, petal length, and sepal length. Built with D3 v6, the example uses `csv` for data loading, `scaleLinear` and `extent` for scaling, plus `axisLeft` and `axisBottom` for axes. SVG circles represent data points with animated transitions, while axis labels are appended directly to the SVG.

Fork of student Strength Area Chart

This area chart visualizes student strength over a series of years, with a violet gradient fill beneath a smooth curve. The chart uses D3 v6 to load CSV data from a GitHub gist, parse dates with `d3.timeParse`, and render an SVG path generated by the `area` generator with a `curveBasis` interpolation. Axes are created via `axisBottom` and `axisLeft`, with grid lines and formatted tick labels, while the chart includes labeled axes and a title.

Fork of Fork of line chart section 3

This visualization shows the number of students from 2014 to 2022 as a single red line chart, with time on the x-axis and student counts on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the SVG path. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse`. Axis labels and grid lines are styled through CSS classes, with margins applied to position the plot area.

Fork of Fork of line chart section 3

This example visualizes car sales data from 2013 to 2021 as a line chart, showing the trend of population values across states over time. The chart uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG with scaled axes. The visualization applies `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and draws the line path using `d3.line`, with gridlines and axis labels styled via CSS.

Fork of Line Chart

This chart displays US auto sales from 2005 to 2022 as a single red line, with time on the x-axis and annual sales volume on the y-axis. Using D3 v5, the code loads CSV data from a Gist, applies scaleTime and scaleLinear mappings, and renders an SVG path via the d3.line generator. Axes are drawn with d3.axisBottom and d3.axisLeft, while gridlines and labels are styled through CSS. The title and axis labels are added as SVG text elements.

ice7-3

This example displays population data for different states as a line chart, with population on the y-axis and time-based population values on the x-axis. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` APIs to load and render the data as an SVG path. It reads data from a GitHub gist, applies margins and gridlines via tick sizing, and styles the line in red with labeled axes.

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 most populated U.S. states, with each slice labeled by its population in thousands and accompanied by a color-coded legend. Built with D3 v5, the code fetches CSV data via `d3.csv`, computes slice angles with `d3.pie`, draws arcs with `d3.arc`, and maps colors using `d3.scaleOrdinal`. Labels are positioned at each slice’s centroid, while the legend separately lists state names and values using SVG `rect` and `text` elements.

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example visualizes the top 10 countries by deaths from air pollution in 2020 as a pie chart. Each slice is labeled with the death count in thousands, and a legend lists each country with its corresponding value and color. The code loads CSV data from a GitHub gist using `d3.csv`, then computes pie angles with `d3.pie()` and draws SVG paths using `d3.arc()`. Colors are assigned via `d3.scaleOrdinal()`, and text labels are positioned using `arc.centroid()`.

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with the death count in thousands and accompanied by a color-coded legend listing country names and values. The visualization loads CSV data and uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `select` APIs to generate SVG paths and text labels. Slices use a fixed color palette and centroid-based text positioning via `arcGenerator.centroid`. The legend is built with appended SVG rectangles and text elements, highlighting the data source from a GitHub-hosted CSV file.

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

This example renders a horizontal bar chart of the top 10 most populous countries in 2019. It uses React to manage the component state and render the SVG, while D3 is used for data loading with `csv` and for constructing the scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart displays axis ticks and labels generated from the D3 scale domains, alongside rect marks whose widths encode each country's population. Data is fetched from a CSV file hosted on GitHub.

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, using data sourced from a CSV file hosted on GitHub. The visualization employs D3 v5's scaleLinear and scaleBand to map revenue values and product names, and renders the chart as SVG. The axes are customized using axisBottom and axisLeft, with tick formatting that converts large numbers to abbreviated forms and removes grid lines from the y-axis. The X-axis label and title are added via SVG text elements.

Fork of World Population Area Chart

This visualization shows world population growth over time, rendered as a filled area chart with a smooth curved baseline. The data is loaded from a CSV file and mapped to a time-based x-axis and a linear y-axis. Built with D3 v5, the example uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, with axis labels formatted using `format` and a custom tick formatter that converts billions to "B". Styling is applied via external CSS classes.

Fork of Fork of World Population Area Chart

This area chart visualizes world population over time, using a smooth basis curve to connect data points. The visualization is built with D3 v5, leveraging its `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` for the chart shape, and `axisBottom`/`axisLeft` for ticks. Population figures are formatted from gigabytes to billions, with data loaded from a VizHub-hosted CSV file.

Fork of World Population Area Chart

Fork of Pie Chart

This pie chart visualizes 2022 US auto sales by brand, showing each brand’s year-to-date sales as a colored arc segment with a legend listing brand names and sales values in thousands. A sequential color scale, defined via `d3.scaleOrdinal`, maps each brand to a distinct color. The chart is rendered as SVG using `d3.pie` to compute angular segments and `d3.arc` to generate the paths, while `d3.csv` loads the population dataset from a GitHub gist. The legend and ticks are positioned manually, with sales formatted using `d3.format`.

Fork of Pie Chart

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as an animated scatter plot, cycling through four attribute combinations every two seconds. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `selectAll` and `.join` manage circle updates. The plot is reusable via a closure-based factory pattern, configured with setters for width, height, data, and margins. SVG rendering fills the viewport, with species color-coded (orange, blue, green) though the marker function is defined but not applied to the visible circles.

Data Visualization- Scatter Plot with Iris DataSet

This D3.js v6 scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers, with each point colored by species (setosa, versicolor, or virginica). The SVG rendering uses the `csv` loader to parse the data, `scaleLinear` for both axes, and `axisLeft` and `axisBottom` for tick marks. The code explicitly maps the `sepal_length` and `sepal_width` values to unused `rx` and `ry` attributes, though these do not affect the circle radii, which remain fixed. The chart is sized to the browser window.

Mar 7, 2022

Scatter plot

This scatter plot visualizes the Iris dataset, mapping each flower’s course ID to its percentage score, with points colored by species (setosa, versicolor, or virginica). Built with D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` for the x- and y-axes, and `d3.axisLeft` and `d3.axisBottom` for the chart’s ticks. Circles are rendered as SVG elements via `d3.selectAll` and `join`, with a fixed radius but dynamic fill colors assigned by a custom marker function. The dataset is sourced from a remote CSV file hosted on GitHub.

Mar 7, 2022

Fork of Iris Dataset Scatter Plot

This fork of the Iris Dataset scatter plot visualizes the relationship between petal and sepal measurements, with points colored by species (blue for setosa, red for versicolor, black for virginica). Built with D3 v6, it loads CSV data via `d3.csv`, scales coordinates with `d3.scaleLinear`, and renders circles in an SVG container sized to the browser window. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with tick labels enlarged to 24 pixels for readability.

state

This visualization displays a bar chart of the top 10 most populous states using data from a CSV file. The React app, using hooks like useState and useEffect, fetches the population data with d3.csv, then renders horizontal bars with d3.scaleBand and d3.scaleLinear. SVG elements are generated through React, with axes and tick marks drawn manually using d3.axis utilities and d3.max for scaling.

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

A bar chart displays the top 10 most populous countries in 2019, with the population values loaded from a CSV file. The visualization uses React components to render SVG marks and channels, while D3 v5 provides scales and data processing through `csv()`, `scaleBand()`, and `scaleLinear()`. Grid lines and text labels for both axes are generated manually using the scale methods, with each country represented by a rectangular bar whose width encodes its population.

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

A horizontal bar chart displays the top 10 most populous countries for 2019, with country names on the y-axis and population counts on the x-axis. The React component loads CSV data via `d3.csv`, then renders SVG marks using `scaleBand` and `scaleLinear` for positioning. Tick marks and axis labels are generated manually from the scales, while bars are drawn as `<rect>` elements with widths proportional to population values.

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

This example presents a horizontal bar chart of the top 10 most populous states, sourced from a CSV of 2019 population data. It demonstrates integrating React with D3, using React hooks for state management and D3’s `csv`, `scaleBand`, and `scaleLinear` to load data and compute scales. The SVG rendering maps population values to bar widths, with axes and tick labels generated manually via React components.

Mar 5, 2022

Untitled

This example renders a smiling robot face using SVG shapes within a React application. The visualization is built with hardcoded SVG elements including ellipses for the head and eyes, paths for the mouth and antennas, and a text overlay containing instructions about refactoring code. The code imports D3 v7 from a CDN and incorporates inline SVG styling with a gray background and black outlines. The composition demonstrates how React can manage static SVG graphics, with the note discussing the importance of cleaning up code for neatness.

Mar 1, 2022

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

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size in kilobytes, row count, and column count within a styled HTML page. The code uses `d3.csv()` to fetch a remote Superstore dataset from a GitHub gist, then computes the formatted CSV length and reports the results in a `<pre>` element. The visualization itself is minimal, relying on React for structure and SVG-rendered decorative graphics, with D3 v7 handling data ingestion and formatting.

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 from a remote URL using D3.js v7. The page displays a summary of the dataset, including its size in kilobytes, row count, and column count, within a styled `<pre>` element. The code uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to calculate the data size, and writes the results to the DOM via `document.getElementById`. The visualization also embeds a static SVG image as a decorative element.

Feb 24, 2022

For

A smiling face is drawn as a full-screen SVG, with a yellow circle for the head, white stroke outline, two eyes positioned symmetrically, and an arc-based mouth. The visualization uses React to render the SVG elements and D3’s `arc` generator to construct the mouth path. Window dimensions set the circle’s radius, while fixed offsets control eye placement. The code applies React 16.9 and D3 v7, with the SVG centered via a `transform` translation.

1

A smiley face is drawn as a responsive SVG visualization, with a yellow circle for the head, black stroke outline, and smaller unfilled circles for the eyes. It uses React 16.9 to render the SVG elements, with dimensions computed from `window.innerWidth` and `window.innerHeight`. The component positions the face via a transformed group, while circle radii and offsets are derived from viewport height and predefined constants.

myemoji1

A yellow smiley face is rendered as a full-screen SVG, centered in the browser window. The face is built from three circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes, positioned symmetrically. The code uses React to create and render the SVG elements, computing coordinates and dimensions dynamically from the window's width and height. The project uses React and ReactDOM, with the SVG output generated directly from the JavaScript component.

Fork of Smiley Face Part II

This example renders a responsive smiley face that fills the browser window using React and SVG. The code computes the face dimensions from `window.innerWidth` and `window.innerHeight`, centering the drawing with a `<g>` transform. It uses React’s `createElement` syntax within a functional component, with JSX for SVG circle elements, to draw the yellow face, black outline, and two eyes. The component is mounted via `ReactDOM.render` into a `#root` div, and the page loads React 16.9.0 from a CDN.