fresh block

100%

✓ Published0🌍 Public

Last edited Apr 7, 2018

Created on Apr 7, 2018

This example combines a bar chart and a line chart, each rendered in its own SVG element, to visualize two datasets side by side. The bar chart displays the frequency of letters in the English language (loaded from `bardata.tsv`), using steelblue bars that turn brown on hover, with an x-axis for letters and a y-axis for frequency. The line chart shows stock price over time (from `linedata.tsv`), using a steelblue line with round joins and a clean axis without a domain line. Both charts are built with D3 v4, use SVG, and share a minimal, uncluttered aesthetic with axis labels and hover interactions on the bars.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

GGerardoFurtado

100% match

Loading thumbnail…

fresh block

A bar chart displays the frequency of each letter in the English alphabet, with steelblue bars that turn brown on hover. The chart uses D3 v4’s `d3.scaleBand` and `d3.scaleLinear` to map letters and frequencies, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data comes from a tab-separated `data.tsv` file, and the visualization is drawn as SVG inside a viewBox.

KKacieW

83% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

82% match

Loading thumbnail…

fresh block

A small SVG bar chart displays three horizontal stacked bars for consecutive months, with two colored series per month. The chart uses a custom d3.layout.stack() transform to compute stacked sums, then maps each bar’s width to its value and positions groups via d3.scale.ordinal() and rangeRoundBands. A yellow legend panel lists series names with color swatches, and hovering a segment updates a tooltip via d3.select() and d3.classed(). Data is hardcoded as JavaScript arrays in the block.

GGoomble

82% match

Loading thumbnail…

fresh block

A simple SVG bar chart displays three static vertical bars and the text “Texto planito, pero SVG!” in Spanish. The page uses D3 v4 to append a fourth rectangle via `d3.select('svg').append('rect')`, setting its position and size with `.attr()`. The chart is rendered directly in the browser from hardcoded coordinates, with no data file or external dataset. The color scheme—magenta text on a teal background—highlights the contrast between the pre-authored SVG elements and the dynamically added one.

EEd190

81% 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

81% match

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

81% match

Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1

81% match