P

prateekvasi

@prateekvasi·21 public vizzes

Loading thumbnail…

Diverging bar chart

This diverging bar chart visualizes net forest conversion across countries, with bars extending to the right for net gains and to the left for net losses. The visualization uses a diverging color scale from the ColorBrewer RdYlGn palette to encode the magnitude and direction of change. Entities are labeled directly within the chart, and hovering over a bar reveals a tooltip with the exact value. The chart is rendered as an SVG using D3.js v6, with scales defined via `d3.scaleLinear` and `d3.scaleBand`, and data loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between average horsepower and average torque for various German car brands. Each circle represents a brand, positioned along the axes and colored by manufacturer using a D3 ordinal color scale. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.select to build the SVG. Hovering reveals a tooltip with exact values, generated via d3.csv and event handlers. Data comes from the CSV file `stripechart1.csv`.

Loading thumbnail…

Multiline chart

This example shows annual changes in forest area for six South American countries from 1990 to 2015 as a multiline chart, with each country as a colored line. The chart uses a time-scaled x-axis and a linear y-axis, with a legend mapping country names to colors. The code loads data from a CSV file using `d3.csv`, then applies `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to build the paths. Country lines are grouped via `d3.nest` and have interactive tooltips that appear on hover, with transitions handled through `.transition().duration(500)`. The rendering is SVG, with a static title and varying legend spacing.

Loading thumbnail…

Bar chart with a Sequential color scale

This bar chart displays average engine horsepower for seven car manufacturers, sorted from lowest to highest, with bars colored according to a sequential red color scale that maps horsepower values to increasingly darker shades. A yellow tooltip appears on mouseover, showing the exact manufacturer and horsepower value. The visualization is built with D3 v6, using `scaleBand`, `scaleLinear`, and `scaleQuantize` for positioning and color encoding, along with the ColorBrewer Reds palette and the d3-legend library. Data is loaded from a CSV file via `d3.csv`, and rendered as SVG rectangles with interactive hover effects.

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays 1990 county-level population estimates from a CSV file, with counties shaded from light beige to dark red based on population. The map uses a blue-to-red sequential color scale, and hovering over a state dims others, highlights the selected one with a black stroke, and shows a tooltip with the state name and its population value. Built with D3.js (d3.v3), the visualization uses `d3.csv` to load data, `d3.geo.path` to render geographic features from a TopoJSON file, and `d3.mouse` events to manage tooltip positioning.

Loading thumbnail…

Untitled

This example presents two linked views of the same network of U.S. states: a node-link force-directed diagram and an adjacency matrix. The matrix cells are colored by the states’ regional group, and the visualization animates reordering between sorted and categorical arrangements. Built with D3 v3, it uses `d3.layout.force` for the node layout, while the matrix uses `d3.scale.ordinal` for axes and `transition.attr` for smooth reordering.

Loading thumbnail…

Proportional symbols map

This proportional symbols map visualizes grocery costs across US states, with circles positioned at state centroids sized by cost and colored red for the most expensive states. The visualization is built with D3 v3, using `d3.geo.path` for the map, `d3.scale.sqrt` for circle sizing, and `d3.csv` to load the cost data. Interactive tooltips appear on mouseover, and a legend displays cost values. The SVG rendering includes animated opacity transitions for symbols and a static map base from topojson data.

Loading thumbnail…

Choropleth World population map

A choropleth map of the world colors each country according to its population, using a threshold color scale with a sequential red palette. Hovering over a country dims others and reveals a tooltip with the country name and population in millions, while clicking zooms the map. Population data is joined to GeoJSON country outlines via three-letter country codes, and the map is rendered as SVG using `d3.geoRobinson`, `d3.geoPath`, and `d3.scaleThreshold` with an animated `transition` on opacity and stroke.

Loading thumbnail…

Multi-Series Line Chart V7-Voronoi

This chart visualizes daily average temperatures for New York, San Francisco, and Austin over several months using a multi-series line chart. Three colored lines, one per city, trace temperature trends over time, with hovering over a line highlighting it and dimming others; clicking a line toggles its visibility. The visualization also includes an optional overlay of Voronoi regions to aid in selecting nearby data points. Built with D3.js v7 and the d3-voronoi extension, it renders as an animated SVG.

Loading thumbnail…

Multi-Series Line Chart V7-Electric_Production

This visualization displays monthly electric production data from 1985 to 2006 as a multi-series line chart, with each line representing a different data column from the TSV file. The chart uses D3 v7’s `d3.line` with `curveBasis` to render smooth paths and `d3.scaleTime`/`d3.scaleLinear` for axes, while `d3.zoom` enables panning and scaling along the time axis. Hovering highlights a single series by graying out others, and clicking toggles series visibility, with colors assigned via `d3.scaleOrdinal` and `schemeCategory10`.

Loading thumbnail…

Multi-Series Line Chart V7

This interactive multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. It displays three color-coded temperature trends over time, with a legend for city selection. The visualization supports zooming and panning along the time axis, and users can click legend items to toggle the visibility of individual city lines. Hovering over a legend dims non-selected series. The code uses D3 v7 with `d3.scaleTime`, `d3.line` with `d3.curveBasis`, and an SVG rendering. It loads data from a TSV file and includes animation via D3's transition and zoom APIs.

Loading thumbnail…

Multi-Series Line Chart V3

This multi-series line chart displays daily temperature readings for New York, San Francisco, and Austin over several months, with each city drawn as a distinct colored line. Users can toggle cities on and off by clicking legend entries, and hovering over a line highlights it while dimming others. The chart uses D3 v3 with SVG rendering, employing d3.svg.line, d3.time.scale, and d3.behavior.zoom for panning/zooming. Temperature data comes from a tab-separated data.tsv file, with axes labeled in degrees Fahrenheit.

Loading thumbnail…

edge-bundling

A hierarchical edge-bundling diagram shows connections between music album credits and contributor roles, arranged radially around a circle. The code uses `d3.cluster` to compute the radial layout and `d3.radialLine` with `d3.curveBundle.beta(0.5)` to draw the bundled paths in SVG. Hovering highlights source and target nodes and links. Data comes from a CSV parsed by `d3.csv`, which is transformed into a hierarchy and import links via custom functions.

Loading thumbnail…

Force-Directed Graph & Adjacency Matrix- D3.js

This example pairs a force-directed graph with an adjacency matrix to visualize relationships from a food-themed CSV dataset. The graph uses `d3.forceSimulation` with link and charge forces to position nodes, while draggable circles represent entities. The adjacency matrix uses SVG rectangles, with fill opacity scaled by edge weight, and includes interactive tooltips on mouseover. Both views share the same node-link data, rendered in SVG with animation. The code relies on D3.js v6 APIs including `d3.csv`, `d3.forceLink`, `d3.drag`, and `.join()`.

Loading thumbnail…

Dot Chart

This dot chart displays annual values from 2011 to 2021 as individual circles, with a tooltip revealing each dot's exact value on hover. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. Circles are appended to SVG groups with mouseover, mousemove, and mouseleave handlers controlling tooltip visibility. The chart includes a title and uses a teal fill with black stroke for each dot.

Loading thumbnail…

Stripe Chart New

This stripe chart shows the relationship between torque and miles per gallon (mpg) for car makes including Audi, BMW, Mercedes, Porsche, and Volkswagen. Each data point is plotted as a circle, with torque on the x-axis and mpg on the y-axis. Colors encode the car manufacturer, and a legend identifies the make. The visualization is built with d3.v4, using SVG rendering, and includes a tooltip that displays the mpg value on hover. The data is loaded from a local CSV file, and the chart uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.axisBottom and d3.axisLeft for tick marks.

Loading thumbnail…

Stripe Chart

This stripe chart displays the miles per gallon (mpg) for individual car models across five automobile brands, with each point jittered horizontally within its category to reveal distribution. The visualization uses d3.csv to load the data, then builds an SVG with axis scales via d3.scaleLinear and d3.scaleBand. Points are colored using a sequential d3.scaleSequential with the Inferno interpolator. Interactive hover tooltips appear through d3 mouse events, while the Y-axis domain is manually fixed to highlight variations in fuel efficiency.

Loading thumbnail…

Histogram

This histogram visualizes the distribution of horsepower values from a CSV dataset, with counts binned across a linear scale. The chart uses D3 v6 to implement the visualization, employing `d3.histogram()` to generate bins and `d3.scaleLinear` for both axes. Each bar is rendered as an SVG `rect`, and interactive tooltips appear on hover, displaying the bin’s range. The chart includes a titled SVG output and left-aligned axis labels, with bars filled in a solid blue color.

Loading thumbnail…

Box Plot Jitter

This example combines a box plot with jittered individual data points to show the distribution of fuel efficiency (mpg) for a 2012 Volvo XC90. The box plot displays quartiles, median, and whiskers, while red circles reveal each data point’s exact value, with mouseover tooltips showing the mpg. Using D3.js v4, it computes summary statistics via `d3.nest` and `d3.quantile`, then renders the SVG with scales, rectangles, lines, and circles. The data comes from the included `boxplot.csv` file.

Loading thumbnail…

Box Plot

This example visualizes the distribution of miles per gallon (mpg) for 2012 vehicles using a box plot. It shows the minimum, first quartile, median, third quartile, and maximum values as horizontal lines and a shaded box, with numerical labels for each statistic. The chart is built with D3.js v4 and rendered as SVG, reading data from a CSV file. The code uses `d3.csv`, `d3.quantile`, and `d3.scaleLinear` to compute summary statistics and map the data to screen coordinates.

Loading thumbnail…

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.