Kerchoo

@Kerchoo·8 public vizzes

Question 2

This example displays the Italian national flag as three vertical rectangles in green, white, and red. The code uses raw D3 v4 selection and append operations to create the fixed shapes, with hardcoded attributes for color, size, and position. Unlike a typical data-driven chart, it directly assigns fill, width, height, x, and y values to each rectangle rather than mapping from a dataset. The rectangles are appended to an SVG selection, demonstrating a simple static graphic without interaction or animation.

May 2, 2017

Loading thumbnail…

Question 3

This example shows a minimal, non-functional web page. The body contains a JavaScript snippet that defines a function called `calculateGC` and attempts to calculate a GC content value, but the code is incomplete and never executes any visualization. No data is loaded or rendered, and no graphics are produced. The page includes the D3.js v4 library via a script tag, and the styling sets the body to fill the viewport, but there is no visible output. The work appears to be the starting point for a bioinformatics-related visualization that is not yet implemented.

May 2, 2017

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

Mar 21, 2017

Loading thumbnail…

geojson

This example combines Leaflet via Mapbox with d3 to render a set of points from a GeoJSON file as dots on an interactive map. The eboladata.json file contains geographic coordinates for locations in multiple countries, including Guinea and the Democratic Republic of the Congo. The visualization uses Mapbox’s street tiles as the base layer, while d3 appends an SVG overlay onto Leaflet’s map panes. The code reprojects the GeoJSON points into pixel coordinates on zoom or pan, repositioning the SVG group accordingly to keep the dots aligned with the map.

Feb 23, 2017

Loading thumbnail…

dots on a map: setup

A Leaflet map displays a set of circular dots, each colored teal with a darker stroke, positioned over a street map of London. The visualization is built by combining the Leaflet mapping library with D3.js, which manages the SVG layer and handles data binding from a CSV file containing latitude and longitude coordinates. The dots animate their radius from 1 to 6 pixels via a D3 transition. On map pan or zoom, the projection and positions are recalculated and re-rendered, keeping the dots aligned with the geographic locations.

Feb 23, 2017

Loading thumbnail…

[building-blocks](http://github.com/enjalot/building-blocks)

A bookmarklet that redirects any bl.ocks.org or gist.github.com URL to the corresponding page on blockbuilder.org. The page displays a draggable link, which users add to their bookmark bar. It uses JavaScript string replacement via `window.location` and `String.replace` to rewrite the URL, requiring no external libraries beyond the included D3 3.5.5 script, though the code does not rely on D3 for its core functionality.

Feb 23, 2017

Loading thumbnail…

simple genome map

A simple genome map displays four genes as colored horizontal bars along a linear chromosome. Green bars represent forward-oriented genes, red bars represent reverse-oriented genes, with each bar’s length corresponding to its start and stop coordinates from a local `data.json` file. The visualization uses D3 v4’s data join (`d3.json`, `selectAll`, `enter`) to append SVG groups positioned via `translate` transforms. Genes are manually offset vertically by orientation, with blue strokes outlining each bar.

Feb 21, 2017

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

Jan 31, 2017