pbogden

Demo of leaflet & D3 from Mike Bostock's tutorial, updated with an openstreetmap URL that works.

pbogden

Clustered Force Layout using D3 v4

Modified from Mike Bostock's original.

Looks more like the version with custom gravity.

Compare with Shan Carter's v4 adaptation.

pbogden

Reusable SVG button

• SVG button (this one)
  • styling uses: gradient fill & drop shadow
  • buttons interact by dispatching custom events
• Toggling buttons
• SVG drop-shadow
• For animations, I prefer mbostock's block
• An HTML button

pbogden

Event bubbling & capturing demo

1. SVG elements are not nested -- they don't bubble to each other. Topmost element is the target.
2. Blue SVG rect captures the event with d3.event.stopPropagation();
3. Nested DIV elements bubble to each other up the DOM tree.
4. Non-nested DIV elements don't bubble to each other.

pbogden

Simple x-y plot -- Check out Mike Bostock's.

V3 version

pbogden

// https://observablehq.com/@pbogden/hello-leaflet-run-elsewhere@57
export default function define(runtime, observer) {
  const main = runtime.module();
  main.variable(observer()).define(["md"], function(md){return(
md`# Hello, Leaflet (run elsewhere)

A quick demo of [Leaflet](https://leafletjs.com/). 

See below for instructions to download the code and run it in another web page, 
where you can access the map and add a layer.  If you get it to work, the map

pbogden

Hello world

pbogden

Google spreadsheet as a data source (JSONP).

#d3.gsheet(key [, sheet], callback)

Retrieves data from the Google Spreadsheet associated with the spreadsheet key. The optional sheet is a string that corresponds to the name of the desired sheet in the spreadsheet. The default is to read the first sheet. The callback is invoked with an array of objects as the argument, consistent with d3.csv().

To adapt this demo to another spreadsheet, you must:

• Share the spreadsheet so that "Anyone with the link can view" it.

pbogden

This D3 + OpenLayers example mirrors as closely as possible Mike Bostock's D3 + Leaflet example. See his example for an explanation.

Primary differences:

1. OpenLayers uses Mercator (EPSG:4326) by default, which appears distorted (for example). It's easy to switch to "Spherical Mercator" (EPSG:900913), but then you need to be careful to convert lon/lat to the OpenLayers default x/y coordinates in meters.

2. As in this example, the code below uses an OpenLayers Vector Layer in place of Leaflet's overlay pane. Whereas Leaflet requires repositioning only on zoom, OpenLayers needs repositioning for both zoom and pan. This makes it easier to size the SVG with OpenLayers -- it need only fit the viewport, as long as you're willing to wait for clipped features to be drawn after pan events. Fo

pbogden

CSV files for https://observablehq.com/@the-vern and https://observablehq.com/@mbschissell/changes-in-d-c-public-elementary-school-budgets-2017-2018

Data source for DC schools...

https://www.dcpsdatacenter.com/budget_process.html