The end-to-end solution for building and hosting better data apps, dashboards, and reports.
dataAnalystExcelMeetup = FileAttachment("Data Analyst Excel Meetup.xlsx").xlsx()
dataAnalystExcelMeetup.sheetNames
ourData = dataAnalystExcelMeetup.sheet(0, {
headers: true
})
viewof table = Inputs.table(ourData)
neighborhoods = new Set(ourData.map(d => d.neighborhood))
newData = ourData.map(d => {
let apartmentType = ''
if(+d.medianAskingPrice > luxRange) {
apartmentType = 'Luxury'
} else if(+d.medianAskingPrice < affordableRange) {
apartmentType = 'More Affordable'
} else {
apartmentType = 'Neither Luxury nor Affordable'
}
return {
...d,
goodDeal: d.medianRecordedSalesPrice * d.priceCutShare,
type: apartmentType
}
})
Inputs.table(newData, { format: {
'medianAskingPrice': d => formatMoney(d),
}})
Plot.plot({
marks: [
// Plot.ruleY([0]),
Plot.lineY(newData, {x: "date", y: "medianAskingPrice", stroke: "neighborhood"}),
Plot.dotY(newData, {x: "date", y: "medianAskingPrice", fill: "neighborhood"})
],
marginLeft: 100,
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(newData, { x: "date", y: "medianAskingPrice", stroke: "neighborhood"}),
Plot.dot(newData, {x: "date", y: "medianAskingPrice", fill: "neighborhood"}),
],
color: { legend: true },
marginLeft: 100,
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(newData, {
x: "date",
y: "goodDeal",
stroke: "neighborhood",
strokeWidth: 2,
mixBlendMode: 'multiply',
curve: 'basis'
}),
Plot.text([newData[newData.length - 1]], { // Get the last value and put it in an array
x: "date",
y: "goodDeal",
stroke: "neighborhood",
strokeWidth: 2,
mixBlendMode: 'multiply',
curve: 'basis'
})
],
color: { legend: true },
marginLeft: 100,
})
Plot.plot({
facet: {
data: newData,
y: 'type',
marginLeft: 50,
label: null,
marginRight: 200
},
fy: {
domain: ['Luxury', 'Neither Luxury nor Affordable', 'More Affordable'],
},
marks: [
Plot.ruleY([0]),
Plot.line(newData, { x: "date", y: "totalInventory", stroke: "neighborhood"}),
Plot.dot(newData, {x: "date", y: "totalInventory", fill: "neighborhood"}),
],
color: { legend: true },
marginLeft: 100,
})
mortgageData = {
const numberPayments = duration * 12;
const mortgage = purchasePrice - downPayment;
const monthlyInterestRate = (interestRate / 100) / 12;
// We use "let" here since the value will change, i.e. we make mortgage payments each month, so our total
let mortgageRemaining = mortgage;
let totalInterestPaid = 0;
let totalPrincipalPaid = 0;
// Calculate the monthly mortage payment. To get a monthly payment, we divide the interest rate by 12
const monthlyMortgagePayment = financial.pmt(monthlyInterestRate, numberPayments, mortgage) * -1;
// Multiply by -1, since it default to a negative value
// This is the array we will show in our table cell. Here we loop through each payment
// and figure out what values will be.
const mortgageArray = d3.range(numberPayments).map((d,i) => {
// The interest payment portion of that month
const monthlyInterestPayment = financial.ipmt(monthlyInterestRate, i + 1, numberPayments, mortgage) * -1;
const monthlyPrincipalPayment = monthlyMortgagePayment - monthlyInterestPayment;
// Calculate the remaining mortgage amount, which you do by subtracting the principal payment
mortgageRemaining = mortgageRemaining - monthlyPrincipalPayment;
// Add to the total interest and principal amounts paid
totalInterestPaid += monthlyInterestPayment;
totalPrincipalPaid += monthlyPrincipalPayment;
// Return object, which contains all the key-value pairs
return { 'Payment #': (i + 1), // We add 1 since indexes start at 0
'Monthly Payment': monthlyMortgagePayment,
'Interest Payment': monthlyInterestPayment,
'Percent Interest': monthlyInterestPayment / monthlyMortgagePayment,
'Principal Payment': monthlyPrincipalPayment,
'Percent Principal': monthlyPrincipalPayment / monthlyMortgagePayment,
'Total Interest Paid': totalInterestPaid,
'Total Principal Paid': totalPrincipalPaid,
'Total Amount Paid': totalPrincipalPaid + totalInterestPaid,
'Total Mortgage Remaining': mortgageRemaining
}
});
return mortgageArray
}
chart = SankeyChart({
links: sankeyData
}, {
width,
height: 600,
nodeGroup: d => d.id
})
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.
