fresh block

100%

✓ Published0🌍 Public

Last edited Jun 21, 2018

Created on Jun 20, 2018

A radar-style chart displays three KPI values as points on concentric circular grids, with connecting lines forming a polygon. The visualization includes a header title, value labels along the axes, and a context area at the bottom showing the selected data point's name and value on mouseover. Built with D3 v4, it uses SVG elements including circles, lines, paths, and text, with event handlers for interactive highlighting of data points.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

83% match

Loading thumbnail…

fresh block

This visualization plots five data points from a static array as green or purple circles on an SVG canvas. Each circle’s x and y coordinates equal its data value, creating a diagonal scatter pattern. The code uses d3.select and append to build SVG elements, with the d3.v4 library handling data binding. Colors are set conditionally: values over 100 appear purple, while all others render green. The circle radius is fixed at 5 pixels.

KKunnyKou

82% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

81% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

81% match

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.

KKerchoo

81% match

Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca

81% match

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

KKacieW

80% match

Loading thumbnail…

fresh block

A radial bubble chart shows the relative frequency of 50 data points, where each count is rendered as a red or blue circle. Clicking any bubble increments its count and repositions all circles along a ring, with the selected bubble moving to the center. The visualization uses d3.scaleSqrt and d3.scaleLinear to map count values to circle radius and color, and d3.select transitions animate the position and fill changes over 800 milliseconds. The data is generated randomly with d3.range and Math.random.

MMadelijn

80% match