KunnyKou

@KunnyKou·9 public vizzes

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.

Apr 19, 2017

Loading thumbnail…

fresh block

Three vertical rectangles form a simplified French flag on an off-white background. The blue, white, and red bars are each 100 pixels wide and 200 pixels tall, positioned side by side in an SVG canvas. The code uses D3 v4 to select the body, append an SVG container, and create each rectangle with explicit `x`, `y`, `width`, `height`, and `fill` attributes. No data is loaded; the visualization is purely static, demonstrating basic SVG shape construction with D3 selections.

Mar 16, 2017

Loading thumbnail…

ebola cases

An interactive map plots reported Ebola cases as animated dots across Western Africa and beyond, using real-world geographic coordinates from a GeoJSON dataset. The visualization combines Leaflet with Mapbox for the base map and D3.js for the dynamic overlay, placing each case as a circle that expands on load. Users can toggle visibility by country using checkboxes, while the map supports zooming and panning with the dots repositioning in sync via D3's projection logic.

Mar 13, 2017

Loading thumbnail…

ebola cases

This interactive map plots Ebola cases as cyan dots over satellite imagery, with each dot representing a reported location across multiple countries, including Guinea, the Democratic Republic of the Congo, Spain, and the United States. The visualization combines D3.js with Mapbox’s Leaflet library, using a custom SVG overlay that projects geographic coordinates into pixel positions via `map.latLngToLayerPoint`. Dots animate from a small radius to a larger size, and the map re-renders positions on zoom or pan events. The data comes from a GeoJSON FeatureCollection containing point geometries with country and address attributes.

Feb 23, 2017

Loading thumbnail…

Simple Genome Map

This genome map visualizes four genes along a linear sequence, with forward-oriented genes shown in green and reverse-oriented genes in red. The SVG rendering uses D3 v4’s `select`, `append`, and `transition` APIs to animate each gene’s position from off-screen to its mapped start coordinate over one second, with delays proportional to the gene’s start value. Gene names are overlaid using `d3.text`, and dimensions come from the `data.json` file.

Feb 23, 2017

Loading thumbnail…

fresh block

This visualization plots five data points from a static array as green or purple circles on an SVG canvas. Each circle’s x and y coordinates equal its data value, creating a diagonal scatter pattern. The code uses d3.select and append to build SVG elements, with the d3.v4 library handling data binding. Colors are set conditionally: values over 100 appear purple, while all others render green. The circle radius is fixed at 5 pixels.

Jan 31, 2017

Loading thumbnail…

1/31/17 class 2

This example displays a hardcoded array of four values—three numbers and the string "hi"—as paragraphs on a blank page. Using D3 v4, the script selects the body element, binds the data with the `data()` operator, and appends a `<p>` element for each entry via the `enter()` selection. The text content of each paragraph is set through `.text()`, which receives the current datum value. It is a minimal demonstration of the data join pattern and DOM manipulation with D3, based on a Blockbuilder starter template.

Jan 31, 2017

Loading thumbnail…

1/31/17 class

This visualization from the 1/31/17 class shows a simple SVG scene with the text "Hello there" and three colored circles (green, purple, blue) positioned diagonally across a 960×500 canvas. Built with D3 v4, the code uses `d3.select` to append SVG elements directly to the body, setting attributes like `cx`, `cy`, and `r` for each shape. Styling is applied via `.style` for font properties and `.attr` for circle fills. The example demonstrates basic D3 selection and element creation without any data binding or interaction.

Jan 31, 2017

Loading thumbnail…

Simple Example

This example visualizes the magnitude of changes in database object counts, such as Fields and Tables, using horizontal bars that extend either above or below a central baseline. Green bars indicate positive changes, while red bars represent negative changes, with bar height proportional to the absolute value of the change. The chart is built with D3 version 2 and relies on the underscore.js library for data transformation, using D3’s linear scale to map change magnitudes to pixel heights. A tooltip displays the item name and its signed change value on mouseover, while the bars are positioned absolutely within a relative container based on the sign of the change.

May 2, 2012