fresh block

100%

✓ Published0🌍 Public

Last edited May 3, 2018

Created on May 3, 2018

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization displays the daily market share of web browsers over a three-month period using a stacked area chart. The chart encodes each browser as a colored layer, with the y-axis showing percentage of total usage and the x-axis showing time. Built with D3 v4, it uses `d3.stack()` to stack the data series, `d3.area()` to construct the path geometries, and `d3.scaleTime()` and `d3.scaleLinear()` for the axes. The data is loaded from a TSV file, and category labels are positioned at the right edge of the chart for the larger share layers.

AAsilve00

86% match

Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

BBrunoDumas

84% match

Loading thumbnail…

fresh block

The example shows a small multiples-style area chart of daily time-use activity patterns, with each activity category mapped to a colored area over a 24-hour period. The visualization initializes with a static sine-wave dataset and a separate 24-point time-series array, but the main focus is the placeholder area chart and its axes, which are scaled to date and value domains. The code uses D3.js (v3.5.5) to append an SVG, draw a rectangle border, and render text, while attempting to load time-use CSV data via `d3.text` and `d3.csv.parseRows`. The area generator (`d3.svg.area`) is defined but not yet bound to visible data, leaving the chart incomplete and non-interactive in its current state.

BBenHeubl

83% match

Loading thumbnail…

fresh block

A stacked bar chart shows three horizontal rectangles in teal and gold, arranged vertically, with a black central triangle and a white polygon outline at the upper left. The chart renders fixed SVG shapes directly, using `d3.select` and `svg.append` to construct the scene. The bars, with widths of 270 pixels and heights of 50, sit at y-coordinates 200, 250, and 300, while the triangle connects points from (150,350) to (275,275) and (150,200). The visualization uses D3 v4 and plain SVG attributes, with no data file or interaction.

HHeywhoyou22

83% match

Loading thumbnail…

fresh block

This example shows a simple time-series line chart of numeric values plotted against monthly dates. The visualization uses an SVG-rendered line and includes text labels for each date along the x-axis and the final value displayed prominently to the right. The code relies on D3 v4’s `d3.line` for the path generation, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.timeParse` to convert date strings. Data is loaded from an external `dataset.json` file, with the y-domain fixed from zero to the maximum value.

BBkilian971

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

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

This example shows a simple time series line chart of monthly values, with each data point’s date label displayed beneath the line and the final value annotated at the end of the curve. The chart uses a D3 v4 SVG rendering with a time-scaled x-axis and a linear y-axis, both defined via `d3.scaleTime` and `d3.scaleLinear`. The line is drawn using `d3.line` and appended as a path, while text elements are bound to the data for labels and the last value. Data is loaded from `dataset.json` and pre-processed with a time parser (`d3.timeParse`) and number formatting.

BBkilian971

82% match