ctx

100%

✓ Published1🌍 Public

Last edited Nov 26, 2022

Created on Apr 7, 2021

This example visualizes the presence or absence of antibiotic resistance genes across 10 bacterial isolates using a dataset from a CSV file. The visualization displays a circular node-link diagram where green circles represent individual genes or clades, connected by lines to show co-occurrence patterns. The implementation uses D3.js with a force simulation (`d3.forceSimulation`) to position the nodes, while the chart type is defined as a vertical bar-like layout via `cht=v` and `chd=t` parameters, suggesting a Google Charts API formatting. The data is parsed from a tab-separated CSV and rendered in an HTML page with custom styles for circles and text.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Parallel Sets

This visualization shows the presence or absence of various genetic markers, including antibiotic resistance genes, across multiple bacterial isolates. A parallel sets diagram displays the data as interconnected vertical columns representing different genes, with flows between them indicating co-occurrence patterns. The code uses D3.js version 6 to render the visualization as an SVG, reading the dataset from a CSV file. Each isolate is a row in the data, and the diagram reveals how genetic markers cluster together across the sample population, though the README incorrectly references world population data.

Mmanishabehera

72% match

Loading thumbnail…

Untitled

This visualization compares ciprofloxacin MIC values with fluoroquinolone resistance genes across six bacterial isolates using a Google Bubble Chart. The x-axis shows fluoroquinolone-resistant determining factors, the y-axis displays MIC levels in µg/mL, while bubble size encodes MIC value and color distinguishes isolates. The chart uses the Google Charts API's `google.visualization.BubbleChart` with data embedded directly via `arrayToDataTable`. An untitled D3.js script in the same project renders a separate bar chart of population data from a CSV.

Mmanishabehera

70% match

Loading thumbnail…

Untitled

This bubble chart displays the correlation between ciprofloxacin MIC values and the presence of fluoroquinolone-resistant genes, with the x-axis representing resistant determining factors and the y-axis measuring MIC in µg/mL. Each bubble’s size encodes the MIC value, while color distinguishes isolates. The visualization is built using Google Charts’ `google.visualization.BubbleChart` with `arrayToDataTable` to convert hardcoded data from `data.csv`, and includes options for axis titles and bubble text styling.

Mmanishabehera

65% match

Loading thumbnail…

Untitled

A 3D force-directed graph visualizes the evolutionary relationships among bacterial strains, with nodes representing individual isolates and links showing their phylogenetic connections. The tree structure is parsed from a Newick format file (`mlsa.newick`) using a custom `parseNewick` function, then converted into a D3 hierarchy with `d3.hierarchy`. Colors distinguish three major domains of life: blue for Eukarya, red for Bacteria, and yellow for Archaea. The visualization uses the `3d-force-graph` library with Three.js for WebGL rendering, employing `THREE.Mesh` objects for node representation.

JJUNAID

65% match

Loading thumbnail…

ChIP Seq Data Visualization

This example visualizes ChIP-seq data by mapping genes onto their respective chromosomes as animated SVG elements. Each gene node is positioned along a chromosome track, with tooltips or metadata revealing the gene symbol, name, and function. The visualization uses D3 v3’s force-directed layout (via `d3.forceSimulation` or the older `d3.layout.force`) to arrange the nodes, while the rendering relies on SVG and animation. The static dataset is embedded directly in the code, showing gene spacing and interval lengths for chromosome 1.

KKunnyKou

64% match

Loading thumbnail…

Untitled

This example visualizes a dataset from a CSV file using D3.js force simulation, rendering nodes and links in an SVG container. The code loads data.csv and applies d3.forceSimulation with forces for charge, center, and link to position elements. Nodes are drawn as circles with fill colors and labels, while links appear as lines. The visualization updates positions on each simulated tick, demonstrating a standard network graph layout.

TTetizera

63% match

Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83

63% match

Loading thumbnail…

Covid cases with interaction with country

A line chart displays new daily COVID-19 cases for ten countries from a CSV dataset, with each country’s trend as a colored curve. Hovering over a country name in the legend highlights that specific line and fades the others, implemented via React state and `onMouseEnter` handlers. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`), the `d3.line` generator with `curveNatural`, and custom React components for axes and the interactive legend, rendering to SVG.

Mmanasishrotri

63% match