fresh block

100%

✓ Published0🌍 Public

Last edited Feb 16, 2017

Created on Feb 16, 2017

This visualization displays a set of genomic intervals as green rectangles along a linear x-axis, with each rectangle’s width corresponding to the difference between its start and stop coordinates from a small JSON data file. The rectangles are all positioned at the same y-coordinate and height, indicating that only horizontal position and length carry meaning. The code loads data via `d3.json`, appends a 960×500 SVG canvas, and uses `d3.select("svg").selectAll("rect")` to bind the dataset to rectangle elements, setting their x, width, and fill properties based on the data fields.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes a small set of six rectangles, each positioned and sized by explicit x/y coordinates and width/height values, with colors assigned individually. It shows the spatial arrangement of these shapes on an SVG canvas, computed by finding the maximum extents of all rectangles to set the canvas size. The code uses D3 v3 to bind the JSON data to `rect` elements, setting position and size attributes, while also appending a canvas element to the body. The data source is inline in the script, and the rendering relies on standard SVG attributes.

IIgathi

82% match

Loading thumbnail…

fresh block

This visualization presents a simple genome browser, displaying four genes as colored rectangles positioned along a horizontal chromosome. Each gene’s sequence and a descriptive function label appear near its corresponding block, with forward-direction genes in green on the top row and reverse-direction genes in red below. Using d3.v4, the SVG elements animate in sequence with staggered transitions, applying `transition.delay` and `transition.duration` to sequentially reveal each rectangle and text. The data is hardcoded in the script, and the layout derives from each gene’s start position and sequence length.

HHeywhoyou22

82% match

Loading thumbnail…

fresh block

Three green rectangles of varying heights stand in a row on a blank SVG canvas, each bar’s x-position and height mapping directly to the same numeric value from a hardcoded three-element array. The visualization uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `rect` elements, setting their `width` to a fixed 25 pixels while deriving `height` and `x` from each datum. The SVG container is created via `d3.select("body").append("svg")`, with the chart’s simplistic styling and minimal layout emphasizing the direct translation of data values into geometric properties.

HHadiem

81% match

Loading thumbnail…

fresh block

A grid of four square rectangles is drawn on an SVG canvas, each positioned along the x-axis with identical y-values, and colored with a cool-tone gradient that shifts based on each square's x-coordinate. The visualization uses d3.v4 and the data-binding pattern `selectAll().data().enter().append()` to create the shapes. The x- and y-positions are mapped through `d3.scaleLinear` domains, while a `d3.scaleSequential` with `d3.interpolateCool` determines the fill color. The static dataset is hardcoded in the script, and margins are applied via a translated SVG group.

RRobertDelgado

81% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

81% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

81% match

Loading thumbnail…

fresh block test

This example visualizes six colored rectangles positioned on an SVG canvas, with each rectangle’s dimensions and color defined by an array of JSON objects. It first calculates the maximum bounding box dimensions from the data using a for loop, then sets the SVG’s size accordingly. The code uses D3 v4’s selection and data binding methods (`d3.select`, `.data`, `.enter`) to append and style the rectangles via `.attr` and `.style` calls. The visualization highlights a simple approach to mapping raw data to geometric primitives, with the source data embedded directly in the script and rendering done entirely through SVG.

IIgathi

80% match

Loading thumbnail…

fresh block

A simple bar chart displays seven static blue rectangles on an SVG canvas, with each bar’s height proportional to a value in a hardcoded JavaScript array. The bars are positioned horizontally using a fixed width of 50 pixels per bar and aligned to a baseline of 300 pixels from the top. The visualization uses D3 v4’s selection and data-join methods (`selectAll`, `data`, `enter`, `append`) to create the rectangles, setting their `x`, `y`, `width`, `height`, `fill`, and `stroke` attributes directly. No axes, labels, or interactions are included; the chart just shows the raw data values as basic shapes.

MMasonLyons

80% match