OpenLayers and D3 from home laptop

setup code:

    cd ~/cssi/flask/
    git clone https://github.com/wendellwt/filed_vs_flown.git

    scp wendell@ilikecarrots.com:cssi/d3_initial_testing.tgz .

and (duh!):

    cd browser
    npm install

setup sample json (not completed)

    scp wendell@ilikecarrots.com:cssi/output_everything.txt.gz .

VS Code

    cd ~/cssi/flask/filed_vs_flown/browser
    code .

and:

    npm run serve

and after a several restarts, it finally works:
http://localhost:8082/content/196/static/

read local file:

    // a file captured from ./everything.py over on rserver:
    import sample_json_data from "./output_everything.json";

then just:

    if (this.use_pickle==true) {
      this.process_fetch_response(sample_json_data);
      return;
    }

I think suffix matters (i.e., must be ".json") and it is parsed, btw.

D3:

seems good: Is it possible to have an animated SVG as a vector layer feature?

and this one:

This D3 + OpenLayers example mirrors as closely as possible Mike Bostock's D3 + Leaflet example.

++++++++++++++++++++++++++++++++++++++

this one looks possible: http://plnkr.co/edit/Ho1IjJDZCxFAKUIcavAt?p=preview&preview

some SO discussion about OL3: https://blockbuilder.org/geraldo/018b487bc29bbb5dc4d7e3e8177103a1

which may be the same as this example (which runs):

http://plnkr.co/edit/Ho1IjJDZCxFAKUIcavAt?p=preview&preview

Notes from confluence:

Some intro notes:

Intro to Vue

From Data to Viz (very interesting data visualization page/company)

Most basic stacked barplot in d3.js (very good, simple example that actually works)

filed_vs_flown pages in progress:

Dashboard content URL: http://172.26.21.40:3939/connect/#/apps/194

Direct content URL: http://172.26.21.40:3939/content/194/

Mike Bostock's examples:

tutorial series Let’s Make a Bar Chart.

Grouped Bar Chart

TODO items:

openlayers + d3 : what we're aiming for

Most basic grouped barplot in d3.js

Stacked barplot with tooltip

not quite the example I saw elsewhere, but has the general idea: How to style slider on chart in D3.js and show label of dynamic y-value?

Vladimir's fiddle: SVG: https://jsfiddle.net/ghettovoice/cpmstv7w/ (he has several)

d3 circular bar chart: https://www.d3-graph-gallery.com/graph/circular_barplot_double.html

Note: here the same variable is used for the inner and the outer part. It illustrates the main caveat of circular barcharts: see how the bar size is distorted?

openlayers d3 integration: https://openlayers.org/en/latest/examples/d3.html

openlayers svg: ???

vladimir's svg fiddle (5 versions):

• svg icon: https://jsfiddle.net/ghettovoice/cpmstv7w/

this one DOES NOT SHOW ANY ICONS

<vl-style-icon src="http://simpleicon.com/wp-content/uploads/rocket.svg" :scale="0.1"></vl-style-icon>

• svg icon: https://jsfiddle.net/ghettovoice/zt5ryhgf/

let icon = new ol.style.Icon({
     img: document.getElementById('skull'),
     imgSize: [100, 100]
})

• svg icon: https://jsfiddle.net/ghettovoice/9kfw3yo7/

seems same as above

• svg icon from source: https://jsfiddle.net/ghettovoice/m3j0zydr/

<vl-map></vl-map>

<svg id="skull" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M87.255,....,59.056z"/>
</g>
</svg>

then, in js:

styleFuncFactory () {
console.log("create style func")
// get raw svg using http://svgjs.com/
let svg = SVG('skull')  // BAD

• svg icon: https://jsfiddle.net/ghettovoice/rofL2085/

<img id="skull" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-skull.svg">