L

LikhitaMudagereShivaraj@my.unt.edu

@likhitagowda123·20 public vizzes

Loading thumbnail…

ICE-8_Q1.2_Canada_CostIndex_Map

This choropleth map displays Canadian provinces colored by an arbitrary cost index, with gray indicating missing data. Built with D3 v7, it loads a Canada GeoJSON file and joins it to the linked dataset on province name. The map uses a Mercator projection via `d3.geoMercator` and renders paths with `d3.geoPath`. A sequential color scale maps the cost index values, and interactive tooltips appear on mouseover, while a linear gradient legend explains the color encoding.

Loading thumbnail…

Fork of ICE-8 — USA States Map (Cost Index)

This choropleth map of the United States visualizes a sample cost index by state, using a yellow-green-blue sequential color scale to show values ranging roughly from 84 to 160. The visualization loads US state boundaries as TopoJSON from the us-atlas package and renders them with d3.geoPath and an Albers USA projection. Each state’s color is determined by looking up its FIPS code in a cost-index dataset, and hovering reveals a tooltip with the state name and value using plain DOM events and D3 styling.

Loading thumbnail…

Fork name: ICE-8-Q1.2-World-Map-CostIndex

This world choropleth colors countries by a cost index, where values above 100 indicate higher-than-baseline costs and values below 100 indicate lower costs. The map uses an SVG projection with D3 v7’s `geoNaturalEarth1` projection, `d3.geoPath`, and a sequential `d3.interpolatePlasma` color scale. Country geometries come from a remote GeoJSON file, and hovering displays a tooltip with each country’s specific index value. Countries without data appear in a muted gray, while a fixed legend explains the color scale.

Loading thumbnail…

ICE-8-Q1.1-World-Map-Basic

This visualization presents a static Natural Earth world map with decorative country colors, where hovering over any country reveals a tooltip showing its name and population data from a hardcoded demo dataset. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render countries, graticules, and the sphere background as SVG elements. A d3.zoom behavior enables pan and zoom, while mouse events drive the tooltip display. Population values come from a JavaScript Map object rather than the GeoJSON data source.

Loading thumbnail…

ICE-8-Q2.3-Network-StudyGroup

This dark-themed SVG network visualizes a study group’s conceptual connections with eight nodes representing students, a TA, and faculty. Node size reflects degree, while shape and color distinguish role types. Green links denote collaboration and blue links mentorship. The code uses `d3.forceSimulation` for layout, with drag behavior for interaction and tooltips on nodes. D3 v7 handles SVG rendering, scales, and event listeners.

Loading thumbnail…

ICE-8-Q2.2-Tree-Generations-Colored

This visualization displays a hierarchical tree of programming language paradigms, with generations distinguished by both color and symbol shape. The root and three descending depth levels use a D3 ordinal scale mapping to specific colors and D3 symbol types (star, circle, square, triangle). The code renders the tree using d3.tree() layout with horizontal links via d3.linkHorizontal(), and draws nodes as SVG paths generated by d3.symbol(). Data is hardcoded in JavaScript, showing the relationship from Programming through Imperative, Object-Oriented, and Functional categories down to individual languages.

Loading thumbnail…

ICE-8-Q2.1-Tree-Basic

This example shows a hierarchical tree of programming languages organized by paradigm, with four levels from root to leaf. It uses D3 v7’s `d3.hierarchy` and `d3.tree` layout with an SVG rendering approach, drawing horizontal links via `d3.linkHorizontal`. Nodes appear as blue circles with labels, and the layout adapts to an 800px-high viewBox, though the CSS height also adjusts to the viewport.

Loading thumbnail…

ICE-8-RadialTree-ProgrammingLanguages

This radial collapsible tree visualizes a four-level hierarchy of programming languages, from root to individual languages like C, Java, and Swift. The circular layout distinguishes it from classic horizontal trees, with nodes arranged across three visible layers. Users can click nodes to expand or collapse branches, while zoom and pan controls allow navigation of the tree. Tooltips reveal descriptive information about each language or paradigm on hover. Built with D3 v7, the visualization uses `d3.select` for SVG construction, `d3.zoom` for interactive viewport control, and a custom tooltip implementation for supplementary details.

Loading thumbnail…

ICE-8-WorldMap-Population-Quantized

This choropleth map visualizes global population by country, joined to geographic boundaries through ISO-3 codes. The map uses a quantized color scale (`d3.scaleQuantize`) with the YlOrRd sequential scheme, rendering countries in seven bins from light to dark orange, while countries without population data appear gray. Built with D3 v7, the visualization loads local GeoJSON and CSV files, projects the geometry using `d3.geoNaturalEarth1()` and draws paths via `d3.geoPath`. Hovering over a country highlights its border and displays the country name and population in a tooltip, with a legend below the map explaining the quantized color bins.

Loading thumbnail…

Line Chart

This line chart shows monthly value trends across multiple years, with a smooth monotone curve plotted over time. The visualization uses D3.js v7, specifically the `d3.scaleTime` and `d3.scaleLinear` axes, and renders the line via `d3.line` with a `d3.curveMonotoneX` curve. Data is loaded from a CSV file using `d3.csv`, and the chart outputs to an SVG canvas with labeled axes and tick marks. The styling adheres to BBC-like color themes and font choices, though the core plot focuses on the steelblue line and its temporal variation.

Loading thumbnail…

Area Chart

This area chart visualizes cumulative growth of a value over time from January 2010 to December 2020, using data loaded from a CSV file. The SVG rendering relies on D3 v7 with `d3.csv` for data parsing, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area()` with `curveMonotoneX` to draw the filled path in light steelblue with a steelblue stroke. Axis labels appear for both date and value, with ten ticks on the x-axis.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between GDP and life expectancy for a synthetic dataset of countries, with points colored by region using a Tableau10 ordinal scale. It loads CSV data with d3.csv and d3.autoType, then renders circles in an SVG container using d3.scaleLinear for both axes and d3.axisBottom/d3.axisLeft for tick marks. The chart includes labeled x and y axes, semi-transparent points, and is built entirely with D3 v7.

Loading thumbnail…

Pie Chart

This pie chart displays the proportional distribution of six product categories by value, with each slice labeled directly at its centroid. The visualization uses D3.js v7’s `d3.pie()` and `d3.arc()` generators to compute arc paths from CSV data loaded via `d3.csv()`. A category-10 ordinal color scale assigns distinct hues to each slice, while white stroke separates adjacent segments. The SVG is centered within a fixed 450×450 viewport, and text labels are positioned using the `arc.centroid()` method.

Loading thumbnail…

Bar Chart

A scatter plot displays the relationship between GDP and life expectancy across approximately 110 countries, with points colored by world region. The D3.js v7 code loads data from a CSV file using `d3.csv`, applies linear scales for both axes via `scaleLinear`, and maps each data point to a circle using `d3.selectAll` and `.join`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while a categorical color scale using `d3.scaleOrdinal` and `schemeTableau10` distinguishes geographic regions. The visualization is drawn as SVG elements within a container.

Loading thumbnail…

Combined Chart

This combined chart displays stock price trends for three companies across January through June 2024, using data from a CSV file. Multi-series lines show all three companies’ price movements over time. The visualization overlays Company A’s data as semi-transparent bars with its line, while Company B appears as a dashed line, creating a layered comparison. Built with D3 v7, the SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curves, and axes via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the synthetic Iris dataset, with each point colored by species. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` with `d3.axisLeft` to render the SVG axes. Each data point is drawn as a circle with a tooltip showing its exact measurements.

Loading thumbnail…

Data Info

A bar chart displays the distribution of 150 numerical values, each associated with an item ID, showing how values vary up to a maximum near 100. The chart includes horizontal gridlines and labeled axes, with bars that change color from blue to red on hover, highlighting individual data points. The visualization uses D3.js v7, loading data from a CSV file with `d3.csv`, and renders the chart as SVG elements with scales like `d3.scaleBand` and `d3.scaleLinear`, plus axes via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

multiseries and combined

A D3.js line chart compares global, northern, and southern hemisphere temperature anomalies from 1900 to 2023, using `d3.line` and `d3.scaleLinear` to render three colored series derived from CSV data. Below it, a combined chart overlays a blue line of global temperature on a bar chart of year-over-year change, with bars colored green or red based on positive or negative differences. Both charts use `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand` for layout, rendered as SVG elements with custom styling.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for three species of iris flowers. Each point represents a sample, color-coded by species (setosa, versicolor, virginica) using blue, green, and orange, and includes interactive tooltips that reveal exact measurements on hover. The visualization is built with D3.js v7, using `d3.csv` to load the local CSV data, `d3.scaleOrdinal` for color mapping, and `d3.scaleLinear` to map data to pixel coordinates. The SVG rendering includes labeled axes, a legend, and smooth tooltip transitions for enhanced readability.

Loading thumbnail…

Scatter Plot

This example demonstrates a minimal HTML page that displays a static greeting message. The page uses plain HTML, CSS, and JavaScript, with the text rendered at a large font size via the `.message` class. The JavaScript file simply logs "hello world" to the console, and no interactive or data-driven visualization is implemented. The code relies solely on basic DOM elements and CSS styling, without any external libraries or data sources.