kkdd

Drawing cumulative density function (CDF).

direct CDF (red line)
via-histogram CDF (blue line)

Imspired by https://bl.ocks.org/jltran/bcd2a30fd9c08f8b9f87.

d3.js_lines_multiple (with tooltip)

Imspired by https://www.goodmarketing.club/guide/d3-js-multiple-lines-chart-w-line-by-line-code-explanations/ .

executed in order of waitTimes = [600, 400, 200].

Run this example in a full screen, or click "Open".

references:

Efficiently loading massive D3 datasets using Apache Arrow (Chris Price, scottlogic.com)
regl (GitHub)

Run this example in a full screen, or click "Open".

references

sample data

$ cat xy5.csv
x,y,color

Run this example in a full screen, or click "Open".

data

$ curl https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv | head -n4
date,value
2013-04-28,135.98
2013-04-29,147.49

getting trips-json files

$ cat trips.json 
[{"vendor":0,"path":[[139.8007914,35.5144044],[139.9108676,35.4396142]],"timestamps":[0,600]},{"vendor":1,"path":[[139.9108139,35.439529],[139.8008987,35.5140027]],"timestamps":[0,600]}]
$ wget https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
	<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
	<style>
	html, body {height: 100%; margin: 0; padding: 0;}
	#map {height: 100%;}
	</style>
	</head>

	<html lang="en">
	<head>
	<title>streaming GeoJSONL/flatgeobuf by dropping-on</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	<script src="https://unpkg.com/flatgeobuf@3.21.3/dist/flatgeobuf-geojson.min.js"></script>
	<style>
	body { margin:0; padding:0; }