R

Riya Mathur

@riyamathur1·23 public vizzes

Loading thumbnail…

A7 - Small Multiples in D3

This example uses small multiples to display the frequency of Atlantic storms from 1995 to 2016, with each chart representing a different storm name. The visualization shows a line chart for each storm, mapping year on the x-axis and frequency on the y-axis, with all charts sharing identical scales for easy comparison. Built with D3 v6, it uses `d3.csv`, `d3.group`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to parse data, group by storm name, and render SVG paths, axes, and a legend. The color scale uses `d3.schemeCategory10`, and the data comes from an external CSV file linked in the code.

Loading thumbnail…

A7 - Heatmap in D3

This heatmap visualizes the frequency of tropical storms in the Atlantic from 1995 to 2019, with years on the x-axis, storm names on the y-axis, and color intensity indicating frequency. It uses D3 v6 to construct an SVG heatmap, reading data from a CSV file and applying the Inferno color scale. Tooltips display exact frequencies on hover, while a gradient legend clarifies the color mapping. The chart includes axis labels and a title, making the distribution of storm activity over time and by storm type readily apparent.

Loading thumbnail…

A8 - Adjacency Matrix in D3

This adjacency matrix visualizes the Wikipedia Voter Dataset, showing connections between users as black cells on a white grid. Built with D3 v6 using SVG rendering, the code reads CSV data via `d3.csv`, constructs the matrix, and sorts node IDs numerically. Each cell renders as a `rect` with hover interactions that trigger a tooltip and highlight the cell in orange, while row and column labels display node identifiers.

Loading thumbnail…

A8 - Node-link diagram with force-directed layout

This visualization shows the Wikipedia voter network as a node-link diagram, where each circle represents a user and connecting lines represent voting relationships. The graph uses a force-directed layout driven by `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for positioning. Nodes are rendered as SVG circles, interactive via `d3.drag`, and hovering displays a user’s ID. Data is loaded from a CSV file using `d3.csv` and rendered entirely with SVG elements.

Loading thumbnail…

A8 - Edge Bundling in D3

This example demonstrates edge bundling for a network graph using D3.js within a React framework. It visualizes hierarchical data connections as curved, bundled paths that reduce visual clutter. The code employs D3’s force-directed simulation (`d3.forceSimulation`) to position nodes and `path` elements with Bézier curves to draw the edges. The rendering relies on SVG, with the graph’s structure defined in a local data file. The visualization showcases how edge bundling can clarify complex relationships in interconnected datasets.

Loading thumbnail…

A7 - Multi Line Chart in D3

A multi-line chart displays the frequency of three named Atlantic storms from 1995 to 2016, with each storm represented by a colored line over a time-based X axis and a frequency Y axis. The visualization loads CSV data from a GitHub gist, groups and parses it with `d3.group` and `d3.timeParse`, and renders SVG paths using `d3.line` and `d3.scaleTime`. A legend and axis labels clarify the series, while a categorical color scale assigns each storm a distinct color.

Loading thumbnail…

A6 - Sequential Color Scale Bar Chart

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

Loading thumbnail…

A6 - Scatterplot with Qualitative Color Scale

This scatterplot shows the relationship between average temperature and wind speed across different states, with each dot colored by state to reveal grouping patterns. The visualization uses D3.js v6 to load CSV weather data and render SVG circles, mapping temperature to the x-axis and wind speed to the y-axis. A qualitative color scale (d3.scaleOrdinal with d3.schemeCategory10) assigns distinct colors to each state, while a categorical legend created with the d3-legend library identifies the color encoding. The chart includes labeled axes, a title, and semi-transparent points for readability.

Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

Loading thumbnail…

Bar Chart in D3

This bar chart displays the net worth of the top 20 billionaires in 2014, with each billionaire’s name on the y-axis and their wealth in billions on the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist, and renders horizontal bars as SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Text labels show exact wealth values at the end of each bar, while axis and chart titles are added using D3’s SVG text elements. The styling relies on CSS classes for bar fill and font formatting.

Loading thumbnail…

Line Chart in D3

This line chart displays the number of police shootings in the United States per year from 2015 to mid-2020. The x-axis shows years as discrete values using `d3.scaleBand`, while the y-axis uses `d3.scaleLinear` with a range of 400 to 1200 incidents. The data is loaded from a remote CSV file via `d3.csv`, parsed with `d3.timeParse`, and aggregated by year using `d3.rollups`. The line is drawn with `d3.line`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with SVG output.

Loading thumbnail…

Bubble Chart in D3

This bubble chart visualizes the size distribution of turtles, plotting length on the x-axis and width on the y-axis. Circle size encodes height, while color distinguishes sex: blue for male and orange for female. Interactive tooltips appear on mouseover, displaying exact measurements. Built with D3 v7, the SVG visualization uses scales like `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, with data loaded from a CSV file and axes rendered via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Boxplot in D3

This boxplot visualization displays the distribution of a dataset through a series of vertical box-and-whisker plots, with each plot summarizing key statistics such as the median, quartiles, and potential outliers. The chart is rendered using the D3.js library, specifically leveraging `d3.select` to append SVG elements and `d3.scaleLinear` for the y-axis mapping. Data values are drawn using SVG `rect` and `line` elements, while axes are annotated via `d3.axisLeft`. The example emphasizes standard boxplot conventions, with whiskers extending to the most extreme data points within 1.5 times the interquartile range, and individual outliers plotted as circle markers.

Loading thumbnail…

Scatterplot in D3

This scatterplot visualizes the relationship between the age and wealth of billionaires, sourced from a CSV file. Each purple circle represents a billionaire, with its position determined by age on the x-axis and wealth in billions on the y-axis. The visualization uses D3.js version 7 within an SVG rendering to create the plot, axes, and labels. The code employs `d3.csv` to load the data, `d3.scaleLinear` for scaling, and `d3.axisBottom` and `d3.axisLeft` to construct the chart axes.

Loading thumbnail…

Strip Chart

This visualization displays the distribution of highest salaries for graduates using a strip chart. Individual salary values are plotted as blue points along a vertical axis, with random horizontal jitter applied to reduce overplotting. The chart is created with p5.js, loading a CSV dataset of graduate salaries and using the `loadTable`, `createCanvas`, and `ellipse` functions. Salary data is filtered, sorted, and scaled to fit the canvas height. Both the x and y axes are labeled, with the chart title displayed at the top.

Loading thumbnail…

Box Plot

This example visualizes the distribution of salary data as a box plot, highlighting the minimum, first quartile, median, third quartile, and maximum values using a green box with a red median line. The data is loaded from a CSV file using p5.js’s `loadTable`, then processed and sorted in `setup` before a custom `drawBoxPlot` function renders the chart on a dimmed background. The code computes quantiles via a `quantile` helper function and uses p5.js drawing commands like `rect` and `line` to construct the plot directly on the canvas.

Loading thumbnail…

Box Plot

This visualization displays a heatmap of billionaires’ wealth across global regions and years, with darker cells indicating higher net worth. Built with p5.js, it uses `loadTable()` to fetch CSV data from a GitHub gist, then renders colored rectangles via Canvas `rect()` calls. A gradient legend maps wealth values to grayscale intensities, while region and year labels orient the grid. The visualization also includes a title and custom color-mapped legend, offering a quick comparative view of wealth distribution over time.

Loading thumbnail…

Histogram

This example displays a histogram of median salaries for recent graduates, using a dark background with light blue bars to visualize frequency distribution across 20 salary bins. The p5.js sketch loads CSV data from a GitHub gist, processes the salary column, and generates the chart on an HTML canvas. It includes labeled axes, gridlines for frequency, and animated rendering through setup and draw functions. The code uses p5.js’s loadTable, map, and rect APIs, with custom binning logic to exclude zero values.

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of median salaries for recent graduates, based on data loaded from a CSV file. Built with the p5.js library, it processes the salary column, filters out zero values, and groups the data into 20 bins. The sketch calculates bin widths and frequencies, then renders the bars on a canvas with gridlines and labeled axes, using p5.js functions like `loadTable`, `createCanvas`, `map`, and `rect` to display the chart.

Loading thumbnail…

Heatmap

This heatmap visualizes the wealth of billionaires across global regions and years, using a grayscale intensity scale where darker cells represent higher wealth values. The visualization arranges regions along the y-axis and years along the x-axis, with a legend showing the wealth-to-color mapping. Built with p5.js, the sketch loads data from a remote CSV file containing billionaire records, processes it in the `preload()` and `setup()` functions, and renders the heatmap using `rect()` calls with mapped fill colors. It also displays region and year labels alongside the interactive legend.

Loading thumbnail…

Dot Plot

This dot plot visualizes the ages of billionaires, with each green dot representing one individual’s age along the y-axis and their sequential index on the x-axis. The p5.js sketch loads a CSV dataset in `preload()` using `loadTable`, filters out zero-age entries, then renders axes, tick marks, and axis labels in `draw()`. It uses `map()` to scale data points, `ellipse()` for the dots, and `line()` for the chart framework, all within a 900x600 canvas.

Loading thumbnail…

Bar Chart

This bar chart shows the number of billionaires per geographic region, with sky-blue bars drawn on a 1200×600 canvas using the p5.js API. The data comes from a CSV file loaded via `loadTable()` in the `preload()` function, and counts are aggregated from the `location.region` column. The visualization includes labeled x- and y-axes with tick marks, using `map()`, `rect()`, and `text()` to position bars and annotations. It is built as a React starter example, though the rendering logic here runs directly within p5.js sketch instructions.