Public
Edited
Mar 22, 2023
viewof childYear = Inputs.number({
label: "Child's Birth Year",
placeholder: "Input a year",
step: 1
})
birthYears = ({
child: 2025,
mom: 1993,
dad: 1994,
mGma: 1965,
mGpa: 1964,
pGma: 1958,
pGpa: 1957
})
ppl = ({
child: {
name: "child",
birthYear: childYear,
age: getAge(childYear, yearToCalc)
}
})
currentYear = {
let today = new Date();
let currentYear = today.getFullYear();
return currentYear;
}
function getAge(birthYear, _currentYear) {
return _currentYear - birthYear;
}
getAge(1993, 2023)
viewof yearToCalc = Inputs.text({
label: "In the year...",
placeholder: "Input a year"
})
// Get ages of everyone in the yearToCalc
ages = {
let childAge = yearToCalc - birthYears.child;
return childAge;
}
vars = {
const childBirthYear = 2020;
const grandparentBirthYear = 1950;
const childAgeAtBirth = childBirthYear - grandparentBirthYear;
const grandparentAgeAtBirth = grandparentBirthYear - 1900;
// Export the variables so that they can be used in other cells
return {
childBirthYear,
grandparentBirthYear,
childAgeAtBirth,
grandparentAgeAtBirth
};
}
{
const width = 500;
const height = 100;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const xScale = d3.scaleLinear().domain([0, 30]).range([0, width]);
const childAgeRange = [vars.childAgeAtBirth, vars.childAgeAtBirth + 30];
const grandparentAgeRange = [
vars.grandparentAgeAtBirth,
vars.grandparentAgeAtBirth + 30
];
svg
.append("rect")
.attr("x", xScale(childAgeRange[0]))
.attr("y", height / 4)
.attr("width", xScale(childAgeRange[1]) - xScale(childAgeRange[0]))
.attr("height", height / 2)
.style("fill", "lightblue");
svg
.append("rect")
.attr("x", xScale(grandparentAgeRange[0]))
.attr("y", height / 4)
.attr(
"width",
xScale(grandparentAgeRange[1]) - xScale(grandparentAgeRange[0])
)
.attr("height", height / 2)
.style("fill", "pink");
svg
.append("text")
.attr("x", xScale(childAgeRange[0]))
.attr("y", height / 2 + 20)
.text("Child Age");
svg
.append("text")
.attr("x", xScale(grandparentAgeRange[0]))
.attr("y", height / 2 - 10)
.text("Grandparent Age");
// Export the SVG element so that it can be displayed in another cell
return svg.node();
}
viewof selectedYearRange = rangeSlider({
min: currentYear - 5,
max: currentYear + 40,
value: this ? this.value : [currentYear - 5, currentYear + 40],
separator: " to ",
precision: 1,
theme: sliderTheme,
// format: ",d",
title: "Year",
// description: 'Select the min and max temperature of states to display.',
step: 1
})
viewof selectedWinterTempRange = rangeSlider({
min: 2024,
max: maxSummerTemp,
value: this ? this.value : [minWinterTemp, maxWinterTemp],
separator: " to ",
precision: 1,
theme: sliderTheme,
// format: ",d",
title: "Average January temperature",
// description: 'Select the min and max temperature of states to display.',
step: 1
})
dadBirthYear = 1994
import { rangeSlider } from "@mootari/range-slider"
import { sliderTheme } from "@swoloszynski/full-width-slider-theme"
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.
