Skip to main content
Log in
O

Olha

@olga-kondr·29 public vizzes

Loading thumbnail…

Interactions

This example shows a multi-series line chart of daily temperatures for New York, San Francisco, and Austin, with two interactive features. Hovering over a city’s label highlights its line by increasing stroke width and graying out the others, while clicking the label toggles that city’s line visibility. The visualization uses d3.line with curveBasis to draw smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.schemeCategory10 for colors. Data is loaded as a TSV file via d3.tsv, and all rendering is done in SVG.

Sep 3, 2026
Loading thumbnail…

Bar Chart p5.js

This bar chart displays the most successful film distributors by movie count from 1995 to 2021. It loads CSV data from a GitHub raw URL using p5.js’s `loadTable` in `preload()`, then renders bars with `rect()` and text labels in `draw()`. The chart includes grid lines, axis labels, and a title, all drawn directly on a 500×350 canvas created with `createCanvas`. The data source is visible as a remote CSV file, and the visualization uses static, hard-coded tick positions rather than dynamic scaling.

Sep 3, 2026
Loading thumbnail…

Bubble Chart with Tooltips Using D3

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

Sep 3, 2026
Loading thumbnail…

Line Chart with D3

This example visualizes abortion rates for 15-17-year-olds across eight U.S. states from 1985 to 2017 as a multi-series line chart, with each state distinguished by a color-coded ordinal scale and a d3-legend. It renders using SVG with animated tooltips on circular data points that display the year, state, and rate on mouseover. The visualization is built with D3 v7, using d3.group for data nesting, d3.line for path generation, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, drawing from CSV data loaded via d3.csv.

Sep 3, 2026
Loading thumbnail…

Bubble Chart with D3 without Tooltips/Legend

This bubble chart displays the locations of bike stations in the Bay Area, with circles sized by dock count and colored by city. The visualization aggregates station data from a CSV file by city, plotting averaged longitude and latitude coordinates. Using D3 v7, the code employs scaleLinear functions for the x, y, and radius mappings, scaleOrdinal for categorical colors, and standard axis generators. Dashed lines and inline labels identify each city with its total dock count, while SVG text elements provide axis titles and chart headings.

Sep 3, 2026
Loading thumbnail…

Bar Chart with D3

This bar chart displays the most successful film distributors from 1995 to 2021, ranked by the number of top films each distributor released. The visualization uses D3.js (v7) to render SVG elements, with a linear scale mapping movie counts to horizontal bar lengths and a band scale positioning each distributor vertically. The code includes gridlines, axis labels, and value annotations generated through D3 selections and joins. Data is loaded from a CSV file via `d3.csv` and sorted in descending order before rendering. Tooltips and interactive features are not implemented.

Sep 3, 2026
Loading thumbnail…

Heatmap with p5.js

This heatmap visualizes abortion rates per 1,000 women for eight U.S. states over 16 years, using a green color scale where darker shades represent lower rates and lighter shades indicate higher rates. It is rendered with p5.js through a React-based VizHub setup, loading CSV data from a GitHub gist. The code iterates through table rows, positioning colored squares in a grid while labeling state abbreviations and years along the axes. A supplemental legend explains the rate categories from below 10 to above 40.

Dec 5, 2022
Loading thumbnail…

Strip Chart with p5.js

This visualization shows birth rates per 1000 people in Florida from 1988 to 2016, grouped by year along the x-axis with rates plotted on the y-axis. It uses a strip chart format where individual data points are rendered as yellow dots, with a subtle randomized horizontal jitter applied to reduce overplotting. The code loads CSV data via p5.js’s `loadTable`, processes it into a dictionary keyed by year, and draws the chart using p5.js canvas functions like `point()`, `line()`, and `text()`. Axes labels and gridlines are manually constructed, and a fixed random salt stored in `localStorage` ensures consistent jitter across reloads.

Dec 5, 2022
Loading thumbnail…

Strip Chart without Randomizer Using p5.js

This example displays Florida birth rates per 1000 people from 1988 to 2016, grouped by year as a strip chart. It loads CSV data via p5.js’s `loadTable` function, then uses nested loops to draw horizontal gridlines, axis labels, and orange points with `point()` and `strokeWeight()`. The chart sorts values within each year and maps them to a fixed y-axis scale, while the p5.js `createCanvas` and `text()` functions render the visualization and annotations.

Dec 5, 2022
Loading thumbnail…

Dot Plot with p5.js

This dot plot visualizes ticket sales for the “Movie of the Year” from 1995 to 2021, with each green circle positioned along a horizontal axis scaled in millions and labeled by year. The example uses the p5.js library within a React framework, loading CSV data via the `loadTable()` API and rendering circles with `circle()`. Grid lines, axis labels, and movie titles are drawn using canvas drawing methods, while the data source is fetched from a GitHub Gist URL.

Dec 5, 2022
Loading thumbnail…

Log Scale with p5.js

This example visualizes ticket sales for the movie of the year from 1995 to 2021 using a logarithmic scale, with data loaded from a CSV file. It uses p5.js for canvas rendering and map data points as green circles positioned along the x-axis based on logarithmic calculations of sales figures. The visualization includes labeled tick marks and grid lines to indicate magnitudes from 1 million to 1 billion, with the log scale enabling compact representation of a wide value range.

Dec 5, 2022
Loading thumbnail…

Adjacency Matrix Using D3

This adjacency matrix visualizes connections between nodes in a hi-tech firm network using a grid where colored cells indicate edges. The D3.js v7 code renders the matrix as SVG rectangles, with row and column labels for node IDs, and highlights entire rows and columns on hover with a tooltip showing link details. It uses d3.scaleBand for positioning, d3.csv for data loading, and the d3-legend library for potential legend support, with data sourced from networkrepository.com.

May 24, 2022
Loading thumbnail…

Node-Link Diagram with Force-Directed Layout Using D3

A node-link diagram displays the SOC-FIRM-HI-TECH network from the Network Repository, with nodes categorized into six groups distinguished by color via a scaleOrdinal. Using D3 v7, the layout comes from d3.forceSimulation with charge, center, and link forces; nodes are rendered as SVG circles with labels and tooltips, and appear draggable through d3.drag. The example also integrates the d3-legend library, though the legend itself is not shown in the code.

May 24, 2022
Loading thumbnail…

Saffir–Simpson Scale

This example visualizes the Saffir–Simpson hurricane scale as a heatmap, presenting intensity categories with color-coded rows based on data from a linked CSV file. The code uses D3 v7 to load the dataset with `d3.csv`, derive column keys from the data, and build an HTML table via `d3.select` and `append`. Each row’s background color is assigned through a `d3.scaleOrdinal` with a custom palette, while cells display the corresponding values. The table structure is generated dynamically, with styling applied directly through D3’s style methods.

Apr 19, 2022
Loading thumbnail…

Bar Chart with a Diverging Color Scale Using D3

This bar chart visualizes evaluations of communication in a pull request from a large open-source project, showing two metrics—inclusiveness and constructiveness—across a five-point Likert scale from negative to positive. The visualization uses a diverging color scale with d3.schemePiYG to distinguish sentiment categories, while negative responses extend leftward from a central zero point. Data is aggregated from an external dataset into a diverging bar layout using D3 v7 scales and SVG rectangles, with a d3-legend color legend explaining the color encoding. The x-axis uses d3.axisBottom to display counts.

Apr 19, 2022
Loading thumbnail…

Bar Chart with a Sequential Color Scale with D3

This bar chart displays abortion rates for 15–17-year-olds across U.S. states in 2010, using a sequential color scale from light blue to dark blue to encode rate values. Each state’s bar is colored via `d3.scaleSequential` with `d3.extent` domain, and an interactive tooltip appears on mouseover. The visualization uses D3 v7 to render SVG elements, including axes via `d3.axisBottom` and `d3.axisLeft`, plus a color legend from the `d3-legend` library. Data is loaded from a CSV file using `d3.csv`.

Apr 18, 2022
Loading thumbnail…

Scatterplot Matrix with D3

A scatterplot matrix displays pairwise relationships among four numeric measurements of iris flowers, with points colored by variety using a categorical color scale. Built with D3 v7 and SVG, the visualization renders a grid of small multiples, each pairing two variables on linear scales. The code constructs scales and axes from column metadata, uses `d3.cross` to generate cell positions, and applies `d3.InternSet` to filter data by variety. Labels appear along the diagonal, and the d3-legend library is linked but legend rendering is not implemented in the visible script.

Apr 18, 2022
Loading thumbnail…

Line Chart Using a Qualitative Color Scale with D3

This line chart tracks abortion rates over time across multiple U.S. states, with each state represented by a separate colored line using a qualitative Set1 color scale from ColorBrewer. A legend to the right identifies each state, and hovering over individual data points reveals an interactive tooltip with the year, state, and rate. The visualization is built with D3 v7, using `d3.scaleOrdinal` for color assignment, `d3.line` for path generation, and SVG rendering with animated tooltip transitions.

Apr 18, 2022
Loading thumbnail…

Scatterplot with a Qualitative Color Scale Using D3

This scatterplot displays bike stations in the Bay Area for 2013, plotting longitude on the x-axis and latitude on the y-axis. Each station is colored by city using a qualitative scale, d3.scaleOrdinal, with d3.schemeTableau10, while a D3 legend (d3.legendColor) shows location categories. The visualization uses D3 v7 to render SVG axes and circles, with data loaded from a remote CSV file.

Apr 18, 2022
Loading thumbnail…

Histogram with D3 - Types of Tropical Cyclones

This histogram shows the frequency of different types of tropical cyclones recorded between 1950 and 2015. The data, loaded from a CSV file using `d3.csv`, is mapped with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the count on the y-axis. SVG rectangles are rendered with tooltips that appear on mouseenter using `d3.select` and are removed on mouseleave. Axis functions `d3.axisBottom` and `d3.axisLeft` format the chart.

Apr 17, 2022
Loading thumbnail…

Histogram with Bins Using D3

This example shows the distribution of docked bikes across California stations in 2013, with a control to adjust the histogram’s bin count from 2 to 40 in steps of 3. The chart uses D3’s `d3.bin` (with `value`, `domain`, and `thresholds` based on `x.ticks(numBins)`) to compute bins from a CSV loaded via `d3.csv`, then renders bars as SVG `rect` elements on a linear scale. Animated transitions via D3’s `transition` API update the y-axis and bar heights when the bin number changes, while the x-axis remains fixed to the full data domain.

Apr 16, 2022
Loading thumbnail…

Heatmap with D3

This heatmap visualizes abortion rates per 1,000 women aged 15–17 across U.S. states over multiple years, using a linear color scale from light gray to red to indicate rate intensity. The D3 v7 code loads data from a CSV and renders an SVG with `d3.scaleBand` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleLinear` for color encoding. It appends rectangles for each state-year pair, plus a legend and axis labels.

Apr 7, 2022
Loading thumbnail…

Scatter Plot of Bike Locations with D3

A scatter plot maps the latitude and longitude of Bay Area bike stations from a 2013 CSV dataset, with each orange circle positioned by its coordinates. The visualization uses d3.csv to load the data, then d3.scaleLinear to map longitude and latitude to SVG canvas positions, while d3.axisBottom and d3.axisLeft generate the axes. Titles for longitude and latitude labels and a heading are added as SVG text elements.

Apr 4, 2022
Loading thumbnail…

Histogram with D3

This histogram displays birth rates per 1000 residents across age groups in California for 2016, rendered as blue SVG bars. It uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for axes, and d3.axisBottom/axisLeft for ticks. Hovering over a bar appends a text label showing the age group via mouseenter/mouseleave events. The chart includes labeled axes for age and count, with a title noting the year and location.

Mar 4, 2022
Loading thumbnail…

Bar Chart with p5.js

This p5.js bar chart displays the most successful film distributors from 1995 to 2021, ordered by the number of movies they distributed. The visualization uses a classic bar-and-axis layout, with distributor names on the y-axis and a count scale on the x-axis. It loads CSV data via the `loadTable()` function from a GitHub repository, then renders the chart using `rect()` and `text()` calls within the `draw()` loop. The chart includes gray gridlines, axis labels, and a blue fill for the bars, highlighting the quantitative ranking.

Mar 4, 2022
Loading thumbnail…

Box Plot with p5.js

This visualization displays box plots of California birth rates per 1000 people across seven years, with each plot summarizing the distribution for a given year. The p5.js sketch loads CSV data via `loadTable()`, groups rows by year, and computes quartiles and median for each group. It renders colored rectangles for interquartile ranges, median lines, and whiskers using `rect()` and `line()`, with gridlines and axis labels drawn on an 800×500 canvas.

Mar 4, 2022
Loading thumbnail…

Histogram with p5.js

This example displays a histogram of birth rates per 1000 in California for 2016, with age groups on the x-axis and counts on the y-axis. The visualization uses p5.js to load a CSV dataset via `loadTable()` in `preload()`, then renders bars with `rect()` and axis labels with `text()` and `line()`. The data comes from a GitHub gist, and the sketch draws gridlines, a title, and a rotated y-axis label using canvas transforms.

Mar 4, 2022
Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the relationship between ticket sales and income for movies from 1995 to 2021. Each circle represents a movie, with its horizontal position mapped to income and vertical position to tickets sold. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the data from a GitHub Gist. Seagreen circles are joined to the data using `selectAll` and `.join("circle")`, with title and axis labels added as SVG text elements.

Feb 24, 2022
Loading thumbnail…

as3_c1_p5.js

This example visualizes the distribution of MPAA ratings from a movie dataset using p5.js. It loads CSV data from a GitHub gist in `preload()`, counts occurrences of each rating in `setup()`, and renders vertical bar charts on a canvas. The sketch draws grid lines, axis labels, and colored rectangles for each rating value, with text annotations for counts and categories. The bars are positioned manually using numeric calculations rather than a charting library, with axes drawn using p5.js primitives like `line()`, `rect()`, and `text()`.

Feb 14, 2022