viewof scheme = Inputs.select(["warm","cool"])
schemeColors =({
warm:{tl:"red",tr:"orange",bl:"yellow",br:"gold"},cool:{tl:"blue",tr:"green",bl:"teal",br:"indigo"}, "key with space": "hello"
})
[d3.interpolateRgb("green","yellow")(.25),d3.interpolateRgb("green","yellow")(.5)]
schemeColors["warm"]
<svg> <rect width=100 height=100 fill="${d3.interpolateViridis(0)}" </svg>
{
const height = width;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", bkgdColor);
//BLOCKS////////////////////////////////
//upper left
svg
.append("rect")
.attr("x", margin*2)
.attr("y", margin*2)
.attr("width", (width/2-2*margin))
.attr("height", (width/2-2*margin))
.attr("fill", quadColors.topLeft);
//bottom left
svg
.append("rect")
.attr("x", margin*2)
.attr("y", height/2)
.attr("width", (width/2-2*margin))
.attr("height", (width/2-2*margin))
.attr("fill", "#81667A");
//bottom right
svg
.append("rect")
.attr("x", width/2)
.attr("y", height/2)
.attr("width", (width/2-2*margin))
.attr("height", (width/2-2*margin))
.attr("fill", quadColors.bottomRight);
//upper right
svg
.append("rect")
.attr("x", width/2)
.attr("y", margin*2)
.attr("width", (width/2-2*margin))
.attr("height", (width/2-2*margin))
.attr("fill", "#e1c012");
//LINES////////////////////////////////
svg
.append("line")
.attr("x1", (width/2))
.attr("y1", margin*2)
.attr("x2", (width/2))
.attr("y2", height - margin*2)
.attr("stroke", "white")
.attr("stroke-width", strokeWidth);
svg
.append("line")
.attr("x1", margin*2)
.attr("y1", (height/2))
.attr("x2", width - margin*2)
.attr("y2", (height/2))
.attr("stroke", "white")
.attr("stroke-width", strokeWidth);
//TEXT////////////////////////////////
//top
svg
.append("text")
.attr("x", width / 2)
.attr("y", margin)
.attr("fill", "white")
.text("Y Max")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-family", fontType)
.attr("font-size", 14);
//left
svg
.append("text")
.attr("x", margin)
.attr("y", height/2)
.attr("fill", "white")
.text("X Min")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-family", fontType)
.attr("font-size", 14);
//bottom
svg
.append("text")
.attr("x", width/2)
.attr("y", height-margin)
.attr("fill", "white")
.text("Y Min")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-family", fontType)
.attr("font-size", 14);
//right
svg
.append("text")
.attr("x", width-margin)
.attr("y", height/2)
.attr("fill", "white")
.text("X Max")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-family", fontType)
.attr("font-size", 14);
//CIRCLES////////////////////////////////
//large circle
svg
.append("circle")
//remember that x is a percentage slider above
.attr("cx", cirX * width)
//and y is a pixel value, so no additional calculation needed
.attr("cy", cirY)
.attr("r", 25)
.attr("stroke", "white")
.attr("fill", cirColor)
.attr("stroke-width", strokeWidth);
//smaller circles
//left
svg
.append("circle")
.attr("cx", margin*2)
.attr("cy", height/2)
.attr("r", 12)
.attr("stroke", "white")
.attr("fill", bkgdColor)
.attr("stroke-width", strokeWidth*0.67);
//top
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", margin*2)
.attr("r", 12)
.attr("stroke", "white")
.attr("fill", bkgdColor)
.attr("stroke-width", strokeWidth*0.67);
//right
svg
.append("circle")
.attr("cx", width-(2*margin))
.attr("cy", height/2)
.attr("r", 12)
.attr("stroke", "white")
.attr("fill", bkgdColor)
.attr("stroke-width", strokeWidth*0.67);
//bottom
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", height-(2*margin))
.attr("r", 12)
.attr("stroke", "white")
.attr("fill", bkgdColor)
.attr("stroke-width", strokeWidth*0.67);
return svg.node();
}
viewof metroCost = Inputs.range([0, 10], {
label: "Cost of Roundtrip Metro Ride",
step: 0.25,
value: 0
})
viewof passCost = Inputs.range([0, 200], {
label: "Cost of UPass",
step: 5,
value: 0
})
viewof tripsNumber = Inputs.range([0, 100], {
label: "Number of Roundtrip Rides ",
step: 1,
value: 0
})
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.
