Tell us what works and what could be better. We read every submission.
@ahmohamed·9 public vizzes
A reusable table component built with D3 and jQuery DataTables displays gene expression data with columns for GeneID, LogFC, AvgExpr, Log2Sigma, color, symbol, p-value, and x/y coordinates. The component is implemented as a closure with setters and getters, allowing it to be configured without hardcoding data-specific attributes. A dispatcher broadcasts `highlight` and `select` events triggered by table interactions, and a listening div updates its text content in response. This modular design keeps the table decoupled from the data structure while enabling responsive behavior through event-driven communication.
This example demonstrates a static, full client-side rendering of an NMR spectrum using SpecdrawJS, showing a SampleSet of spectral data without user interactivity. The visualization is created by initializing a SpecdrawJS app with a single configuration, loading data from a remote JCAMP-DX file (indometacin/1h.dx) via the `.data()` method, and then rendering it into a container div using `d3.select().call()`. The code relies on D3 v3 and the SpecdrawJS library, which handles the spectral plotting entirely in the browser.
This example shows a one-dimensional nuclear magnetic resonance (NMR) spectrum displayed as a line chart, using the SpecdrawJS library in full client-side mode. The application fetches sample set data from a remote NMRPro server URL and renders it inside a fixed-size container. The code loads d3.v3 and SpecdrawJS from a CDN, then creates a `specdraw.App` instance, passes the data URL via its `.data()` method, and binds the app to the DOM element using `d3.select(...).call(...)`. The visualization is styled with a custom CSS rule for the container.
This interactive visualization displays a two-dimensional HSQC spectrum from the BMSE000139 entry, rendered through SpecdrawJS in its full client-side mode. The application loads spectral data from the NMRPro server and visualizes peak intensities using D3.js for rendering and interaction. Users can zoom along the z-axis with the mouse wheel to intensify peaks, while the SpecdrawJS library manages the spectrum display within a 960-by-500-pixel container. The example demonstrates SpecdrawJS’s application programming interface, configured via `specdraw.App().config(2)` and bound to the container using D3’s selection and call methods.
SpecdrawJS renders a proton NMR spectrum of indomethacin directly in the browser from a JCAMP-DX file fetched via a URL. The interactive visualization displays the spectral trace with zooming and panning controls, enabling users to explore peak positions and intensities. The code initializes a `specdraw.App()` instance, binds it to the `#container` div, and loads the data from `rawgit.com` using d3.v3. Styling relies on `specdraw.min.css`, while the underlying data processing is handled entirely client-side by the SpecdrawJS library.
A moving circle travels along a closed cardinal-interpolated path defined by seven fixed points, changing color to red when it overlaps any of those points and returning to steel blue when it clears them. The visualization adapts Mike Bostock’s point-along-path interpolation example, using a D3 v3 transition with a custom tween function that calls `getPointAtLength` on the SVG path element to update the circle’s position. Collision detection compares axis-aligned bounding boxes of the moving and stationary circles via their `transform` attributes, applying the fill style directly within the tween.
A D3.js v3 example remaps the mouse wheel to pan a scatterplot of 2,000 normally distributed points instead of zooming. The visualization renders circles as SVG elements inside a group that responds to wheel events. The code uses `d3.behavior.zoom` for the initial zoom setup, then overrides the `wheel.zoom` event with a custom `pan` function. This function reads `d3.event.wheelDeltaX` and `wheelDeltaY`, adds them to the current translation from `d3.transform`, and updates the group’s `transform` attribute, while stopping propagation to prevent default zoom behavior.
This example demonstrates a minimal WebSocket server implemented in Python, showing how to establish a handshake and exchange framed messages. It uses `SocketServer.StreamRequestHandler` for the network layer, manually performs the WebSocket handshake via `sha1` and `b64encode` against the defined magic string, and parses incoming frames by XOR-masking payload bytes. The code handles payload lengths up to 64-bit values and sends text frames with a 129 opcode. It prints received messages to the console, illustrating the core protocol mechanics without any visualization or data rendering.
This example demonstrates peak detection on a synthetic signal composed of multiple sine waves with added Gaussian noise, plotting the original waveform and identifying local maxima and minima. The code generates the test data using NumPy’s `linspace` and `random.randn`, then applies a custom `peakdetect` function adapted from a MATLAB script. It also includes a parabola-fitting routine via `scipy.optimize.curve_fit` to refine peak positions and amplitudes, and visualizes results with `pylab`. The plot shows both the raw noisy signal and the detected peaks over the x-axis range.