simple bar chat with interaction

100%

simple bar chat with interaction

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

A simple bar chart displays ten numeric values as white rectangles with black outlines on an SVG canvas, with corresponding monospace labels above each bar. Hovering over a bar turns it red and enlarges its label, while moving the mouse away triggers a 500-millisecond transition back to the original colors and font sizes. The visualization uses d3.v4 with linear scales for positioning, and handles interactivity through `selection.on("mouseover")` and `selection.on("mouseout")` methods.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/c607174fc6fd5c7bfaa804d46ca70eab'>simple bar chat with interaction</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple bar chat with interaction

A simple bar chart displays ten numeric values as black-outlined white rectangles, with each bar’s value labeled above it. On mouseover, the hovered bar turns red and its label enlarges; on mouseout, the bar smoothly transitions to green and the label shrinks. The chart is built with d3.v4, using `d3.scaleLinear` for positioning and `d3.line` to draw an overlaid path. SVG elements handle rendering, while `transition().duration(500)` animates the color and font-size changes.

EEssohanamKouyou

94% match

Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr

94% match

Loading thumbnail…

simple bar chat dataset

Ten bars labeled A through J display values loaded from a semicolon-delimited CSV via `d3.dsvFormat`, with y-axis scaling based on the maximum value. Animated updates occur every 500 milliseconds, randomizing values and transitioning bar heights and positions using `.transition().duration(500)` with staggered delays. The SVG bar chart uses linear scales for both axes and renders with black-outlined, unfilled rectangles.

TTanguideCrevoisier

86% match

Loading thumbnail…

simple bar chat updates

A simple bar chart displays ten labeled categories from a semicolon-delimited CSV dataset, with values periodically updated. The chart uses D3 v4 scales, entering text labels and rectangles into an SVG, then re-scaling the y-domain to the maximum value before applying a transition to the rectangle heights and positions. Rectangles are styled with black strokes and no fill, and the update cycle runs every 500 milliseconds using `setInterval`, demonstrating dynamic data binding and smooth transitions.

SSebDelSab

85% match

Loading thumbnail…

simple bar chat dataset

A simple bar chart displays ten categorical values from a semicolon-delimited CSV file. The SVG rendering uses D3 v4 scales, with a linear x-scale mapping index positions and a linear y-scale for value heights. Bars are drawn as empty rectangles with black strokes, while monospace text labels appear above the bars. The data is loaded asynchronously via `d3.text` and parsed with `d3.dsvFormat` before the domain is set.

SStephenMaturrin

84% match

Loading thumbnail…

simple bar chat dataset

A simple bar chart displays a static dataset of eleven named values, rendered as outlined rectangles with monospaced labels below each bar. The visualization loads a semicolon-delimited CSV file containing name-value pairs and maps the values to bar heights using linear scales. Built with D3 v4, the code parses the dataset with `d3.dsvFormat`, computes the maximum value to set the y-domain, and appends SVG `text` and `rect` elements to the document body. The bars are positioned with translated groups, and both axes are implicit rather than explicitly drawn.

EElisaDnr

84% match

Loading thumbnail…

Simple Bar Chart

This simple bar chart displays nine data values as vertical green bars on an SVG canvas. Each bar responds to mouseover and mouseout events, smoothly transitioning its fill color to blue and back to green using D3 transitions. The visualization is built entirely with D3 v7 APIs, including `scaleBand`, `scaleLinear`, `selectAll`, and `join` to bind data and render rectangles. Axes are omitted, keeping the chart focused on the raw data values, which are also exposed as tooltips via appended `title` elements.

PPeter Cordone

83% match

Loading thumbnail…

simple bar chat dataset

A simple bar chart visualizes a small dataset of eleven named values, loaded from a semicolon-delimited CSV file. The chart displays each category label as text above its corresponding rectangle, with bar heights proportional to the numeric values. The code uses D3 v4 to parse the data with `d3.dsvFormat`, creates linear scales with `d3.scaleLinear`, and appends both `text` and `rect` elements to an SVG. The axes and scales are set after the CSV loads, while the bars themselves are positioned using the value accessor and index-based x-coordinates.

SSebDelSab

82% match