| \(X\) | \(f\) |
|---|---|
| 5 | 1 |
| 4 | 2 |
| 3 | 4 |
| 2 | 5 |
| 1 | 3 |
A number to describe the center of a distribution
Purpose:
Where is the center of the distribution?
Where is the center of the distribution?
Where is the center of the distribution?
Imagine you get the following grades:
How do you fairly describe all these scores with a single number?
Three ways:
| \(X\) | \(f\) |
|---|---|
| 5 | 1 |
| 4 | 2 |
| 3 | 4 |
| 2 | 5 |
| 1 | 3 |
| \(X\) | \(f\) |
|---|---|
| 90-99 | 7 |
| 80-89 | 4 |
| 70-79 | 5 |
| 60-60 | 3 |
| 50-59 | 0 |
| 40-49 | 1 |
Put scores in order
Find the number that gives and equal number of scores on either side
Odd number of scores
1 2 3 4 5
Put scores in order
Find the number that gives and equal number of scores on either side
Even number of scores:
1 2 3 | 4 5 6
(3 + 4) / 2 = 3.5
65 70 70 80 90 90
65 70 80 80 80 90 92 95


Sample: \(M = \dfrac{\Sigma X} n\)
(sometimes \(\overline{X}\))
Population: \(\mu = \dfrac{\Sigma X} N\)
mean, median, mode
people_illustration = {
const w = 650
const h = 400
const personWidth = 80
const data = [
{id: 0, income: "$33,000"},
{id: 1, income: "$34,000"},
{id: 2, income: "$35,000"},
{id: 3, income: "$35,000"},
{id: 4, income: "$35,000"},
{id: 5, income: "$36,000"},
{id: 6, income: "$37,000"},
]
const svg = d3.select("#distributions-people-container")
.append("svg").attr("width", w).attr("height", h).attr("class", "invertable")
const imgs = svg.selectAll("image")
.data(data)
.enter()
.append("svg:image")
.attr('x', d => 50 + d.id * personWidth)
.attr('y', 50)
.attr('width', personWidth)
.attr("xlink:href", "media/person.svg")
const incomes = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr('text-anchor', 'middle')
.attr('x', d => 50 + personWidth/2 + d.id * personWidth)
.attr('y', 30)
.style('font-size', '0.5em')
.text(d => d.income)
const mean1 = svg.append("g").selectAll("text")
.data(['median: $35,000', '<tspan style="font-family: Times; font-style: italic">M</tspan> = $35,000'])
.enter()
.append("text")
.attr('text-anchor', 'middle')
.attr('x', personWidth * 7/2)
.attr('y', function(d,i){return 250 + i*50})
.style('font-size', '0.8em')
.html(d => d)
}
monopoly_man = {
const w = 400
const h = 400
const personWidth = 80
const svg = d3.select("#distributions-monopoly-man-container")
.append("svg").attr("width", w).attr("height", h).attr("class", "invertable")
svg.append("svg:image")
.attr('x', 100)
.attr('y', 30)
.attr('width', 200)
<!-- .attr('height', 210) -->
.attr("xlink:href", "media/monopoly-man.svg")
svg.append("text")
.attr('text-anchor', 'middle')
.style('font-size', '0.5em')
.attr('x', w/2)
.attr('y', 30)
.text("$1 billion")
const new_mean = svg.append("g").selectAll("text")
.data(['new median: $35,000', 'new <tspan style="font-family: Times; font-style: italic">M</tspan> = $125 million'])
.enter()
.append("text")
.attr('text-anchor', 'middle')
.attr('x', w/2)
.attr('y', function(d,i){return 250 + i*50})
.style('font-size', '0.8em')
.html(d => d)
}