Public
Edited
Oct 14, 2023
1 star
users_comparison
Type Table, then Shift-Enter. Ctrl-space for more options.
users_comparison = {
const numUsers = [200, 4000, 16000];
return numUsers.map(num => {
const users = d3.range(num).map(createUser);
const message = new Users({ users });
const jsonSize = calcSize(message.toJson());
const protoSize = message.toBinary().length;
const diff = jsonSize - protoSize;
const decrease = (diff / jsonSize * 100).toFixed();
return { 'Num Users': num, 'Json Size': formatByteSize(jsonSize), 'Protobuf Size': formatByteSize(protoSize), 'Percent decrease': decrease }
});
}
numbersData
Type Table, then Shift-Enter. Ctrl-space for more options.
numbersData = {
return Object.values(Numbers).flatMap(type => {
return [1, 10, 100, 1000, 10_000, 100_000, 1_000_000, 1_000_000_000]
.map(number => {
const instance = new type({ number });
const binary = instance.toBinary();
return { Type: instance.getType().typeName.split('.')[1], 'Number': number, 'Byte Size': binary.length, Uint8Array: binary }
});
});
}
Numbers = ['Double', 'Float', 'Int64', 'Int32', 'Fixed64', 'Fixed32', 'Uint32', 'Uint64', 'SFixed32', 'SFixed64', 'SInt32', 'SInt64'].reduce((acc, curr) => {
return {
...acc,
[curr]: createProtobufType({ namespace: 'Numbers', type: curr, properties: [{ name: 'number', type: FieldType[curr.toUpperCase()] }] })
}
}, {});
{
const i64 = new Numbers.Int64({ number: 64 });
return i64.toBinary();
}
function createProtobufType({ namespace, type, properties }) {
const _Class = class extends Protobuf.Message {
constructor(data){
super();
for(const property of properties){
this[property.name] = property.defaultValue ?? property.type.defaultValue;
}
Protobuf.proto3.util.initPartial(data, this);
}
static fromBinary(bytes, options) {
return new _Class().fromBinary(bytes, options);
}
static fromJson(jsonValue, options) {
return new _Class().fromJson(jsonValue, options);
}
static fromJsonString(jsonString, options) {
return new _Class().fromJsonString(jsonString, options);
}
static equals(a, b) {
return Protobuf.proto3.util.equals(_Class, a, b);
}
};
_Class.runtime = Protobuf.proto3;
_Class.typeName = `${namespace}.${type}`;
_Class.fields = Protobuf.proto3.util.newFieldList(() => properties.map((property, i) => {
const { name, no: _no, type = {}, ...rest } = property;
const no = _no ?? i + 1;
return { no, name, ...type, ...rest }
}));
return _Class;
}
FieldType = ({
DOUBLE: { kind: 'scalar', T: 1 },
FLOAT: { kind: 'scalar', T: 2 },
INT64: { kind: 'scalar', T: 3 },
UINT64: { kind: 'scalar', T: 4 },
INT32: { kind: 'scalar', T: 5 },
FIXED64: { kind: 'scalar', T: 6 },
FIXED32: { kind: 'scalar', T: 7 },
BOOL: { kind: 'scalar', T: 8, defaultValue: false },
STRING: { kind: 'scalar', T: 9, defaultValue: '' },
BYTES: { kind: 'scalar', T: 12 },
UINT32: { kind: 'scalar', T: 13 },
SFIXED32: { kind: 'scalar', T: 15 },
SFIXED64: { kind: 'scalar', T: 16 },
SINT32: { kind: 'scalar', T: 17 },
SINT64: { kind: 'scalar', T: 18 },
MAP: function(k, v) {
return { kind: 'map', K: k.T, V: v, defaultValue: {} };
},
ARRAY: function(type) {
return { repeated: true, ...type, defaultValue: [] };
},
MESSAGE: function(type) {
return { kind: 'message', T: type };
},
});
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.
