Public
Edited
May 19, 2023
{
// Sample data for temperature and dates
const temperatureData = [
{ date: "2023-05-12", temperature: 20 },
{ date: "2023-05-13", temperature: 22 },
{ date: "2023-05-14", temperature: 18 },
{ date: "2023-05-15", temperature: 17 },
{ date: "2023-05-16", temperature: 19 },
{ date: "2023-05-17", temperature: 21 },
{ date: "2023-05-18", temperature: 23 }
];
// Dimensions of the chart
// const width = 400;
const height = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
// Create an SVG element and set its dimensions
const svg = d3.select(DOM.svg(width, height));
// Calculate the inner dimensions of the chart (excluding margins)
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Create scales for x and y axes
const xScale = d3
.scaleBand()
.domain(temperatureData.map((d) => d.date))
.range([0, innerWidth])
.padding(0.1);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(temperatureData, (d) => d.temperature)])
.range([innerHeight, 0]);
// Create x and y axes
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// Append a group element to translate the chart
const g = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Append x and y axes to the chart
g.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${innerHeight})`)
.call(xAxis);
g.append("g").attr("class", "y-axis").call(yAxis);
// Create the bars of the bar chart
g.selectAll(".bar")
.data(temperatureData)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", (d) => xScale(d.date))
.attr("y", (d) => yScale(d.temperature))
.attr("width", xScale.bandwidth())
.attr("height", (d) => innerHeight - yScale(d.temperature));
return svg.node();
}
{
// Sample data for temperature and dates
const temperatureData = [
{ date: "2023-05-20", average: 18, minimum: 15, maximum: 21 },
{ date: "2023-05-21", average: 20, minimum: 16, maximum: 24 },
{ date: "2023-05-22", average: 19, minimum: 17, maximum: 22 },
{ date: "2023-05-23", average: 17, minimum: 13, maximum: 20 },
{ date: "2023-05-24", average: 16, minimum: 12, maximum: 19 },
{ date: "2023-05-25", average: 19, minimum: 15, maximum: 23 },
{ date: "2023-05-26", average: 22, minimum: 18, maximum: 25 }
];
// Dimensions of the chart
// const width = 400;
const height = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
// Create an SVG element and set its dimensions
const svg = d3.select(DOM.svg(width, height));
// Calculate the inner dimensions of the chart (excluding margins)
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// Parse the date format
const parseDate = d3.timeParse("%Y-%m-%d");
const formatDate = d3.timeFormat("%Y-%m-%d");
// Format the data
temperatureData.forEach((d) => {
d.date = parseDate(d.date);
});
// Create scales for x and y axes
const xScale = d3
.scaleTime()
.domain(d3.extent(temperatureData, (d) => new Date(d.date)))
.range([0, innerWidth]);
const yScale = d3
.scaleLinear()
.domain([
d3.min(temperatureData, (d) => d.minimum),
d3.max(temperatureData, (d) => d.maximum)
])
.range([innerHeight, 0]);
// Create line generators
const lineAverage = d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.average));
const lineMinimum = d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.minimum));
const lineMaximum = d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.maximum));
// Append a group element to translate the chart
const g = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Append x and y axes to the chart
g.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${innerHeight})`)
.call(d3.axisBottom(xScale).tickFormat(formatDate));
g.append("g").attr("class", "y-axis").call(d3.axisLeft(yScale));
// Append the average temperature line
g.append("path")
.datum(temperatureData)
.attr("class", "line")
.attr("d", lineAverage)
.attr("fill", "none")
.attr("stroke", "deeppink");
// Append the minimum temperature line
g.append("path")
.datum(temperatureData)
.attr("class", "line")
.attr("d", lineMinimum)
.attr("fill", "none")
.attr("stroke", "green");
// Append the maximum temperature line
g.append("path")
.datum(temperatureData)
.attr("class", "line")
.attr("d", lineMaximum)
.attr("fill", "none")
.attr("stroke", "red");
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.
