R

Ramakanth771

@Ramakanth771·43 public vizzes

Loading thumbnail…

ICE 8 - Family Tree_Ramakanth

This example displays a family tree as a node-link diagram rendered in SVG. The data structure is created using `d3.stratify()` to convert the flat parent-child records, and the layout is computed with `d3.tree()`. Nodes are drawn as circles, with colors indicating depth: red for the root, blue for first-level children, and green for deeper descendants. Curved paths connect parent and child nodes, and each node is labeled with its name. The code uses D3 v5 within a React context, though the visualization itself is implemented directly in vanilla JavaScript.

Loading thumbnail…

ICE 8 - Country Map_Ramakanth

This choropleth map displays all counties in the United States, rendered as brown-filled SVG paths with thin dark strokes on a green ocean backdrop. The visualization uses D3 v4’s `d3.geoPath` with the `d3.geoAlbersUsa()` projection, which scales and centers the map, and reads county boundaries from the `us-atlas@3` TopoJSON dataset via `topojson.feature`.

Loading thumbnail…

ICE8 - Social Network Graph_Ramakanth

A social network graph displays eight people as nodes connected by directed, labeled friendship links, with node size and color kept uniform to emphasize structure. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while draggable circles and arrow markers enhance interactivity. It renders to SVG using d3.v6, loading graph data from a JSON file. Hovering highlights a node with a thick green stroke, and labels appear on each node to identify individuals.

Loading thumbnail…

Fork of ICE 8 - Family Tree

This visualization displays a family tree using hierarchical data, with each person represented as a colored circle and labeled with their name. The tree is built from an array of parent-child relationships using the `d3.stratify()` and `d3.tree()` APIs, which compute node positions and link paths. Nodes are color-coded by depth—red for the root, blue for depth 1, and green for depth 2—while curved `path` elements with cubic Bézier curves connect each parent to their children. The data originates from a static JavaScript array, and the entire scene is rendered as SVG.

Loading thumbnail…

ICE 8 - World Map_Ramakanth

This example displays a world map using the Mercator projection, rendered as brown landmasses on a green background with SVG paths. The visualization loads geographic data from the world-atlas package and uses topojson-client to extract features, which are then projected and drawn using d3.geoPath with the d3.geoMercator projection. The map is embedded within a React-like structure, though the implementation relies purely on D3 v4 and JavaScript.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This graph visualizes a small social network of eight individuals and their friendship connections, with directed arrows indicating the relationships. Built with D3.js v6, the visualization employs a force-directed layout computed by `d3.forceSimulation`, combining link, many-body, collision, and center forces to position nodes. The SVG rendering uses circles for people, labels for names, and lines with markers for edges, with all nodes initially placed at the center. Data is loaded from a JSON file containing node and link arrays.

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows the network of connections within the Kenneth Rainin Foundation’s grantee ecosystem, using a force-directed graph with four main nodes (such as Arts Web and AmbitioUS) linked to child nodes and leaf nodes. The code uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes, while SVG circles, lines, and text represent entities and relationships, with sizes and colors defined in a custom data module and palette.

Loading thumbnail…

Fork of ICE 8 - Social Network

This visualization displays a social network as a force-directed graph, with red circular nodes representing individuals and dashed gray lines showing connections between them. Each node is labeled with the person’s name using SVG text elements. The code uses D3 v6’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. Data is loaded from a remote JSON file via `d3.json`, and all rendering occurs in SVG.

Loading thumbnail…

Fork of ICE8 - USA Map

This example renders a choropleth-style map of the United States using SVG, displaying state boundaries and national landmasses over a graticule grid. The visualization loads US Atlas TopoJSON data via `d3.json` and processes it with `topojson.feature` and `topojson.mesh` to extract land and interior borders. React components manage state and rendering, while `d3.geoAlbers` and `d3.geoPath` project the geographic coordinates. The map uses custom styling with distinct fills for land, sphere, and interiors, and includes a graticule layer for spatial reference.

Loading thumbnail…

Fork of ICE 8 Swedish map

This example displays a choropleth-style map of Swedish counties, using an olive-green fill for each region and yellow borders between them. Built with React and D3 v5, it loads TopoJSON data from a GitHub gist and converts it to GeoJSON using the `feature` and `mesh` functions from the TopoJSON library. The map is rendered as SVG paths, with the `geoMercator` projection and `geoPath` API handling the geographic projection and path generation.

Loading thumbnail…

Fork of Portland Map

This example displays a choropleth map of Portland neighborhoods, rendering geographic boundaries as green SVG paths. The map uses a conic equal-area projection configured with `d3.geoConicEqualArea` and `d3.geoPath` to project and draw the shapes. Data is loaded from a TopoJSON file via `d3.json` and converted to GeoJSON features using `topojson.feature`. The visualization is built with React, where the `Marks` component maps each feature to a path element, and styling is applied through CSS to highlight the neighborhood borders.

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This map of the United States shows the log number of positive COVID-19 cases per state, averaged over the past seven days, with darker colors indicating higher case counts. Hovering over a state highlights it in green and reveals a tooltip with additional metrics, including death toll, tests administered, and positivity rate. The visualization is built with React and D3 v6, using `d3.geoPath` with a `geoAlbersUsa` projection to render state boundaries from TopoJSON data. A threshold color scale and a custom color legend encode the case values, while a `VoronoiOverlay` component uses `d3.Delaunay` to improve hover interactivity.

Loading thumbnail…

Fork of Polished World Map

This world map displays country boundaries using a Natural Earth projection, with graticules, a shaded sphere background, and stylized land and interior border colors. The visualization is built with React and D3, using `geoNaturalEarth1` for the projection, `geoPath` to render the geometries, and `geoGraticule` for the latitude/longitude grid. It loads World Atlas TopoJSON data from unpkg, which is converted via the `topojson` library’s `feature` and `mesh` functions to produce the land polygons and shared interior boundaries, all rendered as SVG paths.

Loading thumbnail…

ICE 7 Chart_Ramakanth

A line chart displays the number of car accidents in the USA from 2012 to 2021, with time on the x-axis and accident counts on the y-axis. The visualization uses d3.csv to load data from a GitHub-hosted CSV file, and d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes. A d3.line generator creates the green stroke path, with axis labels and a title appended as SVG text elements. The chart is rendered as an SVG within a React framework using d3.v5.

Loading thumbnail…

ICE - 7 Pie Chart_Ramakanth

A pie chart visualizes the top films by gross earnings in USD, with each slice representing a film and its value labeled inside. The chart encodes revenue using a categorical color scale, with a legend listing film names and their corresponding gross amounts. Built with D3 v5, the visualization loads CSV data from a GitHub gist and renders slices using the `pie` and `arc` generators, while the legend and labels are appended as SVG elements.

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four different flower measurements on the x-axis while the y-axis remains sepal length. Data points are colored by species (setosa, versicolor, virginica) with a legend and axis labels. The visualization uses D3.js with a reusable `scatterPlot` module that leverages `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes. SVG circles represent individual flowers, and a `setInterval` drives the animation, rotating through measurement columns.

Loading thumbnail…

ICE7 Area Chart_Ramakanth

This area chart visualizes car accident counts in the USA from 2012 to 2021. The chart uses a green filled area with a smooth basis curve to show the trend over time. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` to generate the filled path, and `axisLeft` and `axisBottom` for labeled tick marks. The data is loaded from a CSV file hosted on GitHub, and the chart is rendered as an SVG.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays annual car accident counts in India from 2009 to 2019, with the data loaded from a CSV file and rendered as an SVG. The visualization uses d3.scaleTime and d3.scaleLinear for the axes, while d3.line and d3.area with curveBasis generate a smooth line and filled region beneath it. Axis labels and tick formatting are handled via d3.axisBottom and d3.axisLeft, and the time axis is parsed with d3.timeParse.

Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart rendered with SVG. The line chart highlights yearly sales trends, while the orange area fills the space beneath the curve for emphasis. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line with curveBasis for smoothing, and d3.csv to load the dataset from a GitHub gist. Axes are drawn with d3.axisBottom and d3.axisLeft, and formatted tick labels use d3.format.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This example displays a line chart of automobile sales in India from 1999 to 2012, plotting film gross values against film titles. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. Data is loaded from a GitHub-hosted CSV file via `d3.csv`. The chart includes labeled axes, a title, and a styled blue line with gridlines.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays US Auto Sales from 2005 to 2022, plotting the Gross value on a time-based x-axis against Film on a linear y-axis. The visualization uses D3 v5 to load CSV data from a GitHub Gist via `d3.csv`, then renders the chart as an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. A single red path is generated using the `d3.line` generator, with axis gridlines and labels added through D3’s axis methods.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile electronic sales in India from 1999 to 2012, using data loaded from a GitHub-hosted CSV file via d3.csv. The visualization is rendered as an SVG with d3.scaleTime for the year axis and d3.scaleLinear for sales values, while d3.line generates the path. The chart includes labeled axes, grid lines, and a title, with styling applied through an external CSS file. The example follows a React-based structure, though the core rendering relies on D3 v5 APIs.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, plotting yearly electronic sales figures as a single blue line. The SVG rendering uses d3.scaleTime for the year axis and d3.scaleLinear for sales values, with axes generated via d3.axisBottom and d3.axisLeft. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, then parsed into date and numeric values before being passed to the render function. The chart includes labeled axes, a title, and a grid-like tick structure styled through CSS classes.

Loading thumbnail…

Fork of ICE 7 Line Chart

This visualization displays car sales in India from 2009 to 2019 using a line chart, with the Gross (date) on the x-axis and Film (a numeric value) on the y-axis. It uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render the chart as SVG. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while a line path is generated with `d3.line`. Grid lines and labels are styled via CSS, with the line and text colored in red against a dark blue background.

Loading thumbnail…

ICE7 - Pie Chart_RK

This example presents a pie chart visualizing the top 10 countries by deaths in 2020 from air pollution. The data is loaded from a CSV file using `d3.csv`. The chart is rendered using D3 v5 with SVG, where `d3.pie` computes the arc segments and `d3.arc` defines their geometry. Each slice is labeled with its value in thousands, and a legend lists each country alongside its corresponding number. Color encoding uses an ordinal scale with a custom array, and the layout transforms arcs to center within the SVG canvas.

Loading thumbnail…

ICE7 - Pie Chart_RK

This pie chart visualizes the top 10 countries’ deaths from air pollution in 2020, with each slice labeled in thousands and a corresponding legend listing country names and values. The chart uses d3.pie() to compute arc angles and d3.arc() for path geometry, with d3.scaleOrdinal() mapping slice colors. Data is loaded asynchronously from a CSV via d3.csv. Text labels are positioned using arcGenerator.centroid(d), and the SVG rendering includes manually appended legend rectangles and text elements. The implementation relies on D3 v5.

Loading thumbnail…

Fork of ICE7 - Pie Chart_RK

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate the SVG segments and legend. Data is loaded asynchronously from a CSV file via `d3.csv`, and the legend lists each country alongside its corresponding value, rendered in a static SVG canvas.

Loading thumbnail…

ICE7 - Reusable Scatter Plot_RK

This visualization displays the top 10 countries by deaths in 2020 attributed to air pollution, using a pie chart with each segment labeled with the death count in thousands. A legend on the right lists each country with its corresponding color and value. The code fetches CSV data from a gist, parses it with `d3.csv`, and renders the chart as SVG using `d3.pie`, `d3.arc`, `scaleOrdinal`, and `format`. The chart is built with D3 v5 within an HTML page.

Loading thumbnail…

ICE6_RAMAKANTH_iris

This scatter plot visualizes the Iris Dataset, using D3.v5 to render SVG circles that represent individual iris flowers. The x-axis maps sepal length, the y-axis maps petal length, and color encodes species, emphasizing clustering patterns among the three species. The code defines linear scales for x and y, and an ordinal color scale with `d3.schemeCategory10`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while a color legend is added via the `d3.legendColor` API. Data is loaded as CSV using `d3.csv`.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes, with each point colored by species (setosa, versicolor, or virginica). The visualization is built with React and D3 v6, using `d3.csv` to load data, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` for rendering the chart axes. Points are drawn as SVG circles with a fixed radius, while the axis labels are added as text elements. The plot does not use any interactivity beyond the rendering itself.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to define scales and axes, rendering circles as SVG marks. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart fills the browser window, with tick labels styled at 24 pixels for readability.

Loading thumbnail…

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

This visualization displays the top 10 highest-grossing films in USD using horizontal bars rendered as SVG rectangles. The React component loads CSV data via d3.csv, then uses d3.scaleBand for the y-axis film labels and d3.scaleLinear for the x-axis gross values. Ticks and axis labels are generated from xScale.ticks(). The bar chart updates asynchronously, showing a loading state until data arrives.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the axes while coloring each point by species (setosa, versicolor, or virginica). The visualization is built with D3 v6, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for marks. Data loads from a CSV via `d3.csv`, with numeric parsing for measurement columns. The code assigns colors through a switch statement and uses fixed radius points, with margins configured for the full browser viewport.

Loading thumbnail…

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

This visualization displays the top 10 most populous countries as labeled circles, using React to manage the component hierarchy and D3 v5 for data-driven sizing and positioning. The marks encode population through circle area, while text labels identify each nation. React’s declarative JSX constructs the SVG elements, and D3’s `scale` functions map the population values to radii and layout coordinates, with the page’s title provided in the HTML header.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries using a bar chart. The code leverages React for the user interface and D3 v5 for data binding and rendering, employing `d3.scale` to map population values to bar heights and widths. The chart’s SVG marks and channels are generated programmatically within a React component, demonstrating how to combine D3’s declarative API with React’s component model. The data itself is static, embedded in the JavaScript bundle, and the layout is centered with a fixed viewport.

Loading thumbnail…

Fork of Top 10 highest grossing movies of all time

This bar chart visualizes the top 10 highest-grossing movies of all time, with earnings displayed in billions of USD and movie titles on the y-axis. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data from a CSV file to SVG rectangles. The chart loads data from a GitHub gist via `d3.csv`, formats the axis ticks with `formatPrefix` to abbreviate large numbers, and applies a blue fill to each bar.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2019 as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The visualization uses React for component rendering and D3 v5’s `csv`, `scaleBand`, and `scaleLinear` APIs to load, scale, and draw the data as SVG rectangles. Population data comes from a CSV file linked in the code, and the chart is fully rendered in the browser using React’s `useState` and `useEffect` hooks.

Loading thumbnail…

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

A demo of loading and parsing CSV data with D3.js, displaying the file size, row count, and column count in styled text on a webpage. The page includes a decorative SVG city illustration. The code uses `d3.csv` to fetch a remote CSV file from a GitHub gist, then `d3.csvFormat` and the `data.length` and `data.columns` properties to compute the summary. Rendering is plain HTML and CSS manipulation of the DOM.

Loading thumbnail…

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

This example demonstrates how to load and parse a remote CSV file using D3.js, displaying key statistics about the dataset in a styled HTML page. The code uses D3's `d3.csv()` API to fetch data from a GitHub Gist URL, which contains mobility report data for Asia and Africa. After parsing, the script calculates and presents the dataset's size in kilobytes, row count, and column count within a `<pre>` element. The page also incorporates custom CSS styling with chartreuse and cornsilk backgrounds, and displays a personal SVG image embedded from a GitHub repository.

Loading thumbnail…

ICE4 HW_RAMAKANTH

This example shows a stylized, cartoonish face built from geometric shapes, with animated eyebrows that repeatedly raise and lower. The face is rendered using SVG within a D3 v5 selection, positioning a green circle as the head, pink and brown eyes, a nose and mouth created with the `d3.arc` path generator, and white-outlined features. Eyebrow animation is driven by chained `transition` calls on a `setInterval` timer, while the layout relies on static SVG attributes and transform translations rather than a data-driven binding.

Loading thumbnail…

ICE4 HW_RAMAKANTH

This SVG smiley face, built with React and D3 v5, uses basic shapes to render a stylized portrait. The face features a brown circular head, two eyes with pupils, a purple nose, and a white mouth created using D3’s `arc` path generator. Rotated grey and blue eyebrow arcs, defined via `arc` and affected by `transform` rotations, sit above the eyes. A black path outlines simple hair. The code constructs the visualization using React's declarative JSX syntax within a ReactDOM-rendered SVG container.

Loading thumbnail…

ICE4 HW_Ramakanth

A smiling cartoon face rendered as an SVG using React and D3. The code builds the face from geometric primitives, including yellow head, stylized eyes with pupils, a purple nose, grey rotated eyebrows, and an arced white mouth. D3’s `arc()` generator creates the curved mouth and eyebrows, while SVG transforms rotate and translate these elements. React manages the component structure, and all coordinates and dimensions are explicitly defined as constants, producing a static, data-free illustration.

Loading thumbnail…

ICE4 HW

This example shows a yellow smiley face rendered as a scalable SVG graphic that fills the entire browser window using React. The face is centered by translating the coordinate system with a `<g>` element, and its size adapts dynamically based on `window.innerWidth` and `window.innerHeight`. The code uses React and ReactDOM to create circle elements for the head, eyes, and mouth, with the mouth radius and eye offsets defined as constants. The rendering relies on SVG primitives within a React component, producing a responsive, vector-based illustration.