simple bar chat with interaction

100%

simple bar chat with interaction

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

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.

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

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

81% match

Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

深深度碎片

81% match

Loading thumbnail…

simple animated bar chat dataset

A simple bar chart built with D3 v4 reads a semicolon-delimited CSV file from the local gist, parsing it with `d3.dsvFormat(';')` and `dsv.parse(raw)`. The SVG rendering creates a 960-by-500 canvas and uses `d3.scaleLinear` for both the x- and y-axes, with the y-domain computed from the maximum value in the dataset. Ten labeled bars (A through J) are positioned using the x-scale, though the chart currently lacks displayed rectangles and only renders the category names as text. The data source is a small `dataset.csv` included with the block.

EEnzoTheBrown

80% match

Loading thumbnail…

D3: Drawing a Bar Chart

This example demonstrates a basic bar chart built with D3 v7 in an SVG container, visualizing an array of 20 numeric values. The bars grow downward from the top of a 500×100 pixel canvas, with each bar’s height proportional to its data value multiplied by 4, and its fill color transitioning from dark to lighter blue based on the data. The chart also overlays each bar with white, 11px sans-serif text labels showing the exact data values, centered horizontally within each bar. The code uses `d3.select` to append SVG elements and the data-join pattern with `.enter()` to create rectangles and text nodes.

MMarisa Tania

80% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

80% match

Loading thumbnail…

simple bar chat dataset

A simple bar chart displays categorical values from a semicolon-delimited CSV dataset, labeling each bar with its name. The visualization uses D3 v4 to load the external dataset.csv file via `d3.text` and parse it with `d3.dsvFormat`, then applies `d3.scaleLinear` for both the x and y axes. Bars are rendered as plain SVG rectangles with black outlines but no fill, positioned using translated groups. The chart intentionally avoids specifying a domain until the data loads, demonstrating dynamic scaling based on the parsed values.

EElisaDnr

80% match