xScale = d3.scalePoint() // a type of ordinal scale
.domain(d3.set(nestedData.map(d => d.key)).values())
.rangeRound([0, width])
yScale = d3.scaleLinear()
.domain([0, d3.max(nestedData, d => d.value)])
.range([height, 0])
lineGenerator = d3.line()
.x(d => xScale(d.key))
.y(d => yScale(d.value))
LineChart = {
// Add the SVG to the page
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom))
.attr("width", width)
.attr("height", height)
// Standard Margin Convention
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`)
// Call the x axis in a group tag
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
//labels are undert the line
// Call the y axis in a group tag
g.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
// Append the path, bind the data, and call the line generator
g.append("path")
.datum(nestedData) // Binds data to the line
.style("stroke", "#000")
.style("fill", "none")
.attr("d", lineGenerator); // Calls the line generator
g.selectAll("circle")
.data(nestedData)
.enter().append("circle")
.attr("cx", d=> xScale(d.key))
.attr("cy", d=> yScale(d.value))
.attr("r", 5);
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.
