md`The overall question is to find which elementary perceptual task that can give more accurate recognition of information.
**The Accuracy Ranking of Elementary Task**
1. Position along a common scale
2. Positions along nonaligned scales
3. Length, direction, angle
4. Area
5. Volume, curvature
6. Shading, color saturation
During the experiement, they ask the participants for their judgement of the bars/segments comparison on each graph(also different types of graphs) presented and the percentage difference between smaller bar/segment and larger bar/segment`
md`They get rid of the element of color, which is a primary elementary perceptual task on graphics, and color can solve many flaws of elementary perceptual task they mentioned. Moreover, their sample grouping method does not covering all the factors that could influence the outcome of this experiment, like the gender they assigned and the "technical group" dividing method.`
md`The additional information that can be extracted from a scatter plot is the relationship between x value and y value on the graph, the elementary perceptual task that enables us to do it is the **perception of direction(slope)**, which help us find the pattern`
margin = ({
top: 30,
right: 10,
bottom: 80,
left: 80
})
height = 600
x = d3
.scaleBand()
.domain(state_data.map(d => d.x))
.range([margin.left, width - margin.right])
.padding(0.1)
x1 = d3
.scaleTime()
.domain(d3.extent(formattedData1, d => d.date))
.range([margin.left, width - margin.right])
x2 = d3
.scaleBand()
.domain(state_data2.map(d => d.x))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3
.scaleLinear()
.domain([0, d3.max(state_data, d => d.y)])
.range([height - margin.bottom, margin.top])
y1 = d3
.scaleLinear()
.domain(d3.extent(formattedData1, d => +d.cases))
.range([height - margin.bottom, margin.top])
y2 = d3
.scaleLinear()
.domain([0, d3.max(state_data2, d => d.y) + 20])
.range([height - margin.bottom, margin.top])
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
xAxis1 = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x1))
xAxis2 = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x2))
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
yAxis1 = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y1))
yAxis2 = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y1))
md`## Position`
md`This uses position encoding as a scatter plot, it is very easily to the price difference of Microsoft stock in each month and its price pattern over time. But when the price does not has enought change, this chart might be less accurate than the line chart which has better showing of direction encoding.`
chart1 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis1);
svg.append("g").call(yAxis1);
svg
.selectAll('circle')
.data(formattedData1)
.join(enter => enter.append("circle"))
.attr("cx", d => x1(d.date))
.attr("cy", d => y1(d.cases))
.attr("fill", d => "red")
.attr("r", 3)
.attr("opacity", 0.8);
svg
.append("text")
.text("California Covid19 Cases")
.style("font-size", "15px")
.style("font-weight", "bold")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.text("Date")
.attr("transform", "translate(450,550)")
.style("font-size", "12px");
svg
.append("text")
.text("Cases")
.attr("transform", "translate(25,200) rotate(-90)")
.style("font-size", "12px");
return svg.node();
}
md`## Length `
md`This chart uses bar chart as the encoding of length. When the range of y axis value is not too large and the x axix value is not many, the length of bar chart can be accuratly perceived. This chart has a wide range of y axis value, thus it is not that accurate when some values are having less length differences than the large one. The dot chart might be a better choice by using better position encoding.`
chart2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-40)");
svg.append("g").call(yAxis);
svg
.append("text")
.text("# of Cases in Each State")
.style("font-weight", "bold")
.style("font-size", "15px")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.text("States")
.style("font-size", "12px")
.attr("transform", "translate(450, 600)");
svg
.append("text")
.text("# of Cases")
.style("font-size", "12px")
.attr("transform", "translate(15, 200) rotate(-90)");
svg
.selectAll("rect")
.data(state_data)
.join(enter => enter.append("rect"))
.attr("x", d => x(d.x))
.attr("y", d => y(d.y))
.attr("width", x.bandwidth())
.attr("fill", "blue")
.attr("opacity", "0.90");
svg
.selectAll("rect")
.transition()
.duration(2000)
.attr("y", d => y(d.y))
.attr("height", d => y(0) - y(d.y));
return svg.node();
}
md`## Angle `
md`This chart uses pie chart as the encoding of angle. When the smallest value and largest value are having large difference, the angle of pir chart cannot be accuratly perceived. Similar to the bar chart, the dot chart might be a better choice since it provides better accuracy by using position encoding.`
chart3 = {
const arcs = pie(state_data2);
const height = Math.min(width, 500);
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const arc = d3
.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1);
const arcLabel = d3
.arc()
.innerRadius((Math.min(width, height) / 2) * 0.8)
.outerRadius((Math.min(width, height) / 2) * 0.8);
const color = d3
.scaleOrdinal()
.domain(state_data2.map(d => d.x))
.range(
d3
.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), state_data.length)
.reverse()
);
svg
.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.x))
.attr("d", arc)
.append("title")
.text(d => `${d.data.x}: ${d.data.y.toLocaleString()}`);
svg
.append("g")
.attr("font-family", "serif")
.attr("font-size", 20)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text =>
text
.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.x)
)
.call(text =>
text
.filter(d => d.endAngle - d.startAngle > 0.25)
.append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.y.toLocaleString())
);
return svg.node();
}
pie = d3
.pie()
.sort(null)
.value(d => d.y)
md`## Color`
md`This bar chart uses color to differentiate the x axis values, it might also improve the perception of length in some way. Still the dot chart with color will probably be more accurate since using position encoding and color differentiation.`
chart4 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis2);
svg.append("g").call(yAxis2);
svg
.append("text")
.text("# of Cases in Each State")
.style("font-weight", "bold")
.style("font-size", "15px")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.text("States")
.style("font-size", "12px")
.attr("transform", "translate(450, 550)");
svg
.append("text")
.text("# of Cases")
.style("font-size", "12px")
.attr("transform", "translate(15, 200) rotate(-90)");
svg
.selectAll("rect")
.data(state_data2)
.join(enter => enter.append("rect"))
.attr("x", d => x2(d.x))
.attr("y", d => y2(d.y))
.attr("width", x2.bandwidth())
.attr("fill", d => set_color(d.x))
.attr("opacity", "0.90");
svg
.selectAll("rect")
.transition()
.duration(2000)
.attr("y", d => y2(d.y))
.attr("height", d => y2(0) - y2(d.y));
svg
.append("g")
.attr("transform", "translate(150, 10)")
.append(() =>
legend({
color: set_color,
width: 700,
title: "State names"
})
);
return svg.node();
}
y3 = d3
.scaleLinear()
.domain([
d3.min([d3.min(diffData, d => +d.cases), d3.min(diffData2, d => +d.cases)]),
d3.max([d3.max(diffData, d => +d.cases), d3.max(diffData2, d => +d.cases)])
])
.nice()
.range([height - margin.bottom, margin.top])
y4 = d3
.scaleLinear()
.domain([
0,
d3.max([d3.max(diffData, d => +d.cases), d3.max(diffData2, d => +d.cases)])
])
.nice()
.range([height - margin.bottom, margin.top])
x3 = d3
.scaleTime()
.domain(d3.extent(diffData, d => d.date))
.range([margin.left, width - margin.right])
xDiffAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x3).tickSizeOuter(0))
yDiffAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y4).tickSizeOuter(0))
areas = d3
.area()
.curve(d3.curveCatmullRom)
.x(d => x3(d.date))
md`## Difference Chart`
md`The limitation of Curve Difference Chart is it is hard for people to judge the minimum distance between the curve in different region, so makes an aggregate line chart that can directly showing the difference would be a better choice`
diffChart = {
const svg = d3
.select(DOM.svg(width, diffData, diffData2))
.attr("viewBox", [0, 0, width, 580]);
svg
.append("text")
.text("California Versus Illinois Covid19 Cases")
.style("font-weight", "bold")
.style("font-size", "15px")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(510,550)")
.style("text-anchor", "middle")
.style("font-size", "12px")
.text("Date");
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(10,222)rotate(-90)")
.style("text-anchor", "middle")
.style("font-size", "9px")
.text("Covid19 Cases");
svg
.append('clipPath')
.attr('id', 'high-clip')
.append('path')
.datum(diffData2)
.attr('d', areas.y0(0).y1(d => y3(d.cases)));
svg
.append('clipPath')
.attr('id', 'low-clip')
.append('path')
.datum(diffData2)
.attr('d', areas.y0(height).y1(d => y3(d.cases)));
svg
.append('path')
.datum(diffData)
.attr('clip-path', 'url(#low-clip)')
.attr('fill', '#ffaa00')
.attr('d', areas.y0(0).y1(d => y3(d.cases)));
svg
.append('path')
.datum(diffData)
.attr('clip-path', 'url(#high-clip)')
.attr('fill', '#00bbff')
.attr('d', areas.y0(height).y1(d => y3(d.cases)));
svg
.append('path')
.datum(diffData)
.attr('stroke', '#ff0000')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', areas.lineY0());
svg
.append('path')
.datum(diffData2)
.attr('stroke', '#0000ff')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', areas.lineY1());
xDiffAxis(svg.append('g'));
yDiffAxis(svg.append('g'));
return svg.node();
}
md`## Alternative Chart`
md `The major difference with curve difference graph is, the cartesian chart direectly shows one set of data instead of showing both, which is more accurate when checking position of the data.`
chart5 = {
var svg = d3.select(DOM.svg(width, 600));
svg
.append("text")
.text("California Covid19 Cases")
.style("font-weight", "bold")
.style("font-size", "15px")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(517,580)")
.style("text-anchor", "middle")
.style("font-size", "12px")
.text("Year");
svg
.append("text")
.attr("class", "text")
.attr("transform", "translate(10,265)rotate(-90)")
.style("text-anchor", "middle")
.style("font-size", "9px")
.text("Amazon Minus Google Stock Price");
svg
.append("g")
.call(d3.axisBottom(x1))
.attr("transform", `translate(0, ${600 - margin.bottom})`);
svg
.append("g")
.call(d3.axisLeft(y1))
.attr("transform", `translate(${margin.left}, 0)`);
svg
.append("path")
.attr(
"d",
d3
.line()
.x(d => x1(d.date))
.y(d => y1(d.cases))(formattedData1)
)
.attr("stroke", "steelblue")
.attr("stroke-width", "1.5")
.attr("fill", "none");
return svg.node();
}
import { displayCaution } from "@info474/utilities"
d3 = require('d3@5')
stockData = d3.csv(
"https://raw.githubusercontent.com/vega/datalib/master/test/data/stocks.csv"
)
data = d3.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"
)
state_data = data
.filter(d => d.date == '2020-06-01')
.map(function(d) {
return {
x: d.state,
y: +d.cases,
color: "blue"
};
})
state_data2 = state_data.slice(0, 10)
formattedData = data
.filter(d => (d.state == 'California') | (d.state == 'Illinois'))
.map(d => {
const formatTime = d3.timeParse("%Y-%m-%d");
return {
state: d.state,
cases: +d.cases,
date: formatTime(d.date)
};
})
formattedData1 = formattedData.filter(d => d.state == 'California')
diffData = formattedData.filter(d => d.state == 'California')
diffData2 = formattedData.filter(d => d.state == "Illinois")
formatTime = d3.timeParse("%B %d, %Y")
import { swatches, legend } from "@d3/color-legend"
set_color = d3.scaleOrdinal(state_data2.map(d => d.x), d3.schemeTableau10)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.