Click to show TOC

Using doPlot.try

Using a bar chart to display the populations of European capitals, with each bar representing a city. You can label each bar with the city name, and display the country name when hovering over each bar.

 
 
     

Explanation

  1. City Data Array:
  • The cityData array contains objects for each city, including the city name, population, and country name.
  1. Extracting Data for Plotting:
  • Arrays for cities, populations, and countries are created by mapping over the cityData array.
  1. Bar Chart Definition:
  • The trace object defines a bar chart with city names on the x-axis and populations on the y-axis.
  • The text property is used to define the hover text (country names) for each bar.
  • The hoverinfo property is set to 'text' to display only the country name when hovering.
  1. Layout:
  • The layout object includes titles for both axes and formats the y-axis ticks with commas.
  1. Creating the Plot:
  • The newPlot function creates the bar chart in the div with the ID populationBarChart.

Create a div to hold the chart

The html element to draw the chart looks like the element below:

<div id="populationBarChart" style="width: 100%; max-width: 800px; height: 500px;"></div>

 
 
     

Result

You will see a bar chart where each bar represents a European capital. Each bar is labeled with the city name, and when you hover over a bar, the name of the country will be displayed.

This bar chart effectively visualizes the population distribution across European capitals, with added interactivity through the hover functionality.




Page - 1