P

priyankachary1701@gmail.com

@priyankachary1701·21 public vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a choropleth world map colored by the prevalence of undernourishment (percent) for the 2022–2024 three-year average, using a subset of FAOSTAT food security indicators. Each country’s fill intensity reflects the data value loaded from an embedded CSV string. The visualization uses D3 v7 with `d3.geoPath` and TopoJSON to render country boundaries, along with `d3.scaleSequential` and `d3.interpolateYlOrRd` from d3-scale-chromatic for the color encoding. SVG is used for rendering, and the map includes a legend and hover effects.

Loading thumbnail…

plot 2

The visualization displays the prevalence of undernourishment for the top ten countries in a selected year, using an interactive side-by-side pie chart and bar chart. A year selector and color-coded legend allow users to compare regional values. The D3 v7 code filters a FAOSTAT CSV dataset, then uses `d3.pie` and `d3.arc` for the pie, `d3.scaleBand` and `d3.scaleLinear` for the bar chart, and a hover tooltip. The charts are rendered as SVG with `d3.select`, `d3.scaleOrdinal`, and `arc.join`.

Loading thumbnail…

plot 1

This heatmap displays the prevalence of undernourishment (as a percentage, three-year average) across a selection of 20 countries over multiple years. Each cell’s color intensity represents the value, using a sequential orange-red color scale. The visualization loads CSV data from a GitHub-hosted FAOSTAT dataset via `d3.csv`, filters it by item and country, and renders the plot using D3 v7 with SVG rectangles. Interactive tooltips, implemented with D3’s selection and event handlers, reveal country, year, and exact percentage on mouseover.

Loading thumbnail…

Fork of Tree

This fork-based visualization presents a tidy left-to-right tree showing programming languages organized by paradigm (root → paradigm → language → library), with shape encoding depth (★ paradigms, ▲ languages, ● libraries) and color encoding paradigm groups. Built with React and D3.v7, the example uses `d3.hierarchy` to construct the tree and `d3.tree().size()` to compute a tidy layout within an SVG canvas. The data is embedded directly in the script as a static JavaScript object.

Loading thumbnail…

Fork of Country map

This choropleth map colors US states by average annual sunshine hours, using a yellow-green sequential scale. The data is stored in a JavaScript Map for approximately 20 states, with missing states rendered pale green. Built with D3 v7 and topojson-client, it uses `d3.geoAlbersUsa()` for projection, `d3.geoPath()` for rendering state boundaries, and a custom tooltip on mouse events. The legend is drawn inside the SVG, and state data comes from the us-atlas states-10m GeoJSON.

Loading thumbnail…

Fork of WorldMap1

This fork of WorldMap1 presents a static choropleth of internet penetration rates for selected countries, using a blue sequential color scale. Countries without data remain uncolored, and hovering reveals a country name tooltip. The map is rendered as SVG with D3 v7 and uses `d3.geoNaturalEarth1` and `d3.geoPath` to project Natural Earth country boundaries from TopoJSON via `topojson.feature`. The color encoding is defined by `d3.scaleSequential` with `d3.interpolateBlues`, and the visualization includes a graticule and sphere outline for geographic context.

Loading thumbnail…

Fork of network

A force-directed network diagram visualizes airline routes between US cities, with blue circles marking hub airports and green squares representing regional ones. Link thickness encodes weekly flight frequency, while hover tooltips display route details. Built with D3 v7, the visualization uses `d3.forceSimulation` with link, charge, center, and collision forces, rendering nodes and edges as SVG elements.

Loading thumbnail…

Fork of map1

This world map uses a blue sequential color scale to show internet penetration percentages for a sample of countries, with darker blues indicating higher usage and gray for missing data. Built with d3.geoPath and a Natural Earth projection, the visualization renders country boundaries from the world-atlas TopoJSON and joins names from its TSV file. Interactive tooltips display country names and values, while a legend and captions clarify the color mapping. The code uses d3.scaleSequential with an interpolateBlues interpolator for the choropleth coloring.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart by priyankachary1701 visualizes total book borrow counts per publication year, drawn from a CSV of library books. The D3 v7 code fetches the data, rolls it up by year with `d3.rollup` and `d3.sum`, then renders an SVG line and points. The chart includes axes, gridlines, and a hover tooltip, using D3 scales (`scaleLinear`), `d3.line`, and the selection API alongside `d3.csvParse` for data ingestion.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the total borrow count by genre, with each slice's size proportional to the genre's cumulative borrows from the Library_book.csv dataset. The chart displays a legend to the right of the visualization, listing each genre with its corresponding total value. Built with D3 v7, the code uses `d3.pie` to compute slice geometry, `d3.arc` for path rendering, and `d3.rollup` to aggregate the data by genre. The visualization is rendered as an SVG, with slices filled using a concatenated color scheme of `schemeTableau10` and `schemeSet3`.

Loading thumbnail…

Fork of Reusable Scatter Plot

This interactive scatter plot visualizes library book data, showing relationships between numeric attributes like borrow count, rating, pages, and year, with points colored by genre. Users can dynamically switch the X and Y axes via dropdown menus and adjust point radius with a slider control. The visualization is built using a reusable D3.js module with a closure-based API for configuring scales, axes, and accessors. It employs D3's `d3.csvParse` for data loading, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for color encoding, and SVG rendering with hover tooltips.

Loading thumbnail…

Fork of Area chart

This area chart visualizes the total borrow count of library books per year. The data is loaded from a CSV file hosted on GitHub and aggregated by year. The chart uses a soft blue filled area with a line overlay and circular markers to emphasize data points. Hovering over a point reveals a tooltip. Built with D3 v7, it uses methods like `d3.area`, `d3.line`, `d3.csvParse`, and `d3.rollup` to process the data and render SVG elements. Grid lines and labeled axes provide context for the temporal trends.

Loading thumbnail…

Fork of Reusable Scatter Plot

A reusable scatter plot displays library book data from a CSV file, plotting pages on the x-axis against borrow count on the y-axis, with circle size encoding rating and color encoding genre. The chart is built using a Bostock-style factory function that employs D3 v7 APIs including `d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol`. A tooltip appears on mouseenter, showing the book title and all encoded values. SVG rendering includes an interactive legend for the genre categories.

Loading thumbnail…

Fork of Reusable Scatter Plot

This scatter plot visualizes library books by pages and borrow count, with point size encoding rating and color encoding genre. The visualization is built using D3 v7, employing the reusable scatter-plot factory pattern similar to Bostock's approach. It uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` with `d3.schemeTableau10` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. Tooltips display title, pages, borrows, rating, and genre, while a legend maps genre colors. Data comes from `Library_book.csv`, loaded via a Gist URL.

Loading thumbnail…

BAR CHART

This bar chart shows the total number of pages per book genre, with genres sorted in descending order along the x-axis and page totals on the y-axis. The visualization uses d3.csv to load a Library_book dataset, then aggregates pages by genre using d3.rollup and d3.sum. The chart is rendered as SVG with d3.scaleBand and d3.scaleLinear for positioning, while d3.axisBottom and d3.axisLeft create the rotated and labeled axes. Each bar is drawn with rounded corners (rx) and styled using CSS custom properties for colors.

Loading thumbnail…

Multi-Series

A multi-series chart combines bars for borrow counts and a line for average ratings across book genres, with ratings scaled by 100 to share a single axis. The visualization uses D3 v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.rollups` for aggregation, and SVG rendering for both elements. Data comes from a CSV file containing genre, borrow count, and rating fields, processed with `d3.csv` and `d3.sum`/`d3.mean`. The chart includes axes, gridlines, and a legend distinguishing the two metrics.

Loading thumbnail…

SCATTER PLOT

This scatter plot visualizes the relationship between a book's borrow count and its rating, with each point colored by genre. It displays the distribution of library books across these two quantitative variables. The visualization is built with D3 v7, using `d3.csv` to load data from a remote gist, `scaleLinear` for both axes, and `scaleOrdinal` with the Tableau10 scheme for genre colors. Points are rendered as SVG circles with tooltips, and a separate HTML legend is constructed by iterating over the unique genres.

Loading thumbnail…

Q3

This example presents a data-summary and preview tool for library book CSV data. It loads a user-provided CSV file and displays a statistical summary of each column, distinguishing numeric columns with min/max/mean values from categorical columns with unique counts. The application then renders the first ten rows of data in a styled HTML table. All visualization is built using the D3.js library (v7), primarily using `d3.csvParse` with `d3.autoType` for data ingestion and `d3.min`, `d3.max`, and `d3.mean` for column analysis. A separate static SVG graphic demonstrates basic shapes like rectangles, circles, and polygons.

Loading thumbnail…

Q2

This example presents a library book statistics tool with two parts: a data summary panel and a static SVG illustration. Users paste a raw CSV URL, and the code loads the data using D3 v7’s `d3.csvParse` with `d3.autoType`, then displays row counts, column names, and per-column analyses distinguishing numeric fields (with min/max/mean via `d3.min`, `d3.max`, `d3.mean`) from categorical ones (with unique counts). The adjacent SVG shows five required elements—rect, circle, polygon, line, and text—whose shapes are styled through CSS.

Loading thumbnail…

Fork of HTML Starter

This example displays a library book dataset summary and a static SVG illustration. It fetches CSV data from a user-provided URL and uses D3.js version 7 to parse and analyze the columns, categorizing them as numeric or categorical and computing statistics like min, max, and mean. The summary section lists row and column counts, while a separate SVG image shows five basic shapes (rectangle, circle, polygon, line, and text), utilizing D3's `d3.csvParse` and aggregation functions.

Loading thumbnail…

Fork of HTML Starter

This example loads a user-supplied raw CSV file and presents a data summary alongside a preview table of the first ten rows. The D3 v7 code uses `d3.csvParse` with `d3.autoType` to parse the data, then computes column-level statistics such as minimum, maximum, mean, and unique value counts. A static SVG picture demonstrates five basic shapes—rectangle, circle, polygon, line, and text—styled via external CSS. The interface includes a text input and button for fetching new data URLs, with results rendered into the summary and table containers.