Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
AAshrith Kudidhi
Last edited Jul 7, 2022
Created on Jul 7, 2022
Forked from Hello VizHub

This example visualizes the average price per head at restaurants in Hyderabad, India, using a bar chart rendered as SVG with D3 v4. The chart displays restaurant names on the x-axis and prices on the y-axis, with bars animating into place. Hovering over a bar highlights it in orange and displays its price, using the `d3.select`, `d3.scaleBand`, and `d3.scaleLinear` APIs along with D3 transitions. The data is loaded from a remote CSV file, and the chart includes labeled axes and gridlines.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes the price per head at Hyderabad restaurants using a bar chart, with an animated entrance and interactive highlighting on mouseover. Built with D3 v4 and SVG, bars transition in sequentially, while hovering enlarges a bar and displays its price in rupees. The code uses `d3.scaleBand`, `d3.scaleLinear`, and `transition` for animation, with event handlers `onMouseOver` and `onMouseOut` to toggle highlighting and show tooltip-like text.

AAshrith Kudidhi
92% match
Loading thumbnail…

Untitled

A bar chart displays the price per head of restaurants in Hyderabad, using data loaded via `d3.csv` from a GitHub gist. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering and animated transitions via `transition.attr`. Hovering over a bar triggers a mouseover handler that enlarges the bar, changes its class from `bar` to `highlight`, and appends a dynamic price label, while mouseout restores the original state and removes the label.

SSaahithi49
91% match
Loading thumbnail…

Untitled

This interactive bar chart visualizes XYZ Foods stock prices from 2011 to 2016, with dollar-valued y-axis labels and a traditional bar layout. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and SVG rendering with animation. Hovering over a bar triggers a `mouseover` event that highlights the bar in orange, expands its dimensions, and displays a temporary price label, while `mouseout` reverts these changes. Data is loaded from a local CSV file.

KKrishnaVamsi09
78% match
Loading thumbnail…

Untitled

A bar chart displays XYZ Foods stock prices per year, reading from a CSV file and rendered as SVG. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axes labeled "Year" and "Stock Price." On mouseover, bars highlight in orange via d3.select and animate with a transition, expanding width and shifting position while a dollar-value label appears; mouseout reverses these changes and removes the label. d3.v4 handles the animations and event-driven interactions.

AAbdouEnsaj
76% match
Loading thumbnail…

Untitled

This example shows a bar chart of XYZ Foods stock prices from 2011 to 2020, with pink bars and axes labeled in dollars. It uses D3 v4 (loaded via UNPKG) with SVG rendering, a band scale for years, and a linear scale for values, decorated with axis labels and a title. The code loads data from a CSV file and demonstrates local ES6 module imports.

SSwapna1915
75% match
Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
75% match
Loading thumbnail…

Untitled

This bar chart displays XYZ Foods stock prices from 2011 to 2020, with dollar values on the y-axis and years on the x-axis. It is built with D3 v4, rendering as SVG. The visualization uses `d3.scaleLinear` for the value axis, `d3.scaleBand` for the categorical year axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded from the local `data.csv` file, with bars styled in steelblue via CSS.

SSwapna1915
75% match
Loading thumbnail…

Untitled

This bar chart displays the stock price of XYZ Foods from 2011 to 2016, with values increasing from $45 to $78. The visualization uses D3.js v4’s `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render an SVG with animated bars that grow sequentially. Hovering over a bar triggers a mouseover event that highlights it in orange via the `highlight` class, expands its width and height, and shows a temporary `$value` label. The mouseout event reverts these changes and removes the label. Data comes from a local CSV file.

WW9183907
75% match