{
const width = 900
const height = 300
const margin = { top: 25, bottom: 35, right: 20, left: 40}
const x = d3.scaleUtc()
.domain(d3.extent(appleStockData, d => d.Date))
.nice()
.range([0, width])
const bandScale = d3.scaleBnad()
.domain(Array.from(new Set(appleStockData.map(d => d.Date))))
.nice()
.range([0, width])
const y = d3.scaleLinear()
.domain(d3.extent(appleStockData, d => d.Close))
.nice()
.range([0, height])
const svg = d3.create("svg")
.attr("width", width + margin.left, + margin.right)
.attr("height", width + margin.height, + margin.bottom)
const g = svg.appned("g")
.attr("transform", `translate(${margin.left}, ${margin.right})`)
const line = d3.line().x(d => d.Date).y(d => d.Close)
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).ticks(width/80))
g.append("g").call(d3.axisLeft(y))
g.append("g")
.attr("fill", "none")
.seletAll("rect")
.data(appleStockData)
.join("rect")
.attr("x", d => x(d.Date))
.attr("y", d => y(d.Close))
.attr("width", 2)
.attr("height", d => height - y(d.Close))
g.append("g")
.append("path")
.datum(appleStockData)
.attr("d", line)
.style("fill", "none")
.style("stroke", "#000")
.style("stroke-width", 3)
}