I

IndhuKrishnaraj

@IndhuKrishnaraj·28 public vizzes

Loading thumbnail…

Fork of ICE 8 - Animal Tree

This interactive animal tree visualization displays a hierarchical dataset of dog breeds, from the root "Dog Breed" down through subcategories like Retriever, Bull Dog, and Poodle to specific breeds such as Golden Retriever and French BullDog. Built with React and rendered as animated SVG, the diagram uses D3.js libraries including `d3.layout.tree` for tree layout, `d3.svg.diagonal` for link projections, and D3 transitions to animate node expansion and collapse. Clicking nodes triggers smooth animated updates, with nodes and links styled via CSS attributes like purple circles and red strokes.

Loading thumbnail…

ICE8 - Social Network

This visualization shows a social network of nine people connected by friendship links, with each person represented as a gold circle labeled with their name. The network is rendered using D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Node dragging is enabled via `d3.drag`, and hovering highlights a node with a green border using CSS classes. The data comes from a JSON file listing nodes and links with relationship metadata, drawn as SVG lines with arrow markers.

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram visualizes hierarchical product and brand data, with Walmart as the root and categories like Vegetables, Fruits, and car manufacturers branching into specific items. The visualization uses the D3.js library's `d3.layout.tree()` function to compute node positions and `d3.svg.diagonal()` for curved links, rendering SVG elements with animated transitions on click. Nodes are styled as white circles with steel blue outlines, connected by orange paths, and text labels identify each entity. The data is embedded as a JavaScript array with nested `children` properties, and the layout maps tree coordinates to Cartesian space for display.

Loading thumbnail…

ICE-8 Fork of China City

This example displays a map of China using geographic data rendered as red SVG paths. It fetches TopoJSON basemap data from a GitHub gist and converts it to GeoJSON with the `feature` method from topojson. The map uses a `geoMercator` projection centered on China and draws the country boundaries with `d3.geoPath`, applying a red fill with black strokes. The visualization loads D3 v5 and topojson via external scripts, resulting in a simple, static choropleth-style city map.

Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This example displays a choropleth-style map of the 50 U.S. states, with each state filled in blue and bordered by black interior lines. Built with React and D3 v5, it uses the `geoAlbersUsaTerritories` projection and `d3.geoPath()` to render geographic shapes from a TopoJSON file. The map highlights states on hover by changing their fill color to purple. The data is loaded asynchronously via `json()` and processed with TopoJSON’s `feature` and `mesh` functions.

Loading thumbnail…

ICE-8 World Map

This example displays a world map using an equirectangular projection, rendered as an SVG with D3 v5. The visualization shows all countries from the world-atlas TopoJSON dataset, filled in yellow with red borders, and highlights each country in gray on hover. It uses `d3.geoPath` with a `geoEquirectangular` projection and processes the TopoJSON data through the `feature` method from the topojson library to generate geographic paths.

Loading thumbnail…

ICE-7 LINE-CHART

This line chart visualizes the average housing price in Chennai over time, with the year on the x-axis and cost on the y-axis. The chart is rendered as an SVG using the D3.js library (version 5.7.0), specifically employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` from the imported D3 functions. Data is loaded from a CSV file and processed by converting the year to a date object and the cost to a number before rendering.

Loading thumbnail…

ICE-7 AREA CHART

This area chart visualizes population trends across years, combining a blue line path with a yellow filled area beneath it, all rendered as SVG elements. The chart uses D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with axes generated via `axisBottom` and `axisLeft`. Both line and area generators apply `curveBasis` smoothing, while data is loaded from a CSV file and parsed with `d3.timeParse`. Axis ticks are customized with red text and gridlines, and the y-axis label is rotated using an SVG transform.

Loading thumbnail…

ICE - 7 PIE CHART

This pie chart visualizes supermarket sales data, showing each city’s total rating as a proportional slice of the whole. The D3 v5 code uses `pie()` to compute angles, `arc()` to generate SVG path segments, and `scaleOrdinal` for slice colors. A legend maps each city to its rating value, formatted with `format('.4~g')`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart FOR MARkS

This example displays a pie chart visualizing student marks based on hours spent studying, with each slice labeled by GPA value. It uses D3.js v5 to load CSV data from a GitHub gist, compute pie segments with `d3.pie` and `d3.arc`, and render SVG paths and text. A legend pairs study hours with GPA values, colored via `d3.scaleOrdinal`. The visualization updates dynamically after fetching and parsing the data asynchronously.

Loading thumbnail…

Fork of Ram_ICE7

This D3.js visualization displays the 2018 populations of Indian states as a pie chart, with each state represented by a colored slice sized according to its ranking value. The chart is rendered as SVG using D3’s `pie`, `arc`, and `scaleOrdinal` APIs, with data fetched as CSV from a GitHub gist. Slice labels and a legend show population figures formatted in thousands using `format`, while the overall layout is fixed within an SVG canvas of 960×500 pixels.

Loading thumbnail…

Fork of Rendering Marks and Channels

This visualization displays the average customer ratings for the top 15 product lines in a supermarket sales dataset, using horizontal bars ranked by rating. Each bar’s length encodes the rating value, while product-line names appear on the y-axis. Built with React and D3 v5, the example uses `d3.csv` to load the data, `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles. Red gridlines and tick labels come from manually generated D3 scales, with margins and dimensions configured explicitly in the code.

Loading thumbnail…

ICE-7 Fork of Reusable Scatter Plot

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses three distinct D3 symbol shapes to differentiate iris species, rendering each data point as an SVG path element. The implementation leverages reusable D3 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `symbols`, and `symbol`, with data loaded asynchronously via `csv`. The chart fills the entire browser window, with axes labeled and styled through CSS.

Loading thumbnail…

Rendering Marks and Channels

This example visualizes supermarket sales data by rendering a horizontal bar chart of product lines against their average ratings. The visualization uses React with D3 v5, loading data from a CSV file via d3.csv. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and SVG rectangles as marks. The code renders axes manually with tick marks and gridlines, with margins configured to accommodate the long product line labels.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and renders circles with SVG. It also includes axis labels and a title, with the y-axis rotated via SVG text transformation. The visualization is built with D3 v5 in a React framework, using d3.axisLeft and d3.axisBottom for the axes.

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with semi-transparent circles for each observation. It demonstrates a pattern for integrating React and D3.js, where React manages the component lifecycle and DOM rendering via JSX, while D3 handles scales, axes, and the data join. The visualization uses `d3.scaleLinear` for both axes, `d3.extent` to compute domains, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. The code is structured as a starter template, separating data loading, viz logic, and React wrappers for scalable complexity.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris dataset, cycling through four attribute combinations (petal and sepal width/length) on the x-axis. The y-axis remains fixed at sepal length, while data points are color-coded by species. The visualization employs a reusable D3 scatter plot module, using `scatterPlot` to manage scales and axes, and directly appends SVG circles with custom colors and dimensions. The animation is driven by `setInterval`, which updates the x-axis mapping and re-applies the plot, with axis labels and a legend adjusted dynamically.

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, showing the relationship between petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, then employs d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to position and label the circles. The SVG is sized to the full window, with margins applied to the scales and axes. Data points are rendered as filled circles using a data join, demonstrating a straightforward workflow for quantitative comparison in D3 v6.

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with semi-transparent circles for each observation. It demonstrates a pattern for integrating React and D3.js, where React manages the component lifecycle and DOM rendering via JSX, while D3 handles scales, axes, and the data join. The visualization uses `d3.scaleLinear` for both axes, `d3.extent` to compute domains, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. The code is structured as a starter template, separating data loading, viz logic, and React wrappers for scalable complexity.

Loading thumbnail…

Fork of Fork of React & D3 Starter

A scatter plot of the classic Iris flower dataset, mapping sepal length against petal length and rendering each sample as a semi-transparent circle. The visualization is built with React, which manages the interface and data loading, while D3 v7 handles the rendering logic, including linear scales, axes, and SVG circle elements. It serves as a template demonstrating a decoupled React-D3 integration pattern, loading data via D3's CSV parser and using D3's scaleLinear for coordinate mapping.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a scatter plot of the Iris dataset, using sepal length and petal length as the x and y axes. It serves as a starter template for scalable React and D3 projects, showcasing a decoupled integration pattern. The visualization renders as an SVG, with D3 v7 handling scales, axes, and circles, while React manages the component lifecycle and data loading. The code uses `scaleLinear`, `axisLeft`, and `axisBottom` from D3, and `csv` for data parsing.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a scatter plot of the Iris dataset, using sepal length and petal length as the x and y axes. It serves as a starter template for scalable React and D3 projects, showcasing a decoupled integration pattern. The visualization renders as an SVG, with D3 v7 handling scales, axes, and circles, while React manages the component lifecycle and data loading. The code uses `scaleLinear`, `axisLeft`, and `axisBottom` from D3, and `csv` for data parsing.

Loading thumbnail…

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

This example visualizes the top 15 countries by basic Netflix subscription cost using a horizontal bar chart rendered as SVG. It loads data from a CSV file via `d3.csv` and uses React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching. The chart employs `d3.scaleBand` for the categorical y-axis (country names) and `d3.scaleLinear` for the quantitative x-axis, with custom tick rendering for gridlines and labels. All marks are drawn manually as `<rect>` elements within a React component, combining D3’s scaling and data utilities with React’s declarative DOM updates.

Loading thumbnail…

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

This example visualizes the top 15 countries by basic Netflix subscription cost using a horizontal bar chart rendered as SVG. It loads data from a CSV file via `d3.csv` and uses React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching. The chart employs `d3.scaleBand` for the categorical y-axis (country names) and `d3.scaleLinear` for the quantitative x-axis, with custom tick rendering for gridlines and labels. All marks are drawn manually as `<rect>` elements within a React component, combining D3’s scaling and data utilities with React’s declarative DOM updates.

Loading thumbnail…

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

This visualization shows the top 15 YouTube channels by follower count using horizontal bars. The chart renders an SVG with D3 scales for positioning, while React manages the component state and lifecycle. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with the d3.scaleBand and d3.scaleLinear APIs mapping channel names and follower values to screen coordinates. A custom grid of tick marks and labels is drawn manually rather than using d3.axisBottom.

Loading thumbnail…

Assignment - 5

This page displays metadata about a Singapore tax return dataset, reporting its size in kilobytes, row count, and column count after fetching a CSV from a GitHub gist. The code uses D3 v7’s `d3.csv` to load the remote data and `d3.csvFormat` to measure its length. A CSS background image of a map is applied via `background-image` in the stylesheet, with results printed into a `<pre>` element. The page links to the raw dataset for direct viewing.

Loading thumbnail…

Untitled

This example displays metadata for a Singapore tax returns dataset, reporting its file size, row count, and column count from a CSV file. The page presents this information as styled text, alongside a link to view the dataset and a background image. The code uses D3’s `d3.csv` to fetch the remote CSV, `d3.csvFormat` to serialize it for size calculation, and `data.columns.length` to count columns. The visualization emphasizes textual data summary rather than graphical charts.

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows animate upward and downward. The face is built entirely with SVG shapes—circles for the eyes and face, rectangles for eyebrows, and a path using `d3.arc()` for the mouth. The animation is driven by chained `transition().duration()` calls on the eyebrow group, moving it vertically between two offsets. D3’s `select` and `attr` methods position all elements relative to the SVG’s center, with no external data source.