md `In this chart, the positional relationship between points is extremely apparent. This is a useful way to envision the raise in temperature over the course of a year, as there is a clear correlation with a distinct spike. If there was less of a correllation, and we are trying to highlight a specific point, and length encoding may be more useful.`
md `The color encoding in this chart is useful in interpreting the presence of rain year round in Seattle. It allows us to see not only what percentage of days it rained, but how these days are distributed across the year. If we are concerned with merely the number and not the distribution, a length encoding would suffice.`
md `the length encoding in this chart allows for us to observe a clear spike in temperature. This conveys similarly in terms of effectiveness to the position graph, as they highlight the high point in the same way. However, this may be more effective to use in breaking close ties, or showing a grastive difference of one observation.`
md`This chart is effective in comparing the difference between two variables. If the angle is 180 degrees, they two vairables are equal. However, in comparing any higher number of observations, it becomes visually challenging.`
md `The limitations of a curve difference chart is that it is challenging for the viewer to actually understand which line is indicated as what in describing the difference between two factors. `
line_chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.selectAll("path")
.data(line_data)
.join("path")
.attr("d", d => lineGenerator(d.values))
.attr("fill", "none")
.attr("stroke-width", "1px")
.attr("stroke", "blue")
.attr("opacity", 0.3)
svg.append("text")
.attr("x", width / 2)
.attr("y", height)
.text("Date")
.style("font-size", "20px")
svg.append("text")
.attr("transform", "translate(10, 300) rotate(-90)")
.text("Temperature")
.style("font-size", "20px")
svg.append("text")
.attr("x", width / 3)
.attr("y", 15)
.text("Daily Temperatures in Seattle in 2017")
.style("font-size", "20px")
return svg.node();
}
import { displayCaution } from "@info474/utilities"
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.
