A

addalalikitha15@gmail.com

@likitha-reddy-ux·18 public vizzes

Loading thumbnail…

MAP

This world population choropleth map uses a natural Earth projection to visualize population data across countries. The map is rendered as SVG paths, with each country filled using a sequential blue color scale that maps population values from low to high. Built with D3.js v7, the visualization loads GeoJSON country boundaries via the world-atlas package and topojson-client, then joins them with a CSV dataset of world population figures. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the geographic projection and path generation.

Loading thumbnail…

Mapp

This choropleth map visualizes world GDP per country using a blue sequential color scale, where darker shades denote higher GDP values. Built with D3 v7, it renders geographic boundaries as SVG paths via `d3.geoPath` and a Natural Earth projection, then maps GDP data from a Plotly-hosted CSV to each country's fill color. Country shapes come from the world-atlas TopoJSON, processed with `topojson-client`. The map includes a title and uses a simple index-based data-to-feature mapping.

Loading thumbnail…

Fork of Fork of D3 Starter-maps

This choropleth displays world population figures for a selection of countries, with darker blues representing higher populations and gray for countries without data. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render country boundaries from a TopoJSON world-atlas dataset. Population values are mapped through a sequential `d3.scaleSequential` with an `interpolateBlues` color scale. Hovering reveals a tooltip with the country name and population in millions, powered by SVG `title` elements.

Loading thumbnail…

Fork of D3 Starter-2b

This network graph uses D3.js (v7) to visualize six named nodes and their connections as a force-directed layout. The example combines `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG circles, lines, and text labels. Nodes are draggable via the `d3.drag` API, allowing manual repositioning that influences the simulation. The graph is generated from a static dataset defined in the JavaScript code, with default styling applied via CSS.

Loading thumbnail…

Fork of D3 Starter-2

This example displays a family tree as a static node-link diagram, using a sample dataset with a grandparent, two parents, and five children. Node color encodes generation depth: red for the root, green for its children, and blue for leaves. Rendered as an SVG, the visualization applies `d3.tree()` layout and `d3.hierarchy()` to structure the data, then draws vertical links with `d3.linkVertical()` and labels each node. The implementation uses D3.js v7 and defines custom CSS for link and node styling.

Loading thumbnail…

Fork of D3 Starter-map

This visualization shows a world map rendered with randomly colored countries using a natural Earth projection. The map fills the browser viewport and uses D3.js for the SVG rendering, with TopoJSON converting the world-atlas dataset into GeoJSON features. The code applies `d3.geoNaturalEarth1()` for projection and `d3.geoPath()` to generate the country paths, while `d3.interpolateBlues` assigns each country a random blues-scale color. The data loads from the world-atlas TopoJSON file via `d3.json()`.

Loading thumbnail…

Fork of D3 Starter-likitha

This example displays a world map with countries rendered in randomly selected shades of blue. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. Country boundaries come from a TopoJSON file loaded from the world-atlas package, converted to GeoJSON with the `topojson.feature` function. Each country path is appended to an SVG and colored using `d3.interpolateBlues` with a random value, while the map fills the full viewport.

Loading thumbnail…

Fork of Map-likitha

This visualization displays two static reference maps from TopoJSON sources: a Natural Earth projection world map and an Albers USA projection map of the United States. The world map renders countries as blue paths over a graticule grid, while the US map shows states in green. Both maps use `d3.geoPath` with projected geometry from the `world-atlas@2` and `us-atlas@3` datasets, loading GeoJSON via `d3.json` and converting features with the `topojson-client` library.

Loading thumbnail…

Fork of D3 Starter-likitha

This area chart visualizes the relationship between temperature and bird migration distance, using a light blue filled region beneath a monotone curve. The chart is built with D3 v7, loading CSV data from a GitHub gist, aggregating it by temperature via `d3.rollups` and `d3.mean`, and rendering with SVG. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleLinear` maps the data to the plot area.

Loading thumbnail…

Fork of D3 Starter-likitha

This line chart visualizes the relationship between temperature and bird migration distance, showing a smoothed monotone curve of average migration distance against temperature. The code loads a sample CSV of bird migration data, aggregates values by temperature using `d3.rollups`, and renders the result with D3 v7’s `d3.line()` and `curveMonotoneX`. The SVG chart includes labeled axes with `d3.axisBottom` and `d3.axisLeft`, plus a title and axis captions, all styled with steelblue strokes against a minimal white background.

Loading thumbnail…

Fork of D3 Starter-likitha

This pie chart visualizes the regional distribution of bird migration records from a sample CSV dataset. The chart uses D3.js v7 to load the data via `d3.csv`, aggregate counts per region, and render SVG arcs with `d3.pie()` and `d3.arc()`. Labels are placed at arc centroids, and a color legend assists interpretation. The visualization employs `d3.scaleOrdinal` with `schemeCategory10` for distinct regional colors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- likitha

This visualization is a reusable D3.js scatter plot showing the relationship between temperature and migration distance for birds, with points colored by region. Built with D3 v7, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map the CSV data to a Cartesian grid. The code defines a configurable `scatterPlot` function that handles axis labels, chart title, and a categorical color legend via `scaleOrdinal` and `schemeCategory10`. The dataset is loaded from a raw GitHub CSV URL, with numeric fields parsed for plotting.

Loading thumbnail…

reusable scatter plot likitha

This reusable scatter plot displays sales trends over time, rendering day and sales data from a CSV file as red circles on a steelblue line chart. Built with D3.js v6, the visualization uses `d3.csv` to load the dataset, `scaleLinear` for both axes, and `axisBottom`/`axisLeft` for tick marks. The line is generated with a `d3.line` path, while the scatterPlot function exposes setters for width, height, data, and radius, making the chart customizable. SVG output is styled with the Share Tech font.

Loading thumbnail…

Fork of Fork of Fork of Empty D3 Starter-likitha

This D3.js visualization displays weather trends over time, combining multiple series on a single chart. It renders red, blue, and green lines for temperature, humidity, and wind speed, alongside steel-blue bars representing rainfall, all plotted against a shared day axis with labeled axes and a legend. The code uses `d3.csv` to load data from a GitHub gist, then applies `d3.scaleLinear` and `d3.line` to create the lines, with gridlines and axes generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Empty D3 Starter-likitha

This fork presents a static scatter plot of penguin measurements, showing bill length against flipper length. The visualization uses CSV data from the seaborn-data repository, loaded with `d3.csv`. Each penguin is rendered as a steelblue circle on an SVG canvas, with axes created using `scaleLinear`, `axisBottom`, and `axisLeft`. The chart includes axis labels but no interactive elements, relying on D3 v7 to bind data and position marks within fixed margins.

Loading thumbnail…

Fork of Empty D3 Starter-likitha

A bar chart displays the average migration distance for birds, grouped by region. The visualization uses a sample dataset loaded from a GitHub gist, with the computation of regional averages handled by `d3.rollups` and `d3.mean`. The SVG rendering employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The bars are drawn as SVG rectangles in steel blue, and the chart updates with an animation on data load.

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization presents a summary of a bird migration dataset. It displays key statistics about a CSV file, including its size in kilobytes, total number of rows, and column count. The page fetches the data from a remote gist URL and uses `d3.csvParse` to process the CSV content, then updates the HTML with the computed metrics. A decorative SVG illustrates a migration path with a Bezier curve. The interface provides a clear, concise overview of the dataset's structure for initial data exploration.

Loading thumbnail…

Fork of D3 Starter

This example displays a concise summary of a bird migration CSV dataset, showing file size, row count, and column count. A simple SVG path with a circle marker visually represents a migration route. The page loads data from a GitHub gist using `fetch` and parses it with `d3.csvParse`, while `d3.v7` is loaded via CDN. Styling relies on plain HTML and CSS, with no interactive elements beyond the static display.