// selectedCountry = ["France", "Portugal"]
selectedCountry = ["France", "Portugal", "Italy", "Germany", "Finland", "Denmark", "Norway", "Netherlands", "Spain", "United Kingdom", "Greece"]
euData = countryNaRate.filter(d => d.continent === 'Europe')
groupBySelectedCountry = d3.group(euData, d => d.country)
groupBySelectedCountry3 = d3.group(selectedCountryData, d => d.country)
countryNaRate
// chart = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, 0, width, height]);
// svg.selectAll("rect")
// .data(selectedCountryData)
// .join('rect')
// .attr('x', (d,i) => {console.log(i); return(i * 8)})
// .attr('y', 100)
// .attr('width', 5)
// .attr('height', 5)
// .attr('fill', d => colorScale(d['rate']))
// return svg.node();
// }
function colNameMaker(){
let columnNamesContainer = []
groupBySelectedCountry3.get("Germany").forEach(d => {
console.log("----------")
console.log(d['col_name'])
columnNamesContainer.push(d['col_name'])
})
const columnNames = [...new Set(columnNamesContainer)]
return columnNames
}
columnNames = colNameMaker()
xScale = d3.scaleBand()
.domain(Array.from(groupBySelectedCountry.keys()))
.range([margin.left, width - margin.right])
.padding(0)
.align(0.5)
.round(true)
yScale = d3.scaleBand()
.domain(columnNames)
.range([margin.top, height - margin.bottom - margin.top])
.padding(0.2)
// .align(0.62)
.round(true)
chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]); // min-x, min-y, width, height
groupBySelectedCountry.forEach((d,i,e)=> {
console.log("==============")
// console.log(d[1]['col_name'])
// console.log(`rect.ind-${i}`)
// console.log(e)
svg.selectAll(`rect.${i}`) // to give unique names, i -> country
.data(groupBySelectedCountry.get(i))
.join('rect')
.attr('y', d => yScale(d['col_name']))
.attr('x', xScale(i))
.attr('width', xScale.bandwidth() * 0.95)
.attr('height', yScale.bandwidth())
.attr('fill', d => colorScale(d['rate']))
})
const xAxis = svg.append("g")
.attr("id", "xAxisG")
.attr("transform", `translate(0 ,${margin.top + 20})`)
.call(d3.axisTop(xScale))
.attr("font-size", 5)
.call(g => g.select(".domain")
.remove())
xAxis.selectAll("text")
.attr("transform", `translate(8, 0) rotate(-90)`)
.style("text-anchor", "start")
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale))
.attr("font-size", 5)
.call(g => g.select(".domain")
.remove())
return svg.node();
}
groupBySelectedCountry
groupBySelectedCountry.get("France")
Array.from( groupBySelectedCountry.keys())
xScale('Germany')
euData.indexOf('Spain')
yScale('icu_patients')
height = 600
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.
