Jverma

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

May 18, 2017

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

May 18, 2017

Canvas Scatterplot

This example shows a scatterplot of 20,000 randomly generated data points, each positioned on a two-dimensional Gaussian distribution. The visualization animates by redrawing the canvas for 300 milliseconds, creating a flickering effect as the points appear. The code uses the Canvas API directly with `getContext('2d')` for rendering, while employing a custom D3 selection abstraction to bind data to circle elements with `d3.range`, `d3.randomNormal`, and `d3.scaleLinear`. The points are drawn as steelblue circles via `context.arc` and `context.fill` within a repeated timer loop using `d3.timer`.

May 18, 2017

India GDP across states

A choropleth map of India displays GDP values for each state, encoded with a light-to-dark orange sequential color scale. The map is rendered as an SVG generated from GeoJSON data, with the projection created using `d3.geoMercator().fitSize()`. The data is processed through a pipeline using `geo2topo`, `topo2geo`, and `ndjson-map`, with color assignment using `d3.scaleThreshold` and the `d3.schemeOrRd` color scheme from `d3-scale-chromatic`. A separate legend SVG shows the GDP thresholds for each color bin. The final visualization presents state-level wealth distribution from the source gist.

Jan 28, 2017

FitBit Sleep data part - I

This visualization overlays seven nights of FitBit heart-rate data as a multi-series line chart, showing minute-by-minute heart-rate fluctuations during sleep from May 18-24, 2016. Each night is a distinct colored line, plotted over time on the x-axis (hours:minutes:seconds) with beats per minute on the y-axis, revealing patterns like elevated heart rates and nightly variation. The code uses the nv.d3 library's `lineChart` model built on d3.v3, loading CSV data via `d3.csv` and parsing times with `d3.time.format` to construct the series for display with interactive guidelines and tooltips.

May 24, 2016

Hive Link Plot

This visualization uses a hive plot to show visa refusal rates between countries, with seven radial axes representing continents. Each node is a country positioned along its continent’s axis by refusal rate, while curved links connect source and target countries, colored by the source continent. Interactive mouseover highlights a specific link and its connected nodes. The code uses d3.hive.link to generate the curved paths, d3.svg? (d3.scale.ordinal and d3.scale.linear) for positioning, and d3.legend for the color legend, with data loaded from a JSON file.

May 21, 2016

Conda environment for TensorFlow

This example shows the setup process for a Conda development environment dedicated to a TensorFlow project. It documents the exact shell commands needed to create and activate the environment, install TensorFlow via the `conda install` command from the `jjhelmus` channel, and later deactivate or remove the environment using `conda remove`. The visualization is a plain-text code listing from a gist, with no graphical rendering or data binding.

Apr 28, 2016

Emoji Timeline for Cultural References in Murakami

A timeline of cultural references in Haruki Murakami's *The Elephant Vanishes* plots each reference as an emoji along a horizontal axis of page numbers. Clicking an emoji reveals the reference’s name in a tooltip. The visualization uses D3 v3 to bind JSON data, with `d3.scale.linear` mapping pages to x-coordinates and `svg` elements for each emoji, which are rendered from a custom emoji map. A summary table counts references by category.

Apr 19, 2016

Clusters

This interactive scatterplot visualizes galaxy data with K-Means clustering, allowing users to switch between original magnitude coordinates, principal component projections, and t-SNE embeddings. The visualization supports dynamic axis selection from five photometric bands, with points colored by cluster membership across different projection methods. Built with d3.v3, the chart uses SVG circles, d3.scale.linear for axes, and d3.svg.axis to render coordinates, with clickable buttons and dropdowns to update the display. Data comes from finalOutput.csv containing astronomical measurements and cluster assignments.

Feb 7, 2016

Understanding PageRank in a network graph

The visualization demonstrates PageRank scoring of sentences in a network graph from an auto-summarization use case. It shows a force-directed graph of sentence nodes built from a Quora answer, where clicking the "Rank Nodes" button animates node radii to reflect LexRank scores. The graph is rendered in SVG with the d3.v3 library, using `d3.layout.force` for layout and `d3.scale.linear` for mapping scores to sizes. Clicking a node displays its sentence text; clicking that text removes it, using the d3 `select` API for interaction.

Jan 30, 2016

HTML inside SVG

This example demonstrates how to embed standard HTML elements inside an SVG canvas using the `foreignObject` API. A red-bordered SVG contains a green-bordered `div` positioned at specified x and y coordinates, while separate HTML `div` elements appear above and below the SVG. The page loads as a standalone `index.html` file with no external libraries, relying purely on native SVG and HTML markup to show that foreign objects can mix rendering contexts within a single graphic.

Jan 22, 2016

Instructions to set up

This example shows a step-by-step guide for setting up a Jekyll blog, from installing required gems to pushing the final build to a GitHub repository. It demonstrates a command-line workflow using `gem install`, `bundle install`, and `bundle exec jekyll build`, with plain-text instructions and code blocks. The visualization relies on a gist authored by Jverma, presenting the setup as a linear sequence of terminal commands and file actions. It does not use any charting or rendering libraries, focusing instead on a textual, procedural format.

Jan 2, 2016

Force Layout

This example visualizes a graph of DNA sequence nodes and their connections, allowing users to toggle between the original graph and a community-detected version using buttons. The force-directed layout positions nodes using `d3.layout.force` with SVG rendering, drawing circles for nodes and lines for links. The two views load separate JSON files (`graph.json` and `community.json`), where the community file includes additional intra-community connections. Node and link styling relies on D3 v3 selections, with the simulation updating positions on each tick event.

Jul 20, 2015

K-means clustering of wine data

This visualization demonstrates the results of K-means clustering on the wine dataset, plotting each sample as a dot based on its Alcohol and Malic attributes, with colors indicating cluster membership. The code uses D3.js v3 to render an SVG scatterplot, employing d3.scale.linear for axes, d3.svg.axis for tick marks, and d3.scale.category20 for coloring clusters. Mouseover events trigger a tooltip showing cluster, Alcohol, and Malic values. Data comes from the clusters.csv file, which includes precomputed cluster assignments.

HighChart - line chart of the tweet sentiment score time series

An interactive line chart visualizes daily average sentiment scores for tweets about a topic, derived from a search API. Each point represents the mean sentiment of tweets collected that day, showing mood fluctuations over time. Built with Vue, the visualization uses Highcharts to render the time series, with tooltips providing detailed values on hover. The data is embedded in the page, and jQuery handles DOM interactions for the chart container.

Sentiment Scores of Tweets

A scatterplot displays sentiment scores for a sequence of tweets, indexed along the x-axis with AFINN-based scores on the y-axis. The visualization reveals that most tweets cluster around a neutral score of zero, with sporadic positive and negative outliers. The chart is built with D3 v3, using SVG circles, linear scales, and axes to map tweet index and sentiment score. Data is loaded from a CSV file containing tweet indices and their corresponding sentiment values.

K-Means clustering of Tweets

This example visualizes the results of K-Means clustering on tweets, grouping them into ten thematic clusters displayed as a circle-packing layout. The visualization shows each cluster as a collection of orange leaf nodes representing individual tweets, with blue parent circles indicating cluster boundaries. Hovering over a node reveals the tweet text in a tooltip. The code uses the D3.js v3 layout `d3.layout.pack` to compute the hierarchical layout and binds data loaded from a tab-separated text file containing tweet text and cluster assignments. The visualization is rendered as SVG with animated transitions.

Hive Link Plot

This visualization uses a hive plot to show relationships among eleven nodes, arranged on three radial axes by node type (0, 1, or 2). A D3 tooltip on mouseover reveals each node’s name and type. The layout is generated with `d3.scale.ordinal` and `d3.scale.linear`, while custom curves link nodes using the `d3.hive.link` API. SVG elements (lines, paths, circles) are animated via D3 transitions.

Jul 13, 2015

Multiple Sequence Aligment

This visualization displays the results of a multiple DNA sequence alignment, showing 17 sequences as a grid of colored cells where each color represents one of four nucleotide bases (A, G, C, T) and gaps appear in white. It uses D3.js v3 to render the alignment as an SVG heatmap-like matrix, with each sequence labeled on the left and a legend showing the base-to-color mapping. The dataset comes from ClustalW2 alignment results, and interactive tooltips appear on hover, displaying the row, column, and base for any selected cell. The implementation binds data to SVG rectangles and uses D3’s enter/exit selections to create the grid.

Jul 13, 2015

Parallel Coordinates visualization of Cosmological parameters

This parallel coordinates visualization displays 38 cosmological models, each characterized by six parameters: Hubble constant, matter density, baryon density, normalization of power spectrum, spectral index, and dark energy. The SVG rendering uses D3.js version 3.5.5, with `d3.svg.axis` and `d3.svg.line` to draw the axes and polylines. Each parameter gets its own vertical axis with linear scales via `d3.scale.linear`. Interactive brushing, implemented through `d3.svg.brush`, lets viewers filter models by dragging along any axis, dynamically hiding foreground lines that fall outside selected ranges. Data comes from the included cosmologies.csv file.

Jul 9, 2015

deBruijn graph from DNA sequence reads

A de Bruijn graph constructed from a segment of DNA sequence shows how 5-mer overlaps connect 4-mer subsequences into a network. The animation renders nodes and edges dynamically, illustrating genome assembly concepts. Built with the NetworkxD3 package, the visualization uses d3.forceSimulation to position nodes and animate the graph structure.

Jul 8, 2015

First Leaflet

This interactive map shows the coffee shops in New York City that the author has visited, with pop-ups displaying each shop’s name and a short personal review or anecdote. Built with Leaflet.js, the map uses OpenStreetMap tile layers and places eight markers at geographic coordinates obtained from the Mondeca Any-Place geocoding service. Each marker binds a popup containing HTML text, and the initial view centers on Manhattan at a zoom level of 12.

Jul 7, 2015

Sankey plot of my python packages

A Sankey diagram visualizes the dependencies of the author's Python repositories, mapping the flow from standard and third-party modules like `sys`, `os`, `numpy`, and `matplotlib` to projects such as InfoR, TextGraphics, and fastAQ. Built with D3.js v3, the SVG rendering uses the custom `d3.sankey` function to compute node layouts and link paths. Data is loaded from a JSON file, and interactive node dragging triggers a relayout, updating the curved link paths via the `link()` function.

Jul 6, 2015

Missing Values in the Titanic data

This heatmap visualizes missing values in the Titanic dataset, with each cell representing a data point and white cells indicating absent entries. It uses d3.csv to load the data and renders SVG rectangles, with steelblue for present values. A tooltip appears on mouseover to show the column name and value. The data comes from the Kaggle competition website.

Heatmap of mtcars dataset

This heatmap visualizes the classic mtcars dataset, showing the relationship between car models and their attributes such as mpg, horsepower, and weight. Each cell is color-coded using d3.scale.category10 based on the raw value from the CSV data, with a tooltip revealing the specific car, property, and value on mouseover. The chart is built with D3 v3, using SVG rectangles positioned via a grid, and includes a brief animation for tooltip opacity transitions. The x-axis represents cars, the y-axis represents properties, and the legend is intended to display a color scale, though the color scale is not fully implemented.

NVD3

This example demonstrates an interactive multi-bar chart built with the NVD3 library, rendered through Vue.js and rCharts. The visualization uses SVG with animation to display categorical data across grouped bars, featuring hover effects that change bar opacity and display tooltips with detailed values. The chart includes standard NVD3 components such as axes, legend, and brush functionality, all styled through the included CSS. The base64-encoded stylesheet defines the visual appearance, including tooltip formatting, bar coloring, and SVG element styling. The implementation leverages NVD3's built-in chart types for grouped bar displays, with the rCharts wrapper providing the R-to-JavaScript bridge.

Scatterplot - II

An interactive scatter plot displays the classic Iris dataset, with each point colored by species to reveal clustering patterns. Built with Vue, the visualization uses D3.js for data binding and SVG rendering, allowing users to hover over points to see detailed measurements. The plot maps sepal and petal dimensions across axes, highlighting the clear separation between setosa and the overlapping versicolor and virginica groups.

Scatterplot of iris data with tooltip

A scatterplot visualizes the classic Iris dataset, plotting sepal width against sepal length for three iris species, colored using `d3.scale.category10()` and a legend. Hovering over a circle triggers a tooltip displaying the species and exact measurements. The visualization uses D3 v3 to create SVG axes and circles, with `d3.svg.axis`, linear scales, and mouseover/mouseout events to control tooltip opacity and position based on the mouse event.

Tree Example

This interactive tree diagram visualizes genome annotations from a GFF file, showing the hierarchical relationship between chromosomes, genes, transcripts, and coding sequences (CDS). The visualization uses d3.layout.tree and d3.svg.diagonal to draw the SVG structure, with nodes that collapse and expand on click. Hovering over a node reveals a tooltip displaying the feature type and its genomic start and end positions. The data is loaded from a CSV file containing parent-child relationships derived from the genome feature data.

Jul 4, 2015

Bar chart from external JSON file

This bar chart displays the frequency of each letter of the alphabet, using data loaded from an external JSON file. The visualization uses D3 v3 to create an SVG, with an ordinal x-axis for letters and a linear y-axis for frequency values. The bars are rendered as rectangles with a steelblue fill that turns brown on hover. The chart includes rotated x-axis labels and a y-axis labeled "Frequency," with data explicitly parsed from the JSON structure before scaling and rendering.

Jul 3, 2015

Networkx graphs in D3

This example shows animated network graphs rendered in the browser. It uses D3’s `forceSimulation` to layout nodes and links, with SVG elements for visualization. The HTML embeds a pre-generated JavaScript payload from the NetworkxD3 Python interface, which converts Networkx graph structures into an interactive D3 widget. The animation is driven by the force simulation’s tick events, continuously updating node positions. The code relies on HTMLWidgets to initialize the visualization, and the graph data is provided inline from the Python-generated output.

Jul 2, 2015