penguin_chart = {
const margin = { top: 70, right: 200, bottom: 80, left: 70 };
const chart_width = width - 100;
const chart_height = 400;
const svg = d3
.create("svg")
.attr("class", "slide slide--small")
.style("height", chart_height + "px")
.style("width", width + "px")
.style('font-family', "sans-serif")
.style("font-size", "20px")
.style("display", "block")
.style("text-anchor", "middle");
const xScale = d3
.scaleLinear()
.domain(d3.extent(penguin_data, d => +d.bill_length_mm))
.range([margin.left, chart_width - margin.right]);
const yScale = d3
.scaleLinear()
.domain(d3.extent(penguin_data, d => d.bill_depth_mm))
.range([chart_height - margin.bottom, margin.top]);
svg
.append("g")
.attr("transform", `translate(0,${chart_height - margin.bottom})`)
.call(d3.axisBottom(xScale));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale));
svg
.selectAll("circle")
.data(penguin_data)
.join("circle")
.attr("cx", d => xScale(d.bill_length_mm))
.attr("cy", d => yScale(d.bill_depth_mm))
.attr("r", 5)
.style("opacity", .5)
.style("fill", "blue");
svg
.append("text")
.text("Bill Length")
.attr("x", xScale.range()[1] / 2)
.attr("y", chart_height - margin.bottom + 35);
svg
.append("text")
.text("Bill Depth")
.attr(
"transform",
`translate(${margin.left - 40}, ${chart_height / 2})rotate(-90)`
);
svg
.append("text")
.text("Comparing Bill Length and Depth")
.attr("x", xScale.range()[1] / 2)
.attr("y", margin.top - 35);
svg
.append("text")
.text(
"(an example of the design choices, data exploration, and attention to detail demanded by D3)"
)
.attr("x", xScale.range()[1] / 2)
.attr("y", margin.top - 18)
.style("font-size", "16px")
.style("font-style", "italic")
.style("opacity", .5);
return svg.node();
}