Working with JavaScript and TypeScript

Difficulty level: easy
Time need to lean: 10 minutes or less
- SoS replies on JSON format to convert between complex data types to and from JavaScript

JavaScript

SoS exchange data with a JavaScript kernel using JSON format. It passes all JSON serializable datatypes using the json module, and convert numpy arrays to list before translation (array.tolist()), and use DataFrame.to_jason to translate Pandas DataFrame to a list of records in JS.

Python	condition	JavaScript
`None`		`null`
`boolean`, `int`, `str`, etc		corresponding JS type
`numpy.ndarray`		array
`numpy.matrix`		nested array
`pandas.DataFrame`		table with scheme and array of records (dictionary)

Translation from JavaScript to Python is easier because Python supports all JSON serializable JS datatypes.

The DataFrame translation is particularly interesting because it allows you to pass complex datatypes in Python and R for visualization. For example, for the following data.frame in R,

In [25]:

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160.0	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160.0	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108.0	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258.0	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360.0	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225.0	105	2.76	3.460	20.22	1	0	3	1
Duster 360	14.3	8	360.0	245	3.21	3.570	15.84	0	0	3	4
Merc 240D	24.4	4	146.7	62	3.69	3.190	20.00	1	0	4	2
Merc 230	22.8	4	140.8	95	3.92	3.150	22.90	1	0	4	2
Merc 280	19.2	6	167.6	123	3.92	3.440	18.30	1	0	4	4
Merc 280C	17.8	6	167.6	123	3.92	3.440	18.90	1	0	4	4
Merc 450SE	16.4	8	275.8	180	3.07	4.070	17.40	0	0	3	3
Merc 450SL	17.3	8	275.8	180	3.07	3.730	17.60	0	0	3	3
Merc 450SLC	15.2	8	275.8	180	3.07	3.780	18.00	0	0	3	3
Cadillac Fleetwood	10.4	8	472.0	205	2.93	5.250	17.98	0	0	3	4
Lincoln Continental	10.4	8	460.0	215	3.00	5.424	17.82	0	0	3	4
Chrysler Imperial	14.7	8	440.0	230	3.23	5.345	17.42	0	0	3	4
Fiat 128	32.4	4	78.7	66	4.08	2.200	19.47	1	1	4	1
Honda Civic	30.4	4	75.7	52	4.93	1.615	18.52	1	1	4	2
Toyota Corolla	33.9	4	71.1	65	4.22	1.835	19.90	1	1	4	1
Toyota Corona	21.5	4	120.1	97	3.70	2.465	20.01	1	0	3	1
Dodge Challenger	15.5	8	318.0	150	2.76	3.520	16.87	0	0	3	2
AMC Javelin	15.2	8	304.0	150	3.15	3.435	17.30	0	0	3	2
Camaro Z28	13.3	8	350.0	245	3.73	3.840	15.41	0	0	3	4
Pontiac Firebird	19.2	8	400.0	175	3.08	3.845	17.05	0	0	3	2
Fiat X1-9	27.3	4	79.0	66	4.08	1.935	18.90	1	1	4	1
Porsche 914-2	26.0	4	120.3	91	4.43	2.140	16.70	0	1	5	2
Lotus Europa	30.4	4	95.1	113	3.77	1.513	16.90	1	1	5	2
Ford Pantera L	15.8	8	351.0	264	4.22	3.170	14.50	0	1	5	4
Ferrari Dino	19.7	6	145.0	175	3.62	2.770	15.50	0	1	5	6
Maserati Bora	15.0	8	301.0	335	3.54	3.570	14.60	0	1	5	8
Volvo 142E	21.4	4	121.0	109	4.11	2.780	18.60	1	1	4	2

It appears in SoS as a pandas DataFrame

In [26]:

Out[26]:

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6.0	160.0	110.0	3.90	2.620	16.46	0.0	1.0	4.0	4.0
Mazda RX4 Wag	21.0	6.0	160.0	110.0	3.90	2.875	17.02	0.0	1.0	4.0	4.0
Datsun 710	22.8	4.0	108.0	93.0	3.85	2.320	18.61	1.0	1.0	4.0	1.0
Hornet 4 Drive	21.4	6.0	258.0	110.0	3.08	3.215	19.44	1.0	0.0	3.0	1.0
Hornet Sportabout	18.7	8.0	360.0	175.0	3.15	3.440	17.02	0.0	0.0	3.0	2.0
Valiant	18.1	6.0	225.0	105.0	2.76	3.460	20.22	1.0	0.0	3.0	1.0
Duster 360	14.3	8.0	360.0	245.0	3.21	3.570	15.84	0.0	0.0	3.0	4.0
Merc 240D	24.4	4.0	146.7	62.0	3.69	3.190	20.00	1.0	0.0	4.0	2.0
Merc 230	22.8	4.0	140.8	95.0	3.92	3.150	22.90	1.0	0.0	4.0	2.0
Merc 280	19.2	6.0	167.6	123.0	3.92	3.440	18.30	1.0	0.0	4.0	4.0
Merc 280C	17.8	6.0	167.6	123.0	3.92	3.440	18.90	1.0	0.0	4.0	4.0
Merc 450SE	16.4	8.0	275.8	180.0	3.07	4.070	17.40	0.0	0.0	3.0	3.0
Merc 450SL	17.3	8.0	275.8	180.0	3.07	3.730	17.60	0.0	0.0	3.0	3.0
Merc 450SLC	15.2	8.0	275.8	180.0	3.07	3.780	18.00	0.0	0.0	3.0	3.0
Cadillac Fleetwood	10.4	8.0	472.0	205.0	2.93	5.250	17.98	0.0	0.0	3.0	4.0
Lincoln Continental	10.4	8.0	460.0	215.0	3.00	5.424	17.82	0.0	0.0	3.0	4.0
Chrysler Imperial	14.7	8.0	440.0	230.0	3.23	5.345	17.42	0.0	0.0	3.0	4.0
Fiat 128	32.4	4.0	78.7	66.0	4.08	2.200	19.47	1.0	1.0	4.0	1.0
Honda Civic	30.4	4.0	75.7	52.0	4.93	1.615	18.52	1.0	1.0	4.0	2.0
Toyota Corolla	33.9	4.0	71.1	65.0	4.22	1.835	19.90	1.0	1.0	4.0	1.0
Toyota Corona	21.5	4.0	120.1	97.0	3.70	2.465	20.01	1.0	0.0	3.0	1.0
Dodge Challenger	15.5	8.0	318.0	150.0	2.76	3.520	16.87	0.0	0.0	3.0	2.0
AMC Javelin	15.2	8.0	304.0	150.0	3.15	3.435	17.30	0.0	0.0	3.0	2.0
Camaro Z28	13.3	8.0	350.0	245.0	3.73	3.840	15.41	0.0	0.0	3.0	4.0
Pontiac Firebird	19.2	8.0	400.0	175.0	3.08	3.845	17.05	0.0	0.0	3.0	2.0
Fiat X1-9	27.3	4.0	79.0	66.0	4.08	1.935	18.90	1.0	1.0	4.0	1.0
Porsche 914-2	26.0	4.0	120.3	91.0	4.43	2.140	16.70	0.0	1.0	5.0	2.0
Lotus Europa	30.4	4.0	95.1	113.0	3.77	1.513	16.90	1.0	1.0	5.0	2.0
Ford Pantera L	15.8	8.0	351.0	264.0	4.22	3.170	14.50	0.0	1.0	5.0	4.0
Ferrari Dino	19.7	6.0	145.0	175.0	3.62	2.770	15.50	0.0	1.0	5.0	6.0
Maserati Bora	15.0	8.0	301.0	335.0	3.54	3.570	14.60	0.0	1.0	5.0	8.0
Volvo 142E	21.4	4.0	121.0	109.0	4.11	2.780	18.60	1.0	1.0	4.0	2.0

we can get the data from the JS script kernel as follows:

In [27]:

Out[27]:

{ mpg: 21,
  cyl: 6,
  disp: 160,
  hp: 110,
  drat: 3.9,
  wt: 2.62,
  qsec: 16.46,
  vs: 0,
  am: 1,
  gear: 4,
  carb: 4 }

TypeScript

SoS exchange data with a JypeScript kernel using JSON format. It passes all JSON serializable datatypes using the json module, and convert numpy arrays to list before translation (array.tolist()), and use DataFrame.to_jason to translate Pandas DataFrame to a list of records in JS.

Python	condition	TypeScript
`None`		`null`
`boolean`, `int`, `str`, etc		corresponding JS type
`numpy.ndarray`		array
`numpy.matrix`		nested array
`pandas.DataFrame`		table with scheme and array of records (dictionary)

Translation from TypeScript to Python is easier because Python supports all JSON serializable TS datatypes.

The DataFrame translation is particularly interesting because it allows you to pass complex datatypes in Python and R for visualization. For example, for the following data.frame in R,

In [1]:

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160.0	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160.0	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108.0	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258.0	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360.0	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225.0	105	2.76	3.460	20.22	1	0	3	1
Duster 360	14.3	8	360.0	245	3.21	3.570	15.84	0	0	3	4
Merc 240D	24.4	4	146.7	62	3.69	3.190	20.00	1	0	4	2
Merc 230	22.8	4	140.8	95	3.92	3.150	22.90	1	0	4	2
Merc 280	19.2	6	167.6	123	3.92	3.440	18.30	1	0	4	4
Merc 280C	17.8	6	167.6	123	3.92	3.440	18.90	1	0	4	4
Merc 450SE	16.4	8	275.8	180	3.07	4.070	17.40	0	0	3	3
Merc 450SL	17.3	8	275.8	180	3.07	3.730	17.60	0	0	3	3
Merc 450SLC	15.2	8	275.8	180	3.07	3.780	18.00	0	0	3	3
Cadillac Fleetwood	10.4	8	472.0	205	2.93	5.250	17.98	0	0	3	4
Lincoln Continental	10.4	8	460.0	215	3.00	5.424	17.82	0	0	3	4
Chrysler Imperial	14.7	8	440.0	230	3.23	5.345	17.42	0	0	3	4
Fiat 128	32.4	4	78.7	66	4.08	2.200	19.47	1	1	4	1
Honda Civic	30.4	4	75.7	52	4.93	1.615	18.52	1	1	4	2
Toyota Corolla	33.9	4	71.1	65	4.22	1.835	19.90	1	1	4	1
Toyota Corona	21.5	4	120.1	97	3.70	2.465	20.01	1	0	3	1
Dodge Challenger	15.5	8	318.0	150	2.76	3.520	16.87	0	0	3	2
AMC Javelin	15.2	8	304.0	150	3.15	3.435	17.30	0	0	3	2
Camaro Z28	13.3	8	350.0	245	3.73	3.840	15.41	0	0	3	4
Pontiac Firebird	19.2	8	400.0	175	3.08	3.845	17.05	0	0	3	2
Fiat X1-9	27.3	4	79.0	66	4.08	1.935	18.90	1	1	4	1
Porsche 914-2	26.0	4	120.3	91	4.43	2.140	16.70	0	1	5	2
Lotus Europa	30.4	4	95.1	113	3.77	1.513	16.90	1	1	5	2
Ford Pantera L	15.8	8	351.0	264	4.22	3.170	14.50	0	1	5	4
Ferrari Dino	19.7	6	145.0	175	3.62	2.770	15.50	0	1	5	6
Maserati Bora	15.0	8	301.0	335	3.54	3.570	14.60	0	1	5	8
Volvo 142E	21.4	4	121.0	109	4.11	2.780	18.60	1	1	4	2

we can get the data from the TS script kernel as follows:

In [3]:

Out[3]:

{ mpg: 21,
  cyl: 6,
  disp: 160,
  hp: 110,
  drat: 3.9,
  wt: 2.62,
  qsec: 16.46,
  vs: 0,
  am: 1,
  gear: 4,
  carb: 4 }