R

rohinikotha

@rohinikotha·28 public vizzes

Loading thumbnail…

Fork for the Social Network

This force-directed network diagram visualizes a small social graph of six people and five weighted connections between them. Using data from a JSON file, circular nodes represent individuals, while lines with varying thickness encode relationship strength through the square root of each link's weight. The visualization is built with D3.js v4, employing the legacy `d3.layout.force` layout to position nodes and handle drag interactions. Node labels appear beside each circle, and the SVG renderer updates positions on every tick event, with CSS styling for link colors and node fills.

Loading thumbnail…

Fork for the Family Tree

This visualization displays a color-coded family tree as a horizontal dendrogram, with the root "josh" branching into children and grandchildren. The tree layout uses `d3.tree` with horizontal links generated by `d3.linkHorizontal`, rendered as SVG paths that are zoomable via the `d3.zoom` event handler. Node labels are positioned using the layout's computed coordinates and styled with font sizes scaled by depth, while each node's fill color comes from the `color` property in the JSON data. The data is parsed from `data.json` using `json`, and the hierarchical structure is built with `d3.hierarchy`.

Loading thumbnail…

Fork of Country Map for the India

This map shows the country of India with individual states rendered as colored regions, each assigned a distinct fill from a categorical color scale. A title reading "Country Map of India" appears above the visualization, and hovering over any state turns it red. The visualization uses D3 v5 with the `geoMercator` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded from a GitHub gist. The code also incorporates `scaleOrdinal` and `schemeCategory10` for color assignment, along with the `d3-geo-projection` library, all rendered as SVG elements.

Loading thumbnail…

Fork for the world map

This visualization displays a global map with countries rendered in yellow against a purple sphere, using a natural Earth projection. The code employs D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` functions, alongside the TopoJSON `feature` API to convert topojson country boundaries into SVG paths. The map data is fetched from a GitHub-hosted worldmap.json file, with each country drawn as a filled path with a black stroke. The static SVG canvas is sized at 1600×1000 pixels.

Loading thumbnail…

Fork of Scatter Plot for Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species of iris flowers, each marked by a distinct color. Built with React and D3 v6, the visualization uses `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map values to SVG circle positions. The code creates axes with `d3.axisLeft` and `d3.axisBottom`, and applies non-standard `rx` and `ry` attributes to the circles, which are not used for scaling. Data is sourced from a GitHub gist.

Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes sales data from 1988 to 2006, combining a smooth line and a brown filled area beneath it to emphasize trends over time. The axes display year and sales values, formatted with `d3.format`. The code uses D3 v5 APIs including `csv` for data loading, `scaleTime` and `scaleLinear` for scales, and `line` alongside `area` generators with `curveBasis` for smoothing. The SVG output is styled with CSS, featuring a yellow background and labeled axes.

Loading thumbnail…

Fork of Area Chart

This visualization shows electronic sales from 2013 to 2021 using both a filled area chart and an overlaid line chart to emphasize the trend. It uses d3.csv to load data from a GitHub Gist, then renders SVG paths via d3.line and d3.area with the curveBasis interpolation. Axes are built with d3.axisBottom and d3.axisLeft, while scales employ d3.scaleTime and d3.scaleLinear, with the area fill colored green and the line stroke in black.

Loading thumbnail…

Fork of Area Chart

This is a fork of an area chart that visualizes electronic sales from 2013 to 2021. The chart combines a black line and a green filled area beneath it, with both rendered as SVG paths using D3 v5’s `line` and `area` generators with `curveBasis`. The x-axis maps years parsed via `d3.timeParse`, while the y-axis shows sales values formatted with `.3s`. Axes are created with `axisBottom` and `axisLeft`, and scales use `scaleTime` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Area Chart

This example shows electronic sales from 2013 to 2021 with a combined line and area chart. The visualization overlays a smooth black line representing yearly sales trends with a green filled area beneath it, using d3.line(), d3.area(), and curveBasis for interpolation. The SVG chart uses d3.scaleTime and d3.scaleLinear for axes, with d3.axisLeft and d3.axisBottom adding gridlines and labels. Data is loaded as CSV from a GitHub gist, parsed with d3.timeParse, and rendered using D3 v5.

Loading thumbnail…

Fork of line chart

This example visualizes yearly total sales with a line chart, plotting date values against sales figures on Cartesian axes. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map the data domain, while d3.axisBottom and d3.axisLeft generate the tick marks and labels. Data loads from a CSV file at a GitHub gist URL, and the line path is drawn using d3.line. The visualization removes axis domain lines, adds axis labels, and styles the path with a black stroke.

Loading thumbnail…

Deaths in india

A pie chart visualizes deaths across Indian states, with each slice colored distinctly and labeled with its proportional share. The legend lists state names alongside their corresponding death counts. Built with D3.js v5, the visualization loads CSV data from a GitHub gist and renders an SVG using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Text labels are positioned via the arc centroid, while the legend updates dynamically from the same dataset.

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also attaches sepal length and width values as redundant radius properties on the SVG circles, though these do not affect the visual size. The code loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom` in an SVG element within a React-less HTML page.

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting different attributes for the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear for axis scaling, d3.select for DOM manipulation, and d3.axisBottom and d3.axisLeft for rendering axes with gridlines. Data points are rendered as SVG circles, colored by species class (setosa, versicolor, virginica) with opacity for overlap handling. The React framework manages the dropdown state, while D3 handles the chart rendering.

Loading thumbnail…

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

This example visualizes laptop sales data for various companies using a bar chart. The chart displays the sales figures for the first ten companies from a CSV file, with horizontal bars representing each company’s sales value. The visualization is built with React and D3, using D3’s `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis sales values. The SVG rendering is generated through React’s declarative components, with `csv` loading the data and `max` determining the domain for the x-axis scale.

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot from the Iris Dataset uses ReactDropdown to let users select which sepal or petal attributes to plot on each axis. The visualization renders circles colored by iris species using D3 v5 scales, axes, and SVG shapes. Dropdown menus position absolutely over the chart, while a reusable dropdown function updates selections and triggers re-renders, adjusting the axis scales, labels, and point positions accordingly.

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot displays the classic Iris dataset, letting users explore the relationships between sepal and petal measurements. Four dropdown menus, built with React, allow for the dynamic selection of which attributes map to the x and y axes. The visualization uses D3.js version 5 functions like `d3.scaleLinear` and `d3.extent` to scale the data, which is rendered as colored SVG circles, with each Iris species assigned a distinct color. The chart includes axis labels, a title, and a legend to clarify the categories.

Loading thumbnail…

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

This example visualizes laptop sales data for the top ten companies using a horizontal bar chart rendered as SVG. The visualization loads data from a CSV file and displays each company’s sales as a green rectangle bar. Built with React and D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and React’s `useState` and `useEffect` hooks to manage state. The chart includes axes with blue tick lines and company labels.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis. D3 code uses `csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Each flower is rendered as an SVG circle with a fixed radius. The visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Fork of Assignment 5 - Bubble Chart

This interactive bubble chart compares average horsepower, torque, and highway MPG for various car brands, with each circle positioned by horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG. Color distinguishes makes via a custom ordinal scale built with `d3.interpolateTurbo`. Data loads from an external CSV using `d3.csv`, and SVG circles include tooltips on hover that display brand names. A legend shows the MPG radius mapping, and the visualization uses `d3.axisBottom` and `d3.axisLeft` for axes with linear scales (`d3.scaleLinear`).

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot explores the Iris dataset, allowing users to select which of the four flower attributes—sepal length, sepal width, petal length, or petal width—map to the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear to map data to pixel coordinates and d3.axisBottom and d3.axisLeft to render axes with grid lines. Points are colored by species using a scaleOrdinal mapping, and the SVG rendering updates smoothly as axis selections change.

Loading thumbnail…

ice 5

This visualization displays metadata about a CSV file containing data on different courses. The page shows a large header, a violet preformatted text block that reports the file size, row count, and column count, and an embedded SVG image of a house. The code uses D3.js version 7 to fetch the remote CSV with `d3.csv` and computes the byte size of the formatted data with `d3.csvFormat`. The result is dynamically inserted into the DOM via `textContent`. The SVG is rendered statically from a GitHub-hosted image.

Loading thumbnail…

Fork of Fork of Not so Smiley Face

This example draws a stylized smiley face using React and D3.js. A yellow circle with a black stroke forms the head, while two black circles serve as eyes, and an arc path creates a smile. The layout uses fixed coordinates and an SVG rendering approach, with the mouth generated using the D3 `arc()` API to define its inner and outer radii and angular range. The visualization demonstrates basic geometric composition in SVG without interactive or data-driven elements.

Loading thumbnail…

Fork of Not so Smiley Face

This example shows a stylized smiley face with an offset mouth, creating an incomplete or asymmetrical expression. Two black eyes are placed symmetrically above the center, while the yellow face has a black outline. The mouth is drawn as an arc that is shifted downward from the face’s center, making it appear misaligned. The code uses React to render SVG elements, with D3’s `arc` generator defining the mouth’s path based on specified radii and angles.

Loading thumbnail…

Fork of homework smiley face

This fork of a homework assignment shows a stylized smiley face drawn with SVG primitives. It uses React to render a group of shapes, including circles for the face and eyes, ellipses, and lines for hair and eyebrows, all centered on the canvas. The mouth is created with a D3 `arc` generator, using its `innerRadius` and `startAngle`/`endAngle` properties. The static composition demonstrates a blend of React's declarative structure with D3's geometry utilities.

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple smiley face drawn with SVG shapes: a yellow circle for the head and two smaller black circles for eyes. The code uses React to define the SVG elements declaratively, with D3 v7 loaded via CDN for potential data manipulation. The face is centered in a fixed 900 by 500 viewport, and the layout is computed using JavaScript constants for positions and radii, demonstrating how to compose SVG graphics within a React component.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A cartoon smiley face rendered as an SVG composite, built with React components. A yellow circle serves as the face, with detailed eyes and a mouth drawn from complex vector paths and ellipses. The code uses React and ReactDOM to mount the application, composing separate `Eyes` and `Smile` components. The graphic is assembled via SVG elements, with transforms applied for positioning and scaling, and colors defined through CSS classes.

Loading thumbnail…

Fork of Let's make a face: part 3 tweaks

A stylized smiley face is drawn in SVG, with a circular face, two eyes, and a mouth. The face uses a white-to-black linear gradient, while the stroke and accent features use contrasting gradients and a khaki color. The example is built with React for component rendering and D3 v7’s `arc` API to generate the mouth path. All shapes are positioned using hardcoded constants for center, offsets, and radii, with a static SVG canvas set to 960 by 500 pixels.

Loading thumbnail…

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

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, a mouth, and rectangular eyebrows. The face is centered using a `<g>` transform, with circles and a path generated by the `d3.arc()` function composing the features. Animated eyebrows move up and down repeatedly via chained `transition()` calls that adjust their `attr('transform')` over two-second durations. The code demonstrates fundamental DOM manipulation and transitions using D3 v5 selections, specifically `select`, `append`, `attr`, and `transition`.