Interactive Scatterplot

points.json

[{"x":0.6637748924084008,"y":0},{"x":0.5484188553850314,"y":0.03450358980217672},{"x":0.5020185263552955,"y":0.06341968840289566},{"x":0.6472019204947352,"y":0.12346036922982045},{"x":0.5422740055349533,"y":0.13923229998318315},{"x":0.542361580132391,"y":0.17622395986501554},{"x":0.5172319678655009,"y":0.20478662312351467},{"x":0.5540400939258396,"y":0.26071147856098104},{"x":0.5490470439370002,"y":0.3018411666770542},{"x":0.5684781311835868,"y":0.36076719228093795},{"x":0.5066444671421548,"y":0.36809875195739017},{"x":0.48183612733450015,"y":0.3986095106998535},{"x":0.368753317696321,"y":0.3462824145444211},{"x":0.473555317706156,"y":0.5042851937677},{"x":0.4279284301086809,"y":0.5172766128381666},{"x":0.3589884886314056,"y":0.49410526540953786},{"x":0.319101275744127,"y":0.5028231523670745},{"x":0.25797378733955306,"y":0.4692525771461689},{"x":0.2619193247917344,"y":0.5566068978227308},{"x":0.2510536220102807,"y":0.6340890677894512},{"x":0.19812217061286364,"y":0.6097573428446372},{"x":0.12535973771871445,"y":0.48824394277584426},{"x":0.1305770209988233,"y":0.6845087155507019},{"x":0.06917076516388695,"y":0.5475429865539546},{"x":0.036358567112442085,"y":0.5779028754273969},{"x":0,"y":0.6777900277636946},{"x":-0.041820816002291504,"y":0.6647228353554616},{"x":-0.06811112981971087,"y":0.5391551091084247},{"x":-0.09407296104155645,"y":0.4931477317987467},{"x":-0.14000756217517374,"y":0.5452934524179057},{"x":-0.16011329393518,"y":0.4927780488272063},{"x":-0.19422003685763659,"y":0.49054381741621944},{"x":-0.2871230811793018,"y":0.6101676065162132},{"x":-0.2644974015458848,"y":0.4811189873353528},{"x":-0.35654691647419146,"y":0.5618280406126281},{"x":-0.312423505555612,"y":0.4300140645769696},{"x":-0.38003417863813255,"y":0.45938240803197355},{"x":-0.3981673842820754,"y":0.4240051986054478},{"x":-0.3741488262708924,"y":0.351349134346618},{"x":-0.4352871879857293,"y":0.3601008790618413},{"x":-0.44896724136057237,"y":0.32619379452970343},{"x":-0.5693525709824253,"y":0.3613221286518218},{"x":-0.49625898502395954,"y":0.2728206857093839},{"x":-0.4974518224063328,"y":0.2340830592483607},{"x":-0.5968207083433835,"y":0.2362980346636414},{"x":-0.52559987125473,"y":0.17077775050814153},{"x":-0.5207302249074848,"y":0.1337007972807138},{"x":-0.5176710485762062,"y":0.09875103390909448},{"x":-0.5684269091775649,"y":0.07180901812844427},{"x":-0.5958968927020848,"y":0.0374906547218355},{"x":-0.5419224836863578,"y":6.636636348542299e-17},{"x":-0.5665988083372132,"y":-0.035647375492850214},{"x":-0.5277520506244094,"y":-0.0666705885290407},{"x":-0.652728861830516,"y":-0.12451468967668429},{"x":-0.5785658351417615,"y":-0.14855045806411282},{"x":-0.6197973910520616,"y":-0.20138438002658363},{"x":-0.5307344918912957,"y":-0.21013265057479105},{"x":-0.5605940936519508,"y":-0.2637955567311635},{"x":-0.5399456889167111,"y":-0.2968376544133923},{"x":-0.42874701569050166,"y":-0.27209112992165596},{"x":-0.44950214076040595,"y":-0.32658242169188656},{"x":-0.38802055280106346,"y":-0.3209985177930515},{"x":-0.465892354957826,"y":-0.4375020422879084},{"x":-0.4670648765433245,"y":-0.49737357593329273},{"x":-0.41263731170922363,"y":-0.4987928258876951},{"x":-0.40969027020470966,"y":-0.563890280902712},{"x":-0.3407030520740863,"y":-0.5368621051905298},{"x":-0.2949107341149531,"y":-0.5364406339058015},{"x":-0.2574780034610201,"y":-0.547168609563213},{"x":-0.2574564749256909,"y":-0.6502608282437149},{"x":-0.19828192358582222,"y":-0.6102490119395263},{"x":-0.1464641686677007,"y":-0.57044027442177},{"x":-0.10267933955608215,"y":-0.5382639479404385},{"x":-0.07964463861715536,"y":-0.6304522320683411},{"x":-0.037674711188213306,"y":-0.5988223864607323},{"x":-1.0090446057949444e-16,"y":-0.5492982999421656},{"x":0.03465956961678497,"y":-0.5508980835430648},{"x":0.08354860695379737,"y":-0.6613553235318025},{"x":0.11095588488377245,"y":-0.5816511179655969},{"x":0.14832048719837296,"y":-0.5776701577555782},{"x":0.16525977783644752,"y":-0.5086172976044745},{"x":0.2375377299930711,"y":-0.5999518213282784},{"x":0.21832972834501577,"y":-0.4639742901491859},{"x":0.27548278065641785,"y":-0.5011013177562346},{"x":0.372256162742426,"y":-0.5865818518015197},{"x":0.36105740172744627,"y":-0.4969528799899547},{"x":0.3535146527352871,"y":-0.4273258079841249},{"x":0.3858142676396901,"y":-0.41085046549039217},{"x":0.4115544255518469,"y":-0.3864753301389964},{"x":0.4536397284245915,"y":-0.37528342090423705},{"x":0.4961667873958228,"y":-0.3604862720268597},{"x":0.45263245814927144,"y":-0.28724929263637206},{"x":0.608363226776196,"y":-0.3344505141432198},{"x":0.5161201401120995,"y":-0.24286770275101685},{"x":0.46784443127649034,"y":-0.18523271410240305},{"x":0.5428233945055313,"y":-0.17637401245085244},{"x":0.6420318436718248,"y":-0.16484575942135948},{"x":0.5411818817216327,"y":-0.10323596519424315},{"x":0.5664565319711287,"y":-0.07156010160065093},{"x":0.4998964450643305,"y":-0.031450818502504654}]

vega.json

{
    "width": 500,
    "height": 500,
    "padding": { "top": 10, "bottom": 50, "left": 50, "right": 10 },
    "predicates": [
        {
            "name": "tooltip",
            "type": "==",
            "operands": [{ "signal": "tooltip._id" }, { "arg": "id" }]
        }
    ],
    "data": [
        {
            "name": "data",
            "url": "points.json"
        }
    ],
    "signals": [
        {
            "name": "width", "init": 500
        },
        {
            "name": "height", "init": 500
        },
        {
            "name": "tooltip",
            "init": {},
            "streams": [
                { "type": "symbol:mouseover", "expr": "datum" },
                { "type": "symbol:mouseout", "expr": "{}" }
            ]
        },
        {
            "name": "point",
            "init": 0,
            "streams": [
                {
                    "type": "mousedown",
                    "expr": "{x: eventX(), y: eventY()}"
                }
            ]
        },
        {
            "name": "delta",
            "init": 0,
            "streams": [
                {
                    "type": "[mousedown, window:mouseup] > window:mousemove",
                    "expr": "{x: point.x - eventX(), y: eventY() - point.y}"
                }
            ]
        },
        {
            "name": "xAnchor",
            "init": 0,
            "streams": [
                {
                    "type": "mousemove, wheel",
                    "expr": "eventX()",
                    "scale": { "name": "x", "invert": true }
                }
            ]
        },
        {
            "name": "yAnchor",
            "init": 0,
            "streams": [
                {
                    "type": "mousemove, wheel",
                    "expr": "eventY()",
                    "scale": {"name": "y", "invert": true}
                }
            ]
        },
        {
            "name": "zoom",
            "init": 1.0,
            "streams": [
                {
                    "type": "wheel",
                    "expr": "pow(1.001, event.deltaY)"
                }
            ]
        },
        {
            "name": "xMinAnchor",
            "streams": [
                {
                    "type": "mousedown, mouseup, wheel",
                    "expr": "0",
                    "scale": {"name": "x", "invert": true}
                }
            ]
        },
        {
            "name": "xMaxAnchor",
            "streams": [
                {
                    "type": "mousedown, mouseup, wheel",
                    "expr": "width",
                    "scale": {"name": "x", "invert": true}
                }
            ]
        },
        {
            "name": "yMinAnchor",
            "streams": [
                {
                    "type": "mousedown, mouseup, wheel",
                    "expr": "height",
                    "scale": {"name": "y", "invert": true}
                }
            ]
        },
        {
            "name": "yMaxAnchor",
            "streams": [
                {
                    "type": "mousedown, mouseup, wheel",
                    "expr": "0",
                    "scale": {"name": "y", "invert": true}
                }
            ]
        },
        {
            "name": "xMin",
            "init": null,
            "streams": [
                {
                    "type": "delta",
                    "expr": "xMinAnchor + (xMaxAnchor-xMinAnchor)*delta.x/width"
                },
                {
                    "type": "zoom",
                    "expr": "(xMinAnchor-xAnchor)*zoom + xAnchor"
                }
            ]
        },
        {
            "name": "xMax",
            "init": null,
            "streams": [
                {
                    "type": "delta",
                    "expr": "xMaxAnchor + (xMaxAnchor-xMinAnchor)*delta.x/width"
                },
                {
                    "type": "zoom",
                    "expr": "(xMaxAnchor-xAnchor)*zoom + xAnchor"
                }
            ]
        },
        {
            "name": "yMin",
            "init": null,
            "streams": [
                {
                    "type": "delta",
                    "expr": "yMinAnchor + (yMaxAnchor-yMinAnchor)*delta.y/height"
                },
                {
                    "type": "zoom",
                    "expr": "(yMinAnchor-yAnchor)*zoom + yAnchor"
                }
            ]
        },
        {
            "name": "yMax",
            "init": null,
            "streams": [
                {
                    "type": "delta",
                    "expr": "yMaxAnchor + (yMaxAnchor-yMinAnchor)*delta.y/height"
                },
                {
                    "type": "zoom",
                    "expr": "(yMaxAnchor-yAnchor)*zoom + yAnchor"
                }
            ]
        }
    ],
    "scales": [
        {
            "name": "x",
            "type": "linear",
            "range": "width",
            "zero": false,
            "domain": {
                "data": "data",
                "field": "x"
            },
            "domainMin": { "signal": "xMin" },
            "domainMax": { "signal": "xMax" }
        },
        {
            "name": "y",
            "type": "linear",
            "range": "height",
            "zero": false,
            "domain": {
                "data": "data",
                "field": "y"
            },
            "domainMin": { "signal": "yMin" },
            "domainMax": { "signal": "yMax" }
        }
    ],
    "axes": [
        {
            "type": "x",
            "scale": "x",
            "grid": true,
            "layer": "back"
        },
        {
            "type": "y",
            "scale": "y",
            "grid": true,
            "layer": "back"
        }
    ],
    "marks": [
        {
            "type": "group",
            "properties": {
                "enter": {
                    "x": { "value": 0 },
                    "width": { "field": {"group": "width" } },
                    "y": { "value": 0 },
                    "height": { "field": { "group": "height" } },
                    "clip": { "value": true }
                }
            },
            "marks": [
                {
                    "type": "symbol",
                    "from": { "data": "data" },
                    "properties": {
                        "update": {
                            "x": { "scale": "x", "field": "x" },
                            "y": { "scale": "y", "field": "y" },
                            "stroke": { "value": "#444" },
                            "shape": { "value": "circle" },
                            "strokeWidth": { "value": 0.25 },
                            "fill": { "value": "steelblue" },
                            "size": { "value": 20 }
                        },
                        "hover": {
                            "size": { "value": 80 }
                        }
                    }
                },
                {
                    "type": "text",
                    "properties": {
                        "enter": {
                            "align": { "value": "center" },
                            "fill": { "value": "#333" }
                        },
                        "update": {
                            "x": { "scale": "x", "signal": "tooltip.x" },
                            "y": { "scale": "y", "signal": "tooltip.y", "offset": -5 },
                            "text": { "template": "({{tooltip.x|number:'.4g'}}, {{tooltip.y|number:'.4g'}})" },
                            "fillOpacity": {
                                "rule": [
                                    {
                                        "predicate": {
                                            "name": "tooltip",
                                            "id": { "value": null }
                                        },
                                        "value": 0
                                    },
                                    { "value": 1 }
                                ]
                            }
                        }
                    }
                }
            ]
        }
    ]
}