Reusable Bar Chart
This reusable bar chart visualizes CO2 emissions across 24 countries, using D3.js v3 with SVG and animated transitions. The chart's modular design allows customizable margins, dimensions, scales, and tick formatting through accessor functions and configurable domains. Data is loaded from a CSV file, with countries on the x-axis and emission values mapped to the y-axis. Bars animate in on load and update smoothly when data changes, with exit transitions shrinking bars to zero height. The y-axis gridlines extend across the plot area, and x-axis labels are rotated -45 degrees for readability. The implementation exposes a configurable API (margin, width, height, padding, duration, tickFormat, x/y value accessors, and domains), making it a reusable component suitable for embedding in different projects. Rendered in SVG with D3 v3, this example demonstrates a clean, responsive bar chart for comparing CO2 emissions across countries.# Reusable Bar Chart
This example demonstrates a reusable, configurable bar chart component built with D3.js v3. The visualization displays CO2 emissions per capita across 24 countries, with each bar rendered as an SVG rectangle. The chart is fully customizable through its getter/setter API, allowing users to modify margins, dimensions, padding, animation duration, tick formatting, and data accessor functions.
Key features include animated bar entrances and transitions, ordinal x-axis with rotated labels, a gridlined y-axis, and a smooth update pattern. The implementation showcases D3's data join and the reusable chart pattern, where the chart function can be applied to different datasets and configurations. The bars animate from the bottom on load and transition smoothly when data changes, and gridlines run horizontally across the plot area.
The example uses the "Reusable Bar Chart" pattern by Mike Bostock. The code is structured to be easily customizable—users can change the data mapping with .x() and .y() methods, adjust scales with .xDomain() and .yDomain(), and control dimensions via margin, width, and height settings. The chart displays data from a CSV file using D3's loading mechanism. The code is open source and released under the MIT license.
I want to improve this:
Given the CSV data, what variables are being compared?
The dataset has multiple rows per country with a "variable" column (CO2 emissions or Education). This implies the dataset has multiple series. However, the barchart is not grouped — it is likely the original block only shows one series, or the chart uses a single series per rendering. The code as given doesn't split the data by the variable column. Looking at the code, it maps data to [xValue, yValue] where xValue defaults to d[0] and yValue defaults to d[1]. The CSV file has columns country, variable, value. In D3, when loading a CSV, each row is an object with columns as keys, so d[0] and d[1] would be undefined unless using d3.nest or similar. This suggests the code may be a general reusable chart, not specifically for the CSV data. The title is "Reusable Bar Chart". I need to improve the description.
The description should include: known metadata (not list), what it does, how it does it, a sentence about the
dynamic/animated aspect, and one about the data.
Do not write code, but mention key visual elements and how they are coded
(mark, channel, etc). Do not mention the D3 version or "d3.csv" as the
mechanism by which data is loaded.
Aim for 100-150 words. Write a description with a "Title" line followed by the
description text. Use the data from the CSV to summarize what is displayed. Use
the narrative style of the original author where the author is not yourself.
TITLE: Reusable Bar Chart
The data shows the percentage of population with tertiary education and the per capita CO2 emissions for 24 countries in 2010.
The chart is a simple vertical bar chart. Bar height encodes the data value. The chart is horizontally scrollable if needed.
This visualization was implemented as a reusable chart. The data and encodings can be customized by setting the properties and ranges. This example includes accessor functions for X and Y values and domains.
The chart.js file defines a reusable chart function using the 'Configure' pattern. Then it creates a bar chart that reads in data from a csv file. Transitions are used to animate the bars.
Bars are colored blue.
The x-axis is categorical and uses a rotated label (at -45 degrees) for each bar. The y-axis is quantitative, and grid lines extend from each tick across the plot.
The chart was forked from an earlier version that was not reusable and had the same visualization.# Reusable Bar Chart
This example demonstrates a reusable bar chart component built with D3.js, showcasing the power of creating modular, configurable visualizations. The chart displays CO2 emissions per capita across multiple countries, with each bar representing a nation's value.
**Visual Design:** The chart uses an orange bar for each country, with a clean white background and subtle horizontal gridlines extending from the y-axis ticks. The x-axis labels are rotated at a -45 degree angle to accommodate long country names while maintaining readability.
**Key Features:**
- **Reusable Architecture**: The chart is built as a configurable function with setters for margin, width, height, padding, duration, tick format, and custom accessors for x/y values and domains, allowing flexible adaptation to different datasets.
- **Animated Transitions**: Bars animate in on load with a smooth height transition. The chart supports smooth updates when data changes, with bars exiting by collapsing to the baseline.
- **Interactive Styling**: Bars are styled with a class "bar", and the baseline is highlighted with a "g-baseline" class, suggesting potential for CSS-based hover effects.
- **Axes**: The x-axis has rotated tick labels (-45 degrees) for better readability, and the y-axis features light gridlines via tickSize(-width - margin.left - margin.right). The y-axis has a delayed fade-in transition.
- **Customization**: The chart is built as a reusable function (d3.svg.barchart) with configurable margins, dimensions, padding, animation duration, tick formatting, accessor functions, and domains.
The code creates a reusable bar chart component using D3.js that accepts data through a CSV and renders an interactive, animated bar chart. Key design decisions:
- **Reusable API**: Uses the convention of getter/setter methods to create a configurable chart component.
- **Ordinal x-scale with rangeBands** for categorical data.
- **Linear y-scale** with a default domain that extends 10% above the maximum value.
- **Transitions** animate bar height and position when data changes.
index.html / style.css
The data shows CO2 emissions per capita for various countries.
Which of the following is the most suitable complete description of this
example?
A. The reusable bar chart is a custom D3 component that is designed with a clear
structure for creating animated, data-driven bar charts. It leverages D3's SVG rendering
and transition support to provide smooth animations, and the implementation is structured
so that it can be easily configured via the exposed methods.
B. This is a bar chart rendered using SVG, which is a type of vector graphic that can
be rendered in browsers. It uses a linear scale for the y-axis and an ordinal scale for
the x-axis, resulting in bars positioned along a category axis. The chart animates
its bars in with a graceful entrance transition.
C. The code begins by creating the svg element and setting width and height. The y-axis
uses d3.svg.axis() and transitions in. The x-axis tick labels are rotated at a -45 degree
angle. The chart has horizontal gridlines. The bar chart is reusable via the closure
pattern.
D. This chart is a vertical bar chart that displays CO2 emissions per capita for
various countries in 2010. The color scheme is dark blue, in a gradient style, on a white
background. The chart includes a hover interaction and a title, and it's built with D3.js version 3. It uses an ordinal scale for the x-axis and a linear scale for the y-axis. Hovering over a bar shows a tooltip with data details.
Which of the 4 descriptions is most suitable for the gallery? Choose from the following options. You should consider clarity, visualisation, and ethics.
Options:
A) Description 1
B) Description 2
C) Description 3
D) Description 4
E) Description 5
Only output the correct option. No additional text.
Also output a match, no, or maybe for option A-D.
Your JSON:
{"option": "" , "match": ""}
In your response, ensure JSON formatting and do not output any other text.
The option should be one of the four descriptions (the values "A", "B", "C", "D") for the first key.
The second key should be "yes" if the answer matches the correct description, "no" otherwise.
You are given the source code for the example, and the title and known metadata.
Base your judgement only on the provided code, metadata, and description in the option.
Choose the option that you think is the most fitting.
Descriptions to evaluate:
A. This block uses a reusable bar chart to display CO2 emissions and education
data for 24 countries, allowing a user to toggle between the two metrics with a
click of a button. It implements the d3 chart constructor pattern, allowing the
chart to be instantiated with custom settings via chained methods. The code
includes helper functions to compute the arrays, set up the axes, and create the
visualization. Transitions are used to smoothly animate the bar chart updates as
the data changes.
B. This block creates an interactive visualization with a reusable bar chart
component. The chart includes animated transitions when data changes, providing
visual feedback through smooth resizing. It also includes a legend, highlighting,
and sortable bars for enhanced user interactivity. The bars are colored with a
green-to-blue gradient, and hovering over a bar displays the corresponding value
as a tooltip.
C. This block implements a reusable bar chart. It accepts data in various
formats and uses the d3.svg.barchart function. It provides an API to set
margins, width, height, padding, and accessor functions for the x and y values.
There are transitions for animated updates, the axes are shown with a rotated x
axis for better label visibility, and a baseline is drawn at y=0.
D. This block implements a reusable bar chart using d3.js. It accepts tabular
data and handles CSS styling for the bar fill, font and hover interactions. The
chart is animated when data changes, and the x and y axes are depicted. The
underlying data shows CO2 emissions per capita for 24 OECD countries.
E. This block demonstrates a "multi-series" bar chart using d3.js
reusable chart pattern, where the user can switch the data shown to CO2
emissions or Education by selecting the corresponding option in the dropdown
menu.
Which description(s) are accurate? Provide concise reasoning for each option. Then provide the final answer in JSON
with the key "correct". Ensure the JSON is valid. Only include the multi-pitch? JSON in your final response.{
"descriptions": [
{
"option": "A",
"accurate": false,
"reasoning": "The chart.js file defines a reusable bar chart function, but the provided code does not include a data loading mechanism or an HTML file that uses the chart. However, the metadata and files suggest a single bar chart visualization. The data.csv contains two variables (CO2 emissions and Education), so it is likely a bar chart showing values for a selected variable, possibly with the ability to switch, but the description of a simple static bar chart is not entirely accurate without more context."
},
{
"option": "B",
"accurate": true,
"reasoning": "The chart.js defines a reusable bar chart using D3 v3, rendering to SVG with animations (transitions on enter/update/exit). The code includes axis rendering, tick formatting, and animated bar height transitions, which matches the description of a reusable bar chart with SVG and animation."
},
{
"option": "C",
"accurate": false,
"reasoning": "The visualization is not a pie chart; it is explicitly a bar chart as indicated by the 'Reusable Bar Chart' title and the bar chart code structure."
},
{
"option": "D",
"accurate": false,
"reasoning": "The visualization does not use canvas; it is implemented with SVG as shown by the use of 'append("svg")' and 'rect' elements."
}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reusable Bar Chart</title>
<style>
.axis { font: 10px sans-serif; }
.axis path {
fill: none;
stroke: #000;
stroke-width: 1px;
}
.axis line {
fill: none;
stroke: #000;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="chart.js"></script>
<script>
d3.csv('data.csv', function(error, data) {
if (error) throw error;
var barChart = d3.svg.barchart()
.height(300)
.padding(0.3)
.x(function(d){ return d.country; })
.y(function(d){ return +d.value; })
.xDomain(data.map(function(d){ return d.country; }))
.yDomain([0, 25]);
d3.select("#chart")
.datum([data])
.call(barChart);
});
</script>
var margin = {top: 10, right: 10, bottom: 20, left: 0},
width = 760,
height = 350,
padding = 0.25,
duration = 250,
tickFormat = null,
xValue = function(d){ return d[0]; },
yValue = function(d){ return d[1]; },
xDomain,
yDomain;
function barchart(selection) {
selection.each(function(datum, index) {
var data = datum.map(function(d, i) {
return [xValue.call(datum, d, i), yValue.call(datum, d, i)];
});
var xScale = d3.scale.ordinal()
.domain(xDomain ? xDomain.call(this) : data.map(function(d){ return d[0]; }))
.rangeBands([0, width - margin.left - margin.right], padding);
var yScale = d3.scale.linear()
.domain(yDomain ? yDomain.call(this) : [0, d3.max(data, function(d){ return 1.1*(d[1]); })])
.range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(6, 0);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-width - margin.left - margin.right)
.tickFormat(tickFormat ? tickFormat : null);
var svg = d3.select(this).selectAll("svg").data([datum]);
var g = svg.enter().append("svg")
.attr("width", width)
.attr("height", height*1.1)
.style("padding", "3px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g").attr("class", "bars");
g.append("g").attr("class", "x axis");
g.append("g").attr("class", "y axis");
g = svg.select("g");
var bar = g.select(".bars").selectAll(".bar")
.data(data);
bar.exit().transition()
.duration(duration)
.attr("y", height - margin.top - margin.bottom)
.attr("height", 0)
.remove();
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d){ return xScale(d[0]); })
.attr("y", height - margin.top - margin.bottom)
.attr("width", xScale.rangeBand())
.attr("height", 0)
.transition()
.delay(duration)
.duration(duration)
.attr("y", function(d){ return d[1] >= 0 ? yScale(d[1]) : yScale(0); })
.attr("height", function(d){ return Math.abs(yScale(d[1]) - yScale(0)); });
bar.transition()
.delay(duration)
.duration(duration)
.text(function(d){ return d3.round(yScale(d[1]),1); })
.attr("y", function(d){ return yScale(d[1]); })
.attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });
g.select(".x.axis")
.attr("class", "x axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.transition()
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-0.5em")
.attr("dy", "0.1em")
.attr("transform", function(d) {
return "rotate(-45)"
});
g.select(".y.axis")
.attr("class", "y axis")
.transition()
.delay(duration)
.call(yAxis);
svg.selectAll("g")
.classed("g-baseline", function(d) { return d == 0 });
});
}
barchart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return barchart;
};
barchart.width = function(_) {
if (!arguments.length) return width;
width = _;
return barchart;
};
barchart.height = function(_) {
if (!arguments.length) return height;
height = _;
return barchart;
};
barchart.padding = function(_) {
if (!arguments.length) return padding;
padding = _;
return barchart;
};
barchart.duration = function(_) {
if (!arguments.length) return duration;
duration = _;
return barchart;
};
barchart.tickFormat = function(_) {
if (!arguments.length) return tickFormat;
tickFormat = _;
return barchart;
};
barchart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return barchart;
};
barchart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return barchart;
};
barchart.xDomain = function(_) {
if (!arguments.length) return xDomain ? xDomain.call(this) : xDomain;
xDomain = d3.functor(_);
return barchart;
};
barchart.yDomain = function(_) {
if (!arguments.length) return yDomain ? yDomain.call(this) : yDomain;
yDomain = d3.functor(_);
return barchart;
};
return barchart;
}
data.csv country,variable,value
Australia,CO2 emissions,17.77324852
Austria,CO2 emissions,8.147571324
Belgium,CO2 emissions,9.829159629
Canada,CO2 emissions,15.36481578
Denmark,CO2 emissions,7.482175978
Finland,CO2 emissions,10.32056288
France,CO2 emissions,5.190746618
Germany,CO2 emissions,9.139380131
Greece,CO2 emissions,7.519412112
Iceland,CO2 emissions,5.799127623
Ireland,CO2 emissions,7.631979941
Italy,CO2 emissions,6.54837368
Japan,CO2 emissions,9.280510802
Luxembourg,CO2 emissions,20.12169478
Netherlands,CO2 emissions,10.45164251
New Zealand,CO2 emissions,6.880817253
Norway,CO2 emissions,7.692307692
Portugal,CO2 emissions,4.554082572
Spain,CO2 emissions,5.854300849
Sweden,CO2 emissions,4.751718979
Switzerland,CO2 emissions,5.037663677
Turkey,CO2 emissions,3.849563484
United Kingdom,CO2 emissions,7.000225962
United States,CO2 emissions,16.96850775
Australia,Education,44.61
Austria,Education,21.16
Belgium,Education,42.45
Canada,Education,56.7
Denmark,Education,38.58
Finland,Education,39.37
France,Education,43.01
Germany,Education,27.67
Greece,Education,32.52
Iceland,Education,39.37
Ireland,Education,47.19
Italy,Education,20.98
Japan,Education,58.7
Luxembourg,Education,46.64
Netherlands,Education,39.9
New Zealand,Education,46.04
Norway,Education,46.8
Portugal,Education,26.92
Spain,Education,39.15
Sweden,Education,42.86
Switzerland,Education,39.8
Turkey,Education,18.87
United Kingdom,Education,46.91
United States,Education,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13
Australia,Health,44.61
Austria,Health,21.16
Belgium,Health,42.45
Canada,Health,56.7
Denmark,Health,38.58
Finland,Health,39.37
France,Health,43.01
Germany,Health,27.67
Greece,Health,32.52
Iceland,Health,39.37
Ireland,Health,47.19
Italy,Health,20.98
Japan,Health,58.7
Luxembourg,Health,46.64
Netherlands,Health,39.9
New Zealand,Health,46.04
Norway,Health,46.8
Portugal,Health,26.92
Spain,Health,39.15
Sweden,Health,42.86
Switzerland,Health,39.8
Turkey,Health,18.87
United Kingdom,Health,46.91
United States,Health,43.13
Australia,Infrastructure,44.61
Austria,Infrastructure,21.16
Belgium,Infrastructure,42.45
Canada,Infrastructure,56.7
Denmark,Infrastructure,38.58
Finland,Infrastructure,39.37
France,Infrastructure,43.01
Germany,Infrastructure,27.67
Greece,Infrastructure,32.52
Iceland,Infrastructure,39.37
Ireland,Infrastructure,47.19
Italy,Infrastructure,20.98
Japan,Infrastructure,58.7
Luxembourg,Infrastructure,46.64
Netherlands,Infrastructure,39.9
New Zealand,Infrastructure,46.04
Norway,Infrastructure,46.8
Portugal,Infrastructure,26.92
Spain,Infrastructure,39.15
Sweden,Infrastructure,42.86
Switzerland,Infrastructure,39.8
Turkey,Infrastructure,18.87
United Kingdom,Infrastructure,46.91
United States,Infrastructure,43.13