N

nitinramagiri1@gmail.com

@NitindotR·24 public vizzes

Loading thumbnail…

Sunburst Chart CO2 emissions

An interactive sunburst chart visualizes global CO₂ emissions as a hierarchical partition of regions and countries, using a warm color gradient where segment size and shade encode total metric tons. A dropdown menu filters the view to a single region, while hovering reveals a tooltip with country or region names and emissions values. Built with D3.js, the chart uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, and `d3.scaleSequential` with `interpolateWarm` for coloring. The SVG rendering includes a semi-transparent background image and dynamically re-renders chart groups on region selection.

Loading thumbnail…

Treemap - Global Data

This interactive treemap visualizes global metrics—such as CO₂ emissions, population, and GDP—for countries grouped by region, with a dropdown to switch between twelve data dimensions. Built with D3.js, it uses `d3.treemap` and `d3.hierarchy` to compute the layout and `scaleSequential` with `interpolateWarm` for color encoding. Hovering reveals a tooltip with region, country, and metric-specific values. The viz renders as SVG, sourcing data from a bundled global dataset.

Loading thumbnail…

Global Data Scatter Plot

This scatter plot visualizes the relationship between GDP per capita and average life expectancy across countries, using circles colored by region from a Global Data dataset. Users can hover over the legend to highlight matching data points or click to toggle entire regions’ visibility, with opacity changes facilitating comparison. The visualization leverages d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and custom d3 axis-label helpers from @curran/axis-labels, rendering SVG circles with region-based classes.

Loading thumbnail…

Co2 Emissions Sunburst chart - Top 3 Regions

This sunburst chart visualizes the top three regions by total CO₂ emissions, with each ring segment representing a country within those regions. The size of each arc corresponds to a country’s emissions value, while a warm-to-cool sequential color scale (using `scaleSequential` and `interpolateWarm`) reflects the total emissions range. The visualization is built with D3’s `hierarchy`, `partition`, and `arc` APIs, starting from a dataset grouped by region and filtered to the highest emitters. Hovering over a segment highlights it with a black border and displays the country name and rounded emissions value as temporary text.

Loading thumbnail…

sunburst chart CO2 emissions

This sunburst chart visualizes global CO₂ emissions, grouped hierarchically by region and then by country. Each arc segment’s size and color (using a warm-to-cool gradient scale) represent the total emissions for that country. The chart is built with D3.js, using `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout from the grouped data. Hovering highlights a segment and temporarily displays its name and value in a text label.

Loading thumbnail…

sunburst chart

This sunburst chart visualizes CO₂ emissions by country from the Global Data dataset, using a hierarchical radial layout with arcs representing regions (Eastern Asia, Northern America, Southern Asia) and their constituent countries. The chart employs D3’s `partition`, `hierarchy`, and `arc` APIs alongside `scaleOrdinal` with `schemeCategory10` and `schemePastel1` for color encoding. Hover tooltips, implemented via SVG `<title>` elements, display each country’s emission value. Rendering is performed with SVG, and the code is structured as a reusable `main` function that appends the chart and legend to a container.

Loading thumbnail…

Circles

This visualization demonstrates a simple D3.js approach to creating SVG circles. Using the d3.select and join API, it establishes an SVG canvas that fills its container and renders a single circle with a steelblue fill at a fixed position. The code includes commented-out data arrays containing coordinates, radii, and colors, showing an alternative path for drawing multiple circles from structured data. The example focuses on the fundamental pattern of selecting, appending, and styling SVG elements.

Loading thumbnail…

try

This animated visualization displays a bar chart of Indian states ranked by their number of public health facilities, using circles sized proportionally to the square root of each state's facility count. It uses D3.js transitions to sequentially grow the circles and labels with delays, then updates positions when data changes. The code leverages `d3.select`, `transition`, and `easeLinear` for animation, with data sourced from the HospitalBedsIndia.csv dataset. The visualization also includes a bold title and state names positioned above each circle.

Loading thumbnail…

zero

This example visualizes a world map highlighting the top 10 countries by CO2 emissions, coloring them green and labeling each with its name. Hovering over a highlighted country displays its emission value in million metric tons. Built with D3.js, it uses geoNaturalEarth1 and geoPath for geographic rendering, topojson-client to parse world atlas data, and geoCentroid to position labels. The map loads country boundaries from the visionscarto-world-atlas package on unpkg.

Loading thumbnail…

trial

This visualization shows a world map highlighting the top 10 countries with the most CO2 emissions. Built with D3 and TopoJSON, it uses `d3.geoPath` to render geographic boundaries from the TopoJSON data. The countries are drawn as colored regions, with the code fetching emission data from an external source to determine which countries are highlighted. The map is centered using a simple projection, and the visualization is designed at a fixed width of 600 pixels, making the geographic comparison clear at a glance.

Loading thumbnail…

go

A world map highlights the top 10 countries by CO2 emissions, with those nations filled in green while others remain gray. Country names appear at geographic centroids, and hovering over a highlighted country displays its total emissions in million metric tons. The visualization uses D3's `geoNaturalEarth1` projection and `geoPath` to render SVG paths from GeoJSON features, with `geoCentroid` positioning labels and `geoGraticule` available for optional outlines.

Loading thumbnail…

123

This sunburst chart displays global CO₂ emissions, with the top-emitting countries grouped by their respective regions. Using D3.js v6, the chart partitions a hierarchical dataset, rendering each segment as an arc whose angle and radius correspond to emission values. The visualization employs `d3.partition` and `d3.arc` for geometry, with regional colors from `d3.schemeCategory10` and country colors from `d3.schemePastel1`. Tooltips reveal exact emission figures, while an interactive legend color-codes both regions and individual countries.

Loading thumbnail…

experiment

This interactive sunburst chart visualizes hierarchical CO₂ emissions data, organized by region and country, with arc sizes proportional to emission values. Built with D3 v6, the visualization uses the `d3.hierarchy` and `d3.partition` APIs to compute the sunburst layout, while `d3.arc` generates the path geometry. Region and country categories are distinguished by ordinal color scales (`d3.scaleOrdinal` with `d3.schemeCategory10` and `d3.schemePastel1`), and tooltips on each arc display the name and emission value. The chart renders as an SVG, with a legend generated from the same data structure.

Loading thumbnail…

CO2 Emissions

This interactive world map highlights the ten countries with the highest CO2 emissions, coloring them green and labeling each with its name. Hovering over a highlighted country displays its emission value in million metric tons. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath`, pulling geographic data from the visionscarto-world-atlas TopoJSON file, which is converted with `topojson-client`. Country names and values are positioned using `d3.geoCentroid`.

Loading thumbnail…

Global Data

This example displays a single country’s complete record from a global dataset as a formatted JSON object. It uses D3.js and a custom CSV parser to load and convert numeric fields, then renders the first data entry in a `<pre>` block. The visualization provides a direct, code-level view of the dataset structure, showing all variables like GDP, fertility, and CO2 emissions for a given nation.

Loading thumbnail…

Effects of climate change

This example displays the raw contents of the first row from a CSV dataset on climate change's impact on agriculture. The data, loaded with an ES module import, is parsed and converted to numeric values before being rendered as a JSON-formatted string using `JSON.stringify`. The visualization presents the structured record in a styled `<pre>` element, showing all fields like temperature, precipitation, and crop yield.

Loading thumbnail…

Age Group v/s brought dead

This visualization shows the number of patients brought dead to a hospital, broken down by age group, with data ranging from 10 patients in the 0-20 age bracket to 120 patients in the 60-80 bracket. It uses a line chart where the x-axis represents age groups and the y-axis represents patient counts. The chart is rendered using D3.js APIs including `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `line` for generating the path. Rather than a thin line, the path is drawn with a stroke-width of 20 pixels, creating a thick band that emphasizes the trend across age categories.

Loading thumbnail…

Fork of Pseudo Line Chart

This example shows two line charts comparing unemployment rate over time, with a pink line and a blue line plotted from hardcoded data arrays. The rendering relies on D3’s `line` generator to convert data points into SVG path strings, which are then drawn as `path` elements with `fill`, `stroke`, and `stroke-width` attributes. Axis labels for "Unemployment Rate" and "Year" are added as SVG text elements, rotated for the vertical axis. The code deliberately omits scales, using raw coordinates and fixed margins instead of an axis scale or ticks.

Loading thumbnail…

Scatter Plot - Breast Cancer Report

This scatter plot from the Breast Cancer Report dataset shows the relationship between cell thickness and epithelial cell size, revealing a positive correlation between the two variables. The visualization uses D3 scales and axes to map the data points, with circles rendered at varying opacities against a gray background. The code implements the chart using D3’s `scaleLinear`, `axisLeft`, and `selectAll` data joins, while importing custom axis label utilities from `@curran/axis-labels`. Each circle’s position is determined by the `xValue` and `yValue` accessors, and the plot includes labeled axes with specified margins and offsets.

Loading thumbnail…

Public Health Facilities in India

This animated visualization displays Indian states ranked by the number of public health facilities, using circles sized proportionally to facility counts. The circles grow sequentially from zero to their final radius, with state names and facility totals appearing above and below each point. Built with D3.js, the code leverages the `select` and `transition` APIs to orchestrate staggered entrance animations, while the underlying data comes from the Hospital Beds India dataset. The visualization employs a row layout with positioned SVG circles and text elements, creating a clear, comparative overview of healthcare infrastructure across eight major states.

Loading thumbnail…

CSV Dataset - Mortality Data

This example displays the first record of the Health Synergy Hospital Mortality CSV dataset as pretty-printed JSON. It shows the parsed data types and date formatting applied to the raw input. The code imports the CSV file, converts numeric fields and reformats the date to a consistent month/day/year string. The visualization simply renders this processed single row inside an HTML `<pre>` element, using JavaScript's `Date` object for parsing.

Loading thumbnail…

CSV Dataset - FLU Data

This example displays a single record from a CSV dataset of flu shot information, showing fields like age, county, gender, and flu shot status. The code uses a JavaScript data import from `data.csv` and parses values with `new Date()` and unary plus operators for type conversion. The main function renders the first data row as formatted JSON inside an HTML `<pre>` element, with a font size of 21 pixels.

Loading thumbnail…

Breast Cancer Report

This example displays the first row of the Breast Cancer dataset as formatted JSON, converting all numeric fields from strings to numbers using the unary plus operator. The main function renders the parsed data into a `<pre>` element with a fixed font size, showing the structure of a single sample with attributes like tumor class, cell size, and mitoses. The visualization uses plain JavaScript with a CSV import and DOM manipulation, providing a static data preview rather than an interactive chart.

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a set of six overlapping, semi-transparent rectangles arranged in a dynamic composition on a soft green background. The visualization uses D3.js to generate an SVG element sized to its container and binds an array of data objects to rectangle elements via the `selectAll().data().join()` pattern. Each rectangle’s position, dimensions, and fill color are set through data-driven attributes. The `attr` methods define `x`, `y`, `width`, `height`, and `fill` properties, while a fixed opacity value creates layered visual depth.