This article will describe how you can integrate integrate the OpenAI API into your Bubble app.

  1. Set up the API Connector
    Go to Plugins -> Add Plugin -> search “API Connector” by Bubble, and click “Install” to install that plugin

We recently announced Uber Movement Speeds — a dataset of historical street speeds aggregated from anonymized Uber trips to help urban planners and researchers solve complicated urban mobility problems.

Movement Speeds Web Exploration Tool for New York City

In addition to providing our web-based exploration tool, we are offering access to the raw speeds data to support a variety of different types of use cases and analyses.

We offer three primary types of data (made available as CSVs):

Hourly Time Series — This dataset provides the average and standard deviation of speeds on road segments throughout a city for each hour historically. …

If you’ve been watching the React ecosystem the past few years, you’ve surely encountered one of the numerous open source reusable component libraries that developers reach for when building apps. These libraries save us from the tedium of rebuilding the same modals, menus, and form controls over and over for each app we work on.

Those who have used one of these libraries before have probably also run into a case where a component doesn’t quite fit your needs. Maybe the design doesn’t match the mockups your designer provided, and the component doesn’t expose an API for changing these styles…

In each image below, we start with a row of unsorted pixels at the top, and then watch as a sorting algorithm progressively sorts the pixels, eventually arriving at a fully sorted row at the bottom.

Bubble Sort

Update 9/12/2017–Some of the techniques in this post may be out of date, consider checking out Puppeteer from the Chrome team, which offers an awesome API for screenshots with headless Chrome.

Starting with Chrome 57, we can run Chrome as a headless browser on linux servers. Capturing web page screenshots is a common use case for browser automation, and PhantomJS has always been my go-to solution for this, but let’s explore what this looks like using Node.js to drive headless Chrome:

And the setup required to run this code on a linux server (I used a Vagrant with Ubuntu…

TL;DR Check out d3-scale-cluster on Github and npm

D3 scales are an immensely useful tool for data visualization and many other applications. In visualization, one common use case is mapping numeric values to a discrete set of colors, as shown in the map below:

Obama’s Health Law: Who Was Helped Most — New York Times, Oct 29, 2014

D3’s quantile and quantize scales are frequently used for this purpose. Quantile scales assign roughly an equal number of values to each color.
Quantize scales create segments of roughly equal size between the minimum and maximum observed values. …

Previously published on March 1st, 2014

At Graphiq, D3.js is our weapon of choice for data visualization. One shortcoming we encountered early on when building bar charts was the overlap of long labels on axes created from ordinal scales. Because SVG does not support line-wrapping for text elements, what you end up with is something like the following:

Clearly this is not the most friendly user experience, so we set off on a journey to find a better solution. After looking into custom text-wrapping routines and SVG foreign objects, we eventually went with an alternative HTML-based approach. …

David Schnurr

Engineering at OpenAI. Building products, tools, and data visualizations.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store