3f:null 40:["$","title",null,{"children":"Longitud de la costa | Jordi Saludes | Observable"}] 46:T45a,viewof map = { const target = html`

`; yield target; // Give the container dimensions. var source = new ol.source.Vector({wrapX: false}); var vector = new ol.layer.Vector({ source: source, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff0000', width: 3 }) }) }); const map = target.value = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vector ], target, view: new ol.View({ center: ol.proj.fromLonLat([2.1, 41.5]), zoom: 7 }) }); var draw; // global so we can remove it later function addInteraction() { // var value = typeSelect.value; draw = new ol.interaction.Draw({ source: source, // freehand: true, type: 'LineString' // typeSelect.value }); map.addInteraction(draw); } addInteraction(); invalidation.then(() => map.dispose()); console.log("Features", source.getFeatures().length); return target; }47:Tb7c,{ let N = nTrams2; let width = 800, height = 400, R = height/3; const all = html` `; const stage = d3.select(all); //DOM.svg(width, height)); //return svg.selectAll('svg').attr('id', 'cercle'); const gC = stage.selectAll('#cercle') .append('g') .attr('transform', `translate(${R+5}, ${height/2})`); gC.append("circle") .attr('cx', 0) .attr('cy', 0) .attr('r', R) .attr('fill', "#ffffdd") .attr('stroke', "#aaa"); let {sin, cos, PI} = Math; let a = 2*PI/N; const perimeterC = [...Array(N).keys()].map(n => [R*cos(n*a), R*sin(n*a)]); gC.append('polygon') .attr('points', perimeterC.map(p => p.join(','))) .attr('fill', 'none') .attr('stroke-width', 1) .attr('stroke', 'blue'); gC.selectAll('circle') .data(perimeterC) .enter() .append('circle') .attr('cx', d => d[0]) .attr('cy', d => d[1]) .attr('r', 2) .attr('fill', "#505063"); gC.append('text') .attr('class', 'perimeter') .attr('x', 0).attr('y', 0) .attr('text-anchor', 'middle') .text(polylineLength(perimeterC).toLocaleString()); gC.append('text') .attr('class', 'trams') .attr('x', 0).attr('y', -30) .attr('text-anchor', 'middle') .text(N); //let Rq = width/5; const gR = stage.selectAll('#quadrat') .append('g') .attr('transform', `translate(${R+10}, ${height/2})`); function linspace(start, stop, nsteps){ let delta = (stop-start)/(nsteps-1); return d3.range(start, stop+delta, delta).slice(0, nsteps) } let T = linspace(-R, R, N/4); const perimeterR = T.map(t => [R, t]) .concat(T.map(t => [-t,R]), T.map(t => [-R, -t]), T.map(t => [t,-R])); gR.append("rect") .attr('x', -R) .attr('y', -R) .attr('width', 2*R) .attr('height', 2*R) .attr('fill', "#ffffdd") .attr('stroke', "#aaa"); gR.append('polygon') .attr('points', perimeterR.map(p => p.join(','))) .attr('fill', 'none') .attr('stroke-width', 1) .attr('stroke', 'blue'); gR.selectAll('circle') .data(perimeterR) .enter() .append('circle') .attr('cx', d => d[0]) .attr('cy', d => d[1]) .attr('r', 2) .attr('fill', "#505063"); let center = barycenter(perimeterR); gR.append('text') .attr('class', 'perimeter') .attr('x', center[0]) .attr('y', center[1]) .attr('text-anchor', 'middle') .text(polylineLength(perimeterR).toLocaleString()); gR.append('text') .attr('class', 'trams') .attr('x', center[0]) .attr('y', center[1] - 30) .attr('text-anchor', 'middle') .text(N); return stage.node(); }48:T99b,graph = function(svg, data, params) { const scaling = params.scaleType? d3.scaleLinear : d3.scaleLog; // true: linear let margin = ({ top: 20, right: 20, bottom: 20, left: 50 }); const xScale = scaling() .domain([(params.xMin || 1), d3.max(data, d => d[0])]) .range([margin.left, width - margin.right]), yScale = scaling() .domain([params.yMin || d3.min(data, d => d[1]), params.yMax || d3.max(data, d => d[1])]) .range([height - margin.bottom, margin.top]) const xAxis = g => g.attr('transform', `translate(0, ${height - margin.bottom})`) .attr("class", "xAxis") .call(d3.axisBottom(xScale)), yAxis = g => g.attr('transform', `translate(${margin.left}, 0)`) .attr("class", "yAxis") .call(d3.axisLeft(yScale)); // First, let's make the scatterplot let pointColor = params.color || 'orange', fillPoint = d => d[0] == params.highlight? params.highlightColor : pointColor; svg.selectAll('circle') .data(data) .enter().append('circle') .attr('r', 3) .attr('cx', d => xScale(d[0])) .attr('cy', d => yScale(d[1])) .style('fill', fillPoint); const linearRegression = ss.linearRegression(data), linearRegressionLine = ss.linearRegressionLine(linearRegression); function logRegressionLine(lg) { let pow = Math.pow, K = Math.exp(lg.b); return x => K * pow(x, lg.m); } let linExpression = lg => tex`y = ${lg.m} x + ${lg.b}`, logExpression = lg => tex`y = ${lg.b} x^{${lg.m}}`; const log = Math.log, logRegression = ss.linearRegression(data.map(d => [log(d[0]), log(d[1])])); logRegressionLine = logRegressionLine(logRegression); let regline = params.regressionType? linearRegressionLine : logRegressionLine ; const regressionPoints = data.map(d => [d[0], regline(d[0])]); const line = d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1])); svg.append('path') .classed('regressionLine', true) .datum(regressionPoints) .attr('d', line); svg.append('g') .call(xAxis); svg.append('g') .call(yAxis); return params.regressionType? linExpression(linearRegression) : logExpression(logRegression); } 49:[] 44:{"id":"5062ff4ffc8d5076","slug":"longitud-de-la-costa","title":"Longitud de la costa","thumbnail":"de72f82d64c8aaffa76ba6359c850976a203636a33660fb78c6c11dfedbc0c1d","access_level":"public","create_time":"$D2019-01-18T11:09:37.513Z","update_time":"$D2019-02-25T13:32:24.658Z","view_time":null,"first_public_time":"$D2019-02-19T11:05:52.065Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":"starter_2024","bio":"","following":false},"version":879,"publish_version":879,"role":null,"authored":false,"authors":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b6d5bde1dc981917","slug":"fractals","title":"Fractals","owner":{"id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes"}},"type":"notebook","body":{"titling":"auto","title":"Longitud de la costa","cells":[{"id":0,"value":"md`# Longitud de la costa`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {places, projection, width, height, getPointsAlongPolyline} from \"@veltman/centerline-labeling\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"viewof nTrams = slider({\n min: 5, \n max: feature[1].geometry.coordinates[feature[0]][0].length,\n step: 2, \n value: 10,\n title: \"Número de trams\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n const pg = polygon(nTrams);\n const center = barycenter(pg);\n \n return svg``\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"{ var trams = [4,8,16,32,64,128,256,300];\n trams.push(nTrams);\n trams.sort((x,y) => x-y);\n \n var data = trams.map(n => [n, polylineLength(polygon(n))]);\n \n const target = d3.select(DOM.svg(width, height))\n .classed('chart', true); \n \n var expr = graph(target, data,\n { scaleType: true,\n regressionType: false,\n yMin: 500,\n highlight: nTrams,\n color: 'orange',\n highColor: 'red',\n yMax: 1500});\n \n // return expr;\n \n return target.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"feature[1].geometry.coordinates[feature[0]][0].length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`Vegeu també https://bost.ocks.org/mike/simplify/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"viewof nTrams2 = slider({\n min: 5, \n max: 500,\n step: 2, \n value: 10,\n title: \"Número de trams\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"{ const trams = [4, 8, 16,32,64,128,200],\n {sin, PI} = Math,\n R = 400/3,\n data = trams.map(n => [n, 2*R*n*sin(PI/n)]);\n \n const target = d3.select(DOM.svg(width, height))\n .classed('chart', true); \n \n graph(target, data, \n {scaleType: true, \n regressionType: true,\n yMin: 500,\n yMax: 1500});\n \n return target.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"transcribe({youtube:'gB9n2gHsHN4',\n imageUrl: \"etc.usf.edu/clipart/6000/6037/pen_3_md.gif\",\n transcript: `01:13\nis a rebellion against calculus whose`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"{let div = DOM.element('div');\n div.append(DOM.svg(width, height));\n div.append(DOM.element('table'));\n \n \n const target = d3.select(div).select('svg')\n .classed('chart', true);\n \n let data = d3.range(5).map(t => [2**(-t), 3**t]);\n \n// return data;\n \n graph(target, data, \n {scaleType: false, \n regressionType: false,\n xMin: 0.0001,\n yMin: 0,\n yMax: 80});\n \n return div;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"import {transcribe, style} from \"@jashkenas/youtube-transcriber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.2.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"d3s = require(\"d3-scale\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"feature = {\n const name = 'Italy',\n nPoly = 0;\n return [nPoly, places.features.find(f => f.properties.name === name)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"background = d3.geoPath().projection(projection)(feature[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"polylineLength = function(pl) {\n const dist = (p,q) => Math.sqrt((p[0]-q[0])**2 + (p[1]-q[1])**2);\n // return dist(pl[0], pl[1]);\n var len =0;\n for(var i=1; i [b[0] + p[0], b[1] + p[1]], [0,0]);\n return [b[0]/pl.length, b[1]/pl.length];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"polygon = function (nTrams) {\n const s = projection.scale(),\n t = projection.translate();\n const [nP, fea] = feature;\n\n const outerRing = fea.geometry.coordinates[nP][0]\n .slice(1) \n .map(point => [s * point[0] + t[0], s * point[1] + t[1]]);\n \n return getPointsAlongPolyline(outerRing, nTrams)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"function logRegression(data ) {\n \n function leastSquares(XaxisData, Yaxisdata) {\n let plus = (ac,x) => ac + x;\n \n // finding the mean of Xaxis and Yaxis data\n const xBar = XaxisData.reduce(plus) * 1.0 / XaxisData.length,\n yBar = Yaxisdata.reduce(plus) * 1.0 / Yaxisdata.length,\n ssXX = XaxisData.map(d => Math.pow(d - xBar, 2)).reduce(plus),\n ssYY = Yaxisdata.map(d => Math.pow(d - yBar, 2)).reduce(plus),\n MeanDiffXY = XaxisData.map((d, i) => (d - xBar) * (Yaxisdata[i] - yBar)).reduce(plus);\n \n const slope = MeanDiffXY / ssXX,\n intercept = yBar - (xBar * slope);\n \n// returning regression function\n return (x => intercept + x * slope);\n }\n \n \n let exp = Math.exp,\n log = Math.log;\n \n const r = leastSquares(data.map(d => log(d[0])), data.map(d => log(d[1])));\n \n return (x => exp(r(log(x))));\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"d3a = import(\"d3-axis\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"