vi1url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQ7-PjpP6TXXHOEzTCL_PnPHXfc1n1HwOczGMY5g-V9h_xzPfRZng2HedmxFO93rNyYqirXG_fJyGT8/pub?output=csv"
max_em = 1807.720000
color1 = d3.scaleOrdinal()
.domain(countrylist)
.range(d3.schemeSpectral[6]);
{
const margin = {top: 10, right: 30, bottom: 20, left: 40};
const visWidth = width - margin.left - margin.right;
const visHeight = 500 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleTime()
.domain([minyear, maxyear])
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, max_em]).nice()
.range([visHeight, 0]);
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('fill', 'black')
.attr('x', 5)
.text('CO2');
const line = d3.line()
.x(d => x(d.Year))
.y(d => y(d.CO2_em));
const series = g.selectAll('.series')
.data(vistop15)
.join('g')
.attr('stroke', ([Contry, CO2_em]) => color1(CO2_em)) // this is where line color is set
.attr('class', 'series')
.append('path')
.datum(([Contry, CO2_em]) => CO2_em)
.attr('fill', 'none')
.attr('stroke-width', 1.5)
.attr('d', line);
return svg.node();
}
viswhole2 = highlightCountries.map(c => {
const years = viswhole.get(c);
return {
Country: c,
Year: years[years.length - 1].Year,
CO2_em: years[years.length - 1].CO2_em
}
})
opacity = d3.scaleOrdinal()
.domain(highlightCountries)
.range([1]).unknown(.25)
color5 = d3.scaleOrdinal()
.domain(highlightCountries)
.range(d3.schemeCategory10).unknown("black")
evdata = {
const temp = (await d3.csv(evurl))
.map(d => ({
'Country': d.Country,
'Year': d3.timeParse('%Y')(d.Year),
'NumofEV': d.NumofEV
}))
return d3.group(temp, d => d.Country);
}
opacity2 = d3.scaleOrdinal()
.domain(HighEV)
.range([1]).unknown(.25)
color2 = d3.scaleOrdinal()
.domain(HighEV)
.range(d3.schemeSpectral[10]).unknown("black")
max2= 1.620000e+07
g.append('text')
.attr('x', visWidth/2)
.attr('y', -150)
.attr('font-size', '25px')
.attr("text-anchor", "middle")
.attr("dominant-baseline", "top")
.attr("font-family", "sans-serif")
.text("Purpose Based Aid Relationship Between Countries")
evpercapurl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQLHdkHbqexhmmg7-Cuo-C0CF3cIQG13pUiuKKkNO9xEf-O3KB-vARJENQO42gGa1CCwklqFImWpoHK/pub?output=csv"
evpercap1 = {
const data = await d3.csv(evpercapurl, row => ({
Country: row.Country,
EVperCap: row.EVperCap
}));
data.columns = Object.keys(data[0]);
return data;
}
evpercap = evpercap1.sort((a, b) => d3.descending(a.EVperCap, b.EVperCap))
maxh = 0.114700
Clist = evpercap.map(a=>a.Country)
{
const margin = ({top: 10, bottom: 70, left: 140, right: 10});
const visWidth = width - margin.left - margin.right;
const visHeight = 500 - margin.top - margin.bottom;
const x = d3.scaleBand()
.domain(Clist)
.range([0, visWidth])
.padding(0.2)
const y = d3.scaleLinear()
.domain([0, maxh])
.range([visHeight,0])
const xAxis = d3.axisBottom(x)
const yAxis = d3.axisLeft(y)
// create and select an svg element that is the size of the bars plus margins
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// bind our data to rectangles
g.selectAll('rect')
.data(evpercap)
.join('rect')
// set attributes for each bar
.attr('x', d => x(d.Country))
.attr('y', d => y(d.EVperCap))
.attr('width', x.bandwidth)
.attr('height', d=>(visHeight - y(d.EVperCap)))
.attr('fill', 'steelblue');
// add a group for the y-axis
g.append('g')
.call(yAxis);
// add a group for the x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("Category");
g.append('g')
.attr('transform', `translate(-10, 0)`)
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', -100)
.attr('y', visHeight/2)
.style("font-size", "10px")
.text("Total Duration");
return svg.node();
}
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.
