Public
Edited
Sep 9, 2024
filteredCases = covidData
.filter(d => d.Date <= date);
filteredDeaths = deaths
.filter(d => d.Date <= date2);
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-1, 0, 600, 110 * 2]); // Adjust the overall width
const margin = { top: 40, right: 20, bottom: 20, left: 40 }; // Adjusted top margin for titles
const width = 300 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;
const createChart = (svg, yearsFilter, xPos, chartTitle, countryName) => {
const chartGroup = svg.append("g")
.attr("transform", `translate(${margin.left + xPos},${margin.top})`); // Adjusted translation
const x = d3.scaleBand()
.domain(inflationData2
.filter(d => d.Country === dropdownCountry && yearsFilter.includes(+d.Year))
.map(d => d.Year))
.range([0, width])
.padding(0.1);
const numYears = yearsFilter.length;
const bandwidth = width / numYears;
const dynamicDomain = [d3.min(inflationData2, d => d.Inflation_Rate), d3.max(inflationData2, d => d.Inflation_Rate)];
const y = d3.scaleLinear()
.domain([-10,80])
.range([height, 0]);
const xAxis = g => g
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.append("text") // X-axis label
.attr("x", width / 2)
.attr("y", 30)
.attr("dy", "0.71em")
.attr("fill", "#000")
.attr("text-anchor", "middle")
.style("font-size", "8px") // Adjusted font size
.text("Year");
const yAxis = g => g
.call(d3.axisLeft(y))
.append("text") // Y-axis label
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", "0.71em")
.attr("fill", "#000")
.attr("text-anchor", "end")
.style("font-size", "8px") // Adjusted font size
.text("Inflation in Consumer Prices (Annual %)");
chartGroup.append("g").call(xAxis);
chartGroup.append("g").call(yAxis);
// Add horizontal grid lines
chartGroup.append("g")
.attr("class", "grid")
.call(d3.axisLeft(y).tickSize(-width).tickFormat("").ticks(10))
.call(g => g.select(".domain").remove())
.selectAll(".tick line")
.attr("stroke-opacity", 0.2) // Adjust the opacity of horizontal grid lines;
// Add vertical grid lines
chartGroup.append("g")
.attr("class", "grid")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).tickSize(-height).tickFormat("").tickValues(x.domain().filter((d, i) => i % 1 === 0)))
.call(g => g.select(".domain").remove())
.selectAll(".tick line")
.attr("stroke-opacity", 0.2); // Adjust the opacity of vertical grid lines
// Chart title with two lines
const titleLines = chartTitle.split("\n"); // Split the title into two lines
const titleFontSize = 10; // Font size of the title
const titleHeight = titleFontSize * 1.2; // Line height
chartGroup.append("text")
.attr("x", width / 2)
.attr("y", -30)
.attr("text-anchor", "middle")
// .style("font-size", titleFontSize + "px") // Adjusted font size
.style("font-size", 9)
.style("font-weight", "bold")
.append("tspan") // First line
.text(titleLines[0])
.attr("dy", "0em")
.append("tspan") // Second line
.text(titleLines[1])
.attr("dy", titleHeight / titleFontSize + "em")
.attr("x", width / 2) // Set x attribute for the second line
// Country name label
chartGroup.append("text")
.attr("x", width / 2)
.attr("y", -10) // Adjusted y position
.attr("text-anchor", "middle")
.style("font-size", "8px") // Adjusted font size
.style("fill", "red")
.text(countryName);
const line = d3.line()
.x(d => x(d.Year) + x.bandwidth() / 2)
.y(d => y(+d.Inflation_Rate));
chartGroup.append("path")
.datum(inflationData2.filter(d => d.Country === dropdownCountry && yearsFilter.includes(+d.Year)))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line)
};
createChart(svg, [2017, 2018, 2019], 0, "Inflation in Consumer Prices \nBefore COVID-19 (2017, 2018, 2019)", dropdownCountry);
createChart(svg, [2020, 2021, 2022], width + 50, "Inflation in Consumer Prices \nDuring COVID-19 (2020, 2021, 2022)", dropdownCountry);
return svg.node();
}
viewof dropdownCountry = select({options: countrie})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
