d3 = require("d3@6")
d3format = require("d3-format@1")
data = FileAttachment("emissions_vehicle_join_adjweights_2000_23_new.csv").csv()
data_2000 = {var filter_data = data.filter(function (el) {
return el.Year === "2000"
})
var emissions = []
for (let i = 0; i < filter_data.length; i++) {
emissions.push(filter_data[i].US_total / 1000)
}
return emissions
}
data_2000_2 = {var filter_data = data.filter(function (el) {
return el.Year === "2000"
})
var emissions = []
for (let i = 0; i < filter_data.length; i++) {
emissions.push(filter_data[i].US_total / 1000000)
}
return emissions
}
margin = ({top: 10, right: 30, bottom: 30, left: 60})
width
width2 = {if (width < 928) {return width/1.2 - margin.left - margin.right;
} else {
return 700 - margin.left - margin.right;
}
}
height = {
if (width < 928) {
return width/2.3 - margin.top - margin.bottom;
} else {
return 400 - margin.top - margin.bottom;
}//350
}
data_choice = {var filter_data = data.filter(function (el) {
return el.Year === chooseYear.toString()
})
var emissions = []
for (let i = 0; i < filter_data.length; i++) {
emissions.push(filter_data[i].US_total / 1000)
}
return emissions
}
data_choice2 = {var filter_data = data.filter(function (el) {
return el.Year === chooseYear.toString()
})
var emissions = []
for (let i = 0; i < filter_data.length; i++) {
emissions.push(filter_data[i].US_total / 1000000)
}
return emissions
}
fulldata = data_choice.concat(data_2000)
Math.max.apply(Math, fulldata)
viewof chooseYear = slider({
min: 2000,
max: 2023,
value: 2023,
precision: 0,
title: "Choose Year",
description: ""
})
chart = {
const svg = d3.select(DOM.svg(width2+margin.left+margin.right,
height+margin.top+margin.bottom))
const max_domain = Math.round(Math.max.apply(Math, fulldata) / 5000) * 5000
const ticks = max_domain / 5000
const container2 = svg
.append("svg")
.attr("width", width2 + margin.left*+ margin.right)
.attr("height", height + margin.top + margin.bottom*3)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.bottom + ")")
const container = svg
.append("svg")
.attr("width", width2 + margin.left*+ margin.right)
.attr("height", height + margin.top + margin.bottom*3)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.bottom + ")")
if (width <570) {
var data_base = data_2000_2
var data_sel = data_choice2
} else {
var data_base = data_2000
var data_sel = data_choice
}
// X axis: scale and draw:
if (width <570) {
var x = d3.scaleLinear()
.range([0, width2-30])
.domain([0, 220])
} else {
var x = d3.scaleLinear()
.range([0, width2-30])
.domain([0, 220000])
// .domain([0, d3.max(data, function(d) { return +d.totalkg }) + 3000]) // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price })
}
if (width <570) {
container.append("g")
.attr("transform", `translate(0, ${height-20})`)
.call(d3.axisBottom(x))
.call(g => g.append("text")
.attr("x", width2 - 90)
.attr("y", 28)
.attr("fill", "black")
//.attr("text-anchor", "start")
.style('font', '12px sans-serif' )
.text("Lifetime Emissions (metric tons CO2e) →"));
} else {
container.append("g")
.attr("transform", `translate(0, ${height-20})`)
.call(d3.axisBottom(x))
.call(g => g.append("text")
.attr("x", width2 - 90)
.attr("y", 28)
.attr("fill", "black")
//.attr("text-anchor", "start")
.style('font', '12px sans-serif' )
.text("Lifetime Emissions (kg CO2e) →"));
}
// set the parameters for the histogram
const histogram = d3.histogram()
.value(function(d) { return d; }) // I need to give the vector of value
.domain(x.domain()) // then the domain of the graphic
.thresholds(x.ticks(35)); // then the numbers of bins
// And apply this function to data to get the bins
const bins = histogram(data_base);
var full2000 = data_base.length
const mean_2000 = data_base.reduce((a, b) => a + b) / data_base.length;
const bins2 = histogram(data_sel);
var fullchoice = data_sel.length
const mean_choice = data_sel.reduce((a, b) => a + b) / data_sel.length;
const fullbins = bins.concat(bins2)
// Y axis: scale and draw:
const y = d3.scaleLinear()
.range([height-20, 20]);
y.domain([0, 0.16])//d3.max(fullbins, function(d) { return d.length; })]); // d3.hist has to be called before the Y axis obviously
container.append("g")
.attr("transform", `translate(${width2}), 0`)
.call(d3.axisLeft(y));
container.append("g")
.attr("transform", `translate(${width2}), 0`)
.call(d3.axisLeft(y))
.call(g => g.append("text")
.attr("x", -60)
.attr("y", 10)
.attr("fill", "black")
.attr("text-anchor", "start")
.style('font', '12px sans-serif' )
.text("↑ Proportion of Vehicle Models"))
container2.append('line')
.attr('x1', x(mean_2000))
.attr('x2', x(mean_2000))
.attr('y1', y(0))
.attr('y2', y(.16))
.style("stroke", "gray")
.style("stroke-width", 1)
container2.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("x", 1)
.attr("transform", function(d) { return `translate(${x(d.x0)} , ${y(d.length/full2000)})`})
.attr("width", function(d) { return x(d.x1) - x(d.x0) -1})
.attr("height", function(d) { return height-20 - y(d.length/full2000); })
.style("fill", "gray")
.style("opacity", 0.4)
container.append('line')
.attr('x1', x(mean_choice))
.attr('x2', x(mean_choice))
.attr('y1', y(0))
.attr('y2', y(.16))
.style("stroke", "#46b5b5")
.style("stroke-width", 1)
container.selectAll("rect")
.data(bins2)
.enter()
.append("rect")
.attr("x", 1)
.attr("transform", function(d) { return `translate(${x(d.x0)} , ${y(d.length/fullchoice)})`})
.attr("width", function(d) { return x(d.x1) - x(d.x0) -1})
.attr("height", function(d) { return height-20 - y(d.length/fullchoice); })
.style("fill", "#46b5b5")
.style("opacity", 0.3)
container2.append('text')
.attr('x', x(mean_2000) + 5)
// .attr('y', 425 - 140 - 180)
.attr('y', y(0.16))
.style('font', '8px sans-serif')
.style('font-weight', 100)
.attr("fill", "gray")
.text("Avg Emissions (2000)")
container2.append('text')
.attr('x', x(mean_choice) + 5)
// .attr('y', 425 - 140 - 180)
.attr('y', y(0.150))
.style('font', '8px sans-serif')
.style('font-weight', 100)
.attr("fill", "#46b5b5")
.text(`Avg Emissions (${chooseYear})`)
//Add title
if (width <570) {
var title = container
.append('text')
.attr('x', -30)
//.attr('y', height+margin.bottom+margin.top)
.attr('y', -10)
.style("font", "13px sans-serif")
.style("font-weight", 900)
.text('Vehicle Models Lifetime Emission Comparison')
} else {
var title = container
.append('text')
.attr('x', -5)
//.attr('y', height+margin.bottom+margin.top)
.attr('y', -12)
.style("font", "16px sans-serif")
.style("font-weight", 900)
.text('Vehicle Lifetime Emission Comparison with Model Year 2000')
}
// Legend Element
if (width > 570) {
container
.insert('rect')
.attr('width', 55)
.attr('height', 45)
.attr('x', 20 )
// .attr('y', 380 - 140 - 180)
.attr('y', 25)
.attr('fill', 'white')
.attr('stroke', 'black')
.attr('stroke-width', 0.5);
container.append('text')
.attr('x', 23)
// .attr('y', 392 - 140 - 180)
.attr('y', 37)
.style('font', '12px sans-serif')
.style('font-weight', 600)
.text("Legend")
container.append('text')
.attr('x', 45)
// .attr('y', 408 - 140 - 180)
.attr('y', 49)
.style('font', '10px sans-serif')
.style('font-weight', 100)
.text(`${chooseYear}`)
container.append('rect')
.attr('x', 30)
//.attr('y', 405 - 140 - 185)
.attr('y', 41)
.attr('width', 8)
.attr('height', 8)
.attr('fill', '#46b5b5')
.style('opacity', 1)
container.append('text')
.attr('x', 45)
// .attr('y', 425 - 140 - 180)
.attr('y', 67)
.style('font', '10px sans-serif')
.style('font-weight', 100)
.text("2000")
container.append('rect')
.attr('x', 30 )
// .attr('y', 425 - 143 - 185)
.attr('y', 59)
.attr('width', 8)
.attr('height', 8)
.attr('fill', '#9F9F9F')
.style('opacity', 1)
} else {
container.append('text')
.attr('x', 35)
// .attr('y', 408 - 140 - 180)
.attr('y', 29)
.style('font', '10px sans-serif')
.style('font-weight', 100)
.text(`${chooseYear}`)
container.append('rect')
.attr('x', 20)
//.attr('y', 405 - 140 - 185)
.attr('y', 21)
.attr('width', 8)
.attr('height', 8)
.attr('fill', '#46b5b5')
.style('opacity', 1)
container.append('text')
.attr('x', 35)
// .attr('y', 425 - 140 - 180)
.attr('y', 42)
.style('font', '10px sans-serif')
.style('font-weight', 100)
.text("2000")
container.append('rect')
.attr('x', 20 )
// .attr('y', 425 - 143 - 185)
.attr('y', 34)
.attr('width', 8)
.attr('height', 8)
.attr('fill', '#9F9F9F')
.style('opacity', 1)
}
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.
