Public
Edited
May 15
portfolioData = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vQSz2gGUW3Sgq0hrcpaKM3ToNgEGImWgwJthfp3b9OUmxiEcEN6kMZygz1HZuq1cbbPcxcWXGUicurY/pub?gid=0&single=true&output=csv")
render({
mark: "arc",
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares*datum.Price", as: "Total Value" }
],
encoding: {
row: { field: "Date", type: "T" },
column: { field: "Investor", type: "N" },
color: { field: "Symbol", type: "N" },
theta: { field: "Total Value", type: "Q" },
tooltip: [
{ field: "Symbol", type: "N" },
{ field: "Price", type: "Q" },
{ field: "Shares", type: "Q" },
{ field: "Total Value", type: "Q" }
]
},
width: 150,
height: 200
})
render({
mark: "bar",
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares * datum.Price", as: "Total Value" }
],
encoding: {
x: { field: "Investor", type: "N" },
y: { aggregate: "sum", field: "Total Value", type: "Q" },
color: { field: "Symbol", type: "N" },
tooltip: [
{ field: "Symbol", type: "N" },
{ field: "Price", type: "Q" },
{ field: "Shares", type: "Q" },
{ field: "Total Value", type: "Q" }
]
}
})
render({
mark: { type: "line", point: true },
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares * datum.Price", as: "Total Value" }
],
encoding: {
x: { field: "Date", type: "T" },
y: { aggregate: "sum", field: "Total Value", type: "Q" },
column: { field: "Investor", type: "N" },
tooltip: [
{ field: "Date", type: "T" },
{ aggregate: "sum", field: "Total Value", type: "Q" }
],
},
width: 190,
height: 200
})
import {uniqueValid} from '@uwdata/data-utilities'
uniqueValid(portfolioData, d => d.Company)
uniqueValid(portfolioData, d => d.Investor)
uniqueValid(portfolioData, d => d.Date)
// write your visualization code here
// or add a screenshot in a new cell
render({
mark: "bar",
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares * datum.Price", as: "Total Value" },
{ calculate: "datum.Investor +'-'+datum.Date", as: "Investor-Date"}
],
encoding: {
x: { field: "Investor-Date", type: "N" },
y: { aggregate: "sum", field: "Total Value", type: "Q" },
color: { field: "Symbol", type: "N", scale:{scheme: "darkgold"} },
tooltip: [
{ field: "Symbol", type: "N" },
{ field: "Price", type: "Q" },
{ field: "Shares", type: "Q" },
{ field: "Total Value", type: "Q" }
]
}
})
// write your visualization code here
// or add a screenshot in a new cell
render({
mark: { type: "bar", width: 20},
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares * datum.Price", as: "Total Value" },
{ calculate: "datum.Investor +'-'+datum.Date", as: "Investor-Date"},
{
"calculate": "(datum.Investor === 'Glendale' ? 0 : datum.Investor === 'Maria' ? 3 : datum.Investor === 'Michael' ? 6 : 9) + (datum.Date === 'November 8, 2019' ? 0 : 1)",
"as": "position"
}
],
encoding: {
x: { field: "position", type: "O",
axis:{
labelExpr: "datum.label", // This will be assigned in the axis properties
title: "Investor-Date",
values: [0, 1, 3, 4, 6, 7, 9, 10],
labelAlign: "center",
labelOffset: 5
},
scale: {
domain: [0, 1, 3, 4, 6, 7, 9, 10] // Match with the axis values
}
},
y: { aggregate: "sum", field: "Total Value", type: "Q" },
color: { field: "Symbol", type: "N", scale:{scheme: "turbo"} },
tooltip: [
{ field: "Symbol", type: "N" },
{ field: "Price", type: "Q" },
{ field: "Shares", type: "Q" },
{ field: "Total Value", type: "Q" }
],
},
datasets: {
labels: [
{value: 0, label: "Glendale-November 8, 2019"},
{value: 1, label: "Glendale-November 6, 2023"},
{value: 3, label: "Maria-November 8, 2019"},
{value: 4, label: "Maria-November 6, 2023"},
{value: 6, label: "Michael-November 8, 2019"},
{value: 7, label: "Michael-November 6, 2023"},
{value: 9, label: "Richa-November 8, 2019"},
{value: 10, label: "Richa-November 6, 2023"}
]
}
})
render({
mark: {type: "bar", size: 20},
data: { values: portfolioData },
transform: [
{ calculate: "datum.Shares * datum.Price", as: "Total Value" },
{ calculate: "datum.Investor +'-'+datum.Date", as: "Investor-Date"},
{
"calculate": "(datum.Investor === 'Glendale' ? 0 : datum.Investor === 'Maria' ? 3 : datum.Investor === 'Michael' ? 6 : 9) + (datum.Date === 'November 8, 2019' ? 0 : 1)",
"as": "position"
}
],
encoding: {
x: { field: "position", type: "Q",
axis: {
labelExpr: "datum.value === 0 ? 'Glendale-November 8, 2019' : datum.value === 1 ? 'Glendale-November 6, 2023' : datum.value === 3 ? 'Maria-November 8, 2019' : datum.value === 4 ? 'Maria-November 6, 2023' : datum.value === 6 ? 'Michael-November 8, 2019' : datum.value === 7 ? 'Michael-November 6, 2023' : datum.value === 9 ? 'Richa-November 8, 2019' : datum.value === 10 ? 'Richa-November 6, 2023' : null",
title: "Investor and Date",
labelAngle: 270
}},
y: { aggregate: "sum", field: "Total Value", type: "Q" },
color: { field: "Symbol", type: "N", scale:{scheme: "turbo"} },
tooltip: [
{ field: "Symbol", type: "N" },
{ field: "Price", type: "Q" },
{ field: "Shares", type: "Q" },
{ field: "Total Value", type: "Q" }
]
}
})
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.
