Skip to main content
Log in
P

Pranay Matalia

@pranay2281·25 public vizzes

Loading thumbnail…

Pie Chart Black Hat

This pie chart visualizes categorical data with labeled slices using D3 v6. Eleven groups (a through k) are encoded as colored arcs with black strokes and 0.7 opacity, created through the `d3.pie` and `d3.arc` generators. The SVG rendering includes group labels positioned via `arcGenerator.centroid`, with colors assigned from the `d3.schemeSet2` ordinal scale. The chart uses dummy data embedded in the code and renders within a React-ready HTML page.

Apr 26, 2022
Loading thumbnail…

White Hat Pie Chart

This example creates a white-themed pie chart that displays a categorical dataset with labeled slices. The code uses D3.js v6 to build an SVG visualization, generating arcs with the `d3.pie` and `d3.arc` functions, and colors each slice using a `d3.scaleOrdinal` with `d3.schemeSet2`. Slice labels are positioned at arc centroids via `arcGenerator.centroid()`. The chart is rendered inside a React-friendly structure, with data defined as a simple object mapping group names to values.

Apr 26, 2022
Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart visualizes the changing proportions of racial groups in the U.S. population across 1960, 2010, and 2060. Three vertical axes represent each year, with four polylines connecting the percentage values for White, Black, Hispanic, and Asian groups, colored via a d3.scaleOrdinal. The visualization uses React with d3.v6, rendering SVG paths with animation, and includes mouseover highlighting that dims all lines except the hovered group to facilitate comparison.

Apr 26, 2022
Loading thumbnail…

Black Hat Bar Chart

This bar chart visualizes yearly rainfall data, with a fixed y-axis scale from 5 to 15 mm and bars colored steelblue via a CSS class. The chart uses D3 v7’s `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick rendering. Data loads from a CSV file using `d3.csv`, and the SVG is generated procedurally in a React-free vanilla JavaScript setup.

Apr 26, 2022
Loading thumbnail…

White Hat Bar Chart

This example shows annual rainfall totals from 2014 through 2021 as a simple bar chart, with each bar’s height encoding millimeters of rain and axes labeled for both year and rainfall length. The visualization is built with D3 v7 in an SVG container, using `d3.scaleBand` to position bars and `d3.scaleLinear` to map rainfall values to pixel heights. The code loads data from an external CSV file via `d3.csv`, then renders bars with `container_g.selectAll(".bar")` and adds bottom and left axes using `d3.axisBottom` and `d3.axisLeft`. A rotated text label and custom tick format (`d + "mm."`) annotate the chart.

Apr 26, 2022
Loading thumbnail…

Proportional Symbol Maps

This proportional symbol map displays transportation costs across U.S. states, with circles sized by cost and colored purple for the top 10 most expensive states or violet otherwise. Hovering reveals a tooltip with the state name and exact cost. Built with D3 v3, it uses d3.geo.path for map rendering, d3.scale.sqrt for circle radii, and topojson to draw state boundaries. The visualization includes a legend showing cost values and employs queue.js to load GeoJSON, centroid data, and a CSV of state costs.

Apr 12, 2022
Loading thumbnail…

Choropleth Maps

This choropleth map displays the percentage of adults with a bachelor’s degree or higher across U.S. counties for 2015–19, using a purple sequential color scale (d3.schemePurples) with a threshold legend. County boundaries are drawn via d3.geoPath, while state outlines are rendered as white meshes using topojson.mesh. Hovering a county highlights it with a black stroke via mouseover/mouseleave transitions. The data merges TopoJSON geographic shapes with CSV values keyed by FIPS codes, and the visualization is built with React and SVG inside a D3 v5 environment.

Apr 12, 2022
Loading thumbnail…

Interaction

This example demonstrates interactive multi-series time-series data visualization, showing temperature trends for New York, San Francisco, and Austin. Users can hover to highlight a specific line, click to toggle its visibility, and zoom along the x-axis using d3.zoom with rescaleX. Rendering uses SVG with d3.line and curveBasis, while the data loads from a TSV file parsed via d3.tsv and d3.timeParse. Styling applies CSS stroke properties, and the React framework supports the interaction handling.

Apr 5, 2022
Loading thumbnail…

Line Chart

This line chart displays California government expenditure from 1992 to 2019, with the year on the x-axis and expenditure in units of approximately $10 million on the y-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist and renders an orange line via the `d3.line()` generator within an SVG. Axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`, with linear scales (`d3.scaleLinear()`) mapping data to pixel coordinates. The chart includes a title and axis labels, all positioned manually within the SVG canvas.

Apr 2, 2022
Loading thumbnail…

Force-directed Layout

This example shows a force-directed network layout of a graph dataset from the Network Data Repository. Nodes appear as orange circles, with gray links connecting them; hovering over a node displays its ID in a tooltip. The visualization uses D3.js v6 with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to compute node positions, while `d3.drag` enables interactive node repositioning. Data is loaded from a CSV file, and the SVG rendering updates continuously during simulation ticks, with node colors assigned via `d3.scaleOrdinal`.

Mar 29, 2022
Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

Mar 29, 2022
Loading thumbnail…

Edge Bundling

This example visualizes hierarchical data as a radial dendrogram with edge bundling, where leaf nodes are arranged in a circular layout and connected by curved, bundled paths that reveal clustered relationships. The code uses d3.cluster for tree layout, d3.radialLine with d3.curveBundle.beta(0.85) to draw the bundled links, and d3.scaleLinear to size circular bubbles at each leaf based on node values. Data is loaded from a JSON file, and the SVG renders labels and semi-transparent bubble markers around the circle’s perimeter.

Mar 29, 2022
Loading thumbnail…

Diverging Color Bar Chart

This example visualizes annual rainfall data as a diverging color bar chart, showing deviations from the mean of 1215.2mm. Bars are colored on a red-white-green linear scale, with positive deviations in green and negative in red, anchored at zero. Built with D3 v7 in SVG, it uses d3.scaleBand for the x-axis, d3.scaleLinear for both y-values and color, and the d3-legend library for a sequential color legend. Data is loaded asynchronously from a CSV file.

Mar 8, 2022
Loading thumbnail…

Sequential Bar Chart

This sequential bar chart visualizes California government expenditure from 2012 to 2019, with each bar colored along a green sequential scale to indicate relative spending levels. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleSequential with an interpolateGreens interpolator for the color encoding. The SVG is rendered in React, with data loaded from a CSV via d3.csv, and a d3-legend color legend shows the expenditure scale.

Mar 8, 2022
Loading thumbnail…

Qualitative Bubble Chart

This bubble chart visualizes the relationship between age and BMI for roughly 500 individuals, with color encoding gender. The SVG rendering uses d3.scaleLinear for both axes and d3.scaleOrdinal with a custom color range to distinguish male and female data points. The code loads data from a CSV via d3.csv and positions circles using xScale and yScale. A d3-legend legend is added for gender, and both axes are generated with d3.axisBottom and d3.axisLeft.

Mar 8, 2022
Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age, BMI, and insurance charges for roughly 250 individuals, with gender distinguishing the data points. The x-axis maps age while the y-axis shows BMI, and circle radius encodes the magnitude of insurance charges. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and `d3.scaleOrdinal` to color points by gender. A legend displays the minimum and maximum charge values alongside color swatches for male and female categories, with data loaded from an external CSV file.

Mar 1, 2022
Loading thumbnail…

HeatMap

This heatmap visualizes the expenditure of several U.S. states from 1992 to 2001, with each cell colored on a linear scale from light beige to dark red to indicate spending levels. The chart includes labeled axes for state and year, along with a legend showing approximate dollar amounts. Built with React and rendered as SVG, it uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft to generate the axes.

Feb 25, 2022
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between age and insurance charges using data loaded from a CSV file. D3.js v7 scales map age and charge values to SVG circle positions, with axes labeled and a title displayed. The visualization uses d3.csv to fetch external data, d3.scaleLinear for both x and y domains, and d3.axisBottom and d3.axisLeft to render the axes. The SVG rendering approach draws each data point as a small blue circle.

Feb 25, 2022
Loading thumbnail…

Bar Chart

This bar chart displays California government expenditures from 2012 to 2019, with the y-axis labeled in tens of millions of dollars. The visualization uses D3 v7’s `d3.scaleBand()` and `d3.scaleLinear()` to encode the categorical years and continuous expenditure values. The React framework renders the bars as SVG rectangles with a `steelblue` fill, while `d3.csv()` reads the data from a CSV file. Axis labels are added using `d3.axisBottom()` and `d3.axisLeft()`, with a title placed above the plot area.

Feb 25, 2022
Loading thumbnail…

Histogram

This histogram displays the number of states falling into various expenditure brackets (in hundred-million-dollar units). It visualizes aggregated finance data loaded from a CSV file. The code uses the p5.js library to render the chart, processing the data to sum expenditures per state, then binning these totals into fifteen predefined ranges. The p5.js canvas draws the bars, axis labels, and grid lines.

Feb 13, 2022
Loading thumbnail…

Box Plot

This interactive p5.js visualization displays a box plot of California state expenditures from 1992 to 2019, with values loaded from a remote CSV file and normalized to units of $10 million. The sketch uses p5.js functions like `loadTable()`, `sort()`, and canvas drawing primitives (`line()`, `point()`, `text()`) to render the median, quartiles, and whiskers on a static 740x520 canvas, with axes and tick labels marking expenditure values.

Feb 13, 2022
Loading thumbnail…

Strip Chart

This strip chart shows the distribution of Apple’s monthly share price from July through December 2021, with each month’s data points jittered horizontally to reveal density and spread. It loads a CSV from a GitHub gist using p5.js’s `loadTable()`, then renders points with `point()` on a 700×600 canvas. The x-axis labels months, the y-axis maps price per share, and random jitter is applied per point within each month’s column using `random()`. The code uses p5.js’s `setup()`, `draw()`, and `noLoop()` to generate the static visualization.

Feb 13, 2022
Loading thumbnail…

Heat Map

This heat map visualizes the total expenditure of several U.S. states over time, using pink intensity to indicate higher spending amounts. It plots a grid where each cell's color corresponds to a specific state-year combination, with darker pink representing greater expenditure. The visualization is built using the p5.js library, which handles the canvas, drawing, and color fills. Data is loaded from a CSV file via the `loadTable` function, with state names and years rendered as text labels alongside the grid. The map reveals that most states show increasing expenses over recent years, while West Virginia's spending initially declined before rising again.

Feb 8, 2022
Loading thumbnail…

Dot Plot

This dot plot visualizes state expenditure data from 1992–2019, with each point representing a state’s total spending in hundreds of millions of dollars. The chart uses p5.js’s `loadTable` to fetch a CSV, `createCanvas` for rendering, and `point` with heavy `strokeWeight` to draw dots. Annotations highlight comparisons, such as New York’s spending being 1.5 times Texas’s, while the axes are manually constructed via `line` and `text`.

Feb 8, 2022
Loading thumbnail…

Bar Chart

This bar chart visualizes total state expenditures in the U.S. from 1992–2019, drawn using the p5.js library. The visualization sums spending per state from a CSV file loaded via `loadTable`, scaling bar heights to values in hundreds of millions of dollars. It highlights California as the highest spender and Wyoming as the lowest, with labeled axes, gridlines, and annotations. The rendering uses p5.js canvas functions such as `rect`, `line`, and `text` to construct the chart.

Feb 8, 2022