Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aaaronbalthaser
Last edited Nov 14, 2017
Created on Nov 14, 2017

A simple two-panel chart divides a 400-by-600 pixel SVG into equal light-blue rectangles with green outlines. The left and right panels share a linear Y-axis scaled from 0 to 100, while the bottom X-axis uses d3.scaleTime spanning a three-hour window on January 1, 2016. Both axes are rendered with d3.axisLeft and d3.axisBottom, with the time axis displaying five ticks. The chart is built with D3 v4 and drawn entirely as SVG elements, with no underlying data or interactive behavior.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A single SVG chart displays two equally sized vertical rectangles, each filled with light blue and outlined in green, positioned side by side within a bordered container. The visualization demonstrates basic SVG shape creation and layout using D3 v4, where the rectangles are appended to a grouped SVG element with fixed dimensions. The code explicitly sets the width and height for the first rectangle, then positions the second rectangle at an x-offset equal to half the available width. The chart is rendered entirely through D3's selection and append methods, with no data binding or interaction.

Aaaronbalthaser
88% match
Loading thumbnail…

fresh block

This visualization displays a simple horizontal axis with five tick marks, mapping values from 0 to 1000 across a 500-pixel SVG canvas. The code builds the axis using D3 v4 APIs, including `d3.scale.linear` for value interpolation and `d3.svg.axis` for rendering, with the axis oriented at the bottom and translated into position. The SVG is appended directly to the page body, with fixed margins and an offset to place the axis cleanly. The rendering approach relies solely on SVG elements and demonstrates basic axis construction without additional data or interaction.

XXetelar
86% match
Loading thumbnail…

fresh block

A stylized area chart displays layered time-series data using a silhouette offset to show relative values across categories. The visualization uses D3 v2 with SVG rendering and cardinal interpolation to create smooth, overlapping curves in an orange color palette. Users can hover over any layer to highlight it while dimming others, with a tooltip revealing the specific category name and value at the cursor position. The chart loads data from an external CSV file and includes both left and right y-axes with a weekly time scale on the x-axis.

PPardhu448
85% match
Loading thumbnail…

fresh block

A simple D3.js example displays a time-scale x-axis spanning from September 2012 to January 2013, with major ticks every 14 days formatted using a custom multi-level time format (`d3.time.format.multi`). The code sets a large top and bottom margin (250 pixels) to center the axis vertically within the SVG canvas. It renders a single SVG group containing the axis via `d3.svg.axis()`, with tick labels suppressed by the custom format function. The visualization demonstrates basic axis configuration and custom tick formatting without any underlying data or interactive behavior.

AA6Brgeuka
85% match
Loading thumbnail…

fresh block

A simple bar chart displays six hardcoded values as blue vertical bars on a 900 by 900 SVG canvas. Each bar’s height corresponds to its data value, while the `x` position is determined by an index multiplied by a fixed width. The visualization uses D3 v4’s selection and attribute methods to append rectangles and set their positions, dimensions, fill, and stroke. The data set is a static array, not loaded from an external source.

MMcZieuwa
85% match
Loading thumbnail…

fresh block

A set of five vertical blue bars of varying heights represents the values [100, 250, 175, 200, 20], with the tallest bar (250) highlighted in red. The SVG chart is generated using D3 v4’s selection API, first selecting the root `<svg>` element and then appending `<rect>` elements for each data point. Each rectangle’s x-position is calculated by multiplying its index by a fixed `rectWidth` of 50, while its y and height properties are derived from the data value and a constant chart height of 300. The code explicitly defines a fill color based on whether a value equals 250, demonstrating conditional styling within D3’s attribute callbacks.

SSimonS
84% match
Loading thumbnail…

fresh block

A set of vertical bars displays a small numeric array, with bar heights proportional to values and fill colors interpolating from red to green based on each value’s position in the data range. The visualization uses d3.scaleLinear for the y-axis and color mapping, d3.scaleBand for horizontal positioning, and d3.schemeCategory20 as a fallback palette. Each rectangle is appended to an SVG canvas, with blue strokes outlining the bars. The code computes bar positions and heights directly from the scales, rendering the chart entirely with D3 v4.

TTollyCoburn
84% match
Loading thumbnail…

fresh block

A set of vertical bars represents five data values, with one bar highlighted in red and the rest in blue, showing a clear visual contrast for the largest value. The chart uses D3 v4 to bind an array of numbers to SVG rectangles, scaling bar heights linearly from a maximum domain of 2500 down to zero. The code applies the scale to position each rectangle’s top and height, while a fixed bar width and white stroke separate the bars for readability.

44xDMG
84% match