28:null 29:["$","title",null,{"children":"Flowers and Tracks | João Ricardo Mendes | Observable"}] 2e:T1880,chart = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#314d7a'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); // svg.append('path') // .datum(basemap) // .attr('d', path) // .attr('fill', 'gray') // .attr('stroke', 'white') // .attr('stroke-width', '0.2px') // .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*20) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }2f:T1881,chart1 = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#314d7a'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); // svg.append('path') // .datum(basemap) // .attr('d', path) // .attr('fill', 'gray') // .attr('stroke', 'white') // .attr('stroke-width', '0.2px') // .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*20) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }30:T18a1,chart2 = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#314d7a'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); // svg.append('path') // .datum(basemap) // .attr('d', path) // .attr('fill', 'gray') // .attr('stroke', 'white') // .attr('stroke-width', '0.2px') // .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*10) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }31:T188b,chart3 = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#314d7a'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); // svg.append('path') // .datum(basemap) // .attr('d', path) // .attr('fill', 'gray') // .attr('stroke', 'white') // .attr('stroke-width', '0.2px') // .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('path') .attr('d',petalPath) .attr('class', data.key) .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // .attr('r', (d, i) => i === 0 ? 5 : 2.5) .attr('fill', (d, i) => color(filteredData.intensity[i])) .attr('opacity', 0.8) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*10) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }32:T194e,chart4 = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#314d7a'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); // svg.append('path') // .datum(basemap) // .attr('d', path) // .attr('fill', 'gray') // .attr('stroke', 'white') // .attr('stroke-width', '0.2px') // .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.5) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*10) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }33:T193f,chart5 = { // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]) // .style('background-color', '#647C90'); const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]); // svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); svg.append('path') .datum(basemap) .attr('d', path) .attr('fill', '#C5C5C5') .attr('stroke', 'white') .attr('stroke-width', '0.2px') .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.5) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*10) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }34:T193c,chart6 = { const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]) .style('background-color', '#647C90'); // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]); // svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); svg.append('path') .datum(basemap) .attr('d', path) .attr('fill', '#C5C5C5') .attr('stroke', 'white') .attr('stroke-width', '0.2px') .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); // svg.append('g') // .attr('transform', 'translate(20, 10)') // .attr('opacity', 0.8) // .append(() => legend({color, // title: 'Intensity (kts)', // tickSize: 0, // width: 180 // })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.5) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(filteredData.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 1 : intensity(filteredData.intensity[i])*10) //.attr('r', (d, i) => ) .attr('fill', 'white') .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 28) .attr('font-weight', 600) .attr('fill', '#2e2e2e') .attr('opacity', 0.8) .attr('transform', 'translate(807, 505)') .text(''); return svg.node(); }35:T1920,chart7 = { const svg = d3.create('svg') .attr('viewBox', [0, 0, 960, 600]) .style('background-color', '#647C90'); // const svg = d3.create('svg') // .attr('viewBox', [0, 0, 960, 600]); // svg.style("background","url('https://i0.wp.com/pixahive.com/wp-content/uploads/2021/03/Paper-texture-background-392323-pixahive.jpg') "); svg.append('path') .datum(basemap) .attr('d', path) .attr('fill', '#C5C5C5') .attr('stroke', 'white') .attr('stroke-width', '0.2px') .attr('stroke-linejoin', 'round'); svg.append('path') .datum(graticule) .attr('d', path) .attr('stroke', 'white') .attr('stroke-width', '0.3px') .attr('stroke-opacity', 0.5); svg.append('g') .attr('transform', 'translate(20, 10)') .attr('opacity', 0.8) .append(() => legend({color: coloralt, title: 'Intensity (kts)', tickSize: 0, width: 180 })); const xGraticuleG = svg.append('g') .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('fill', 'white') .attr('opacity', 0.25) .attr('text-anchor', 'start'); longitude.map(x => { xGraticuleG.append('text') .attr('transform', `translate(${projection([x, -7]) + ""}) rotate(-90)`) .text(formatLongitude(x)) .attr('y', 11) }) for (const data of trackData) { svg.append('path') .datum(data) .attr('d', path) .attr('fill', 'none') .attr('stroke', '#333333') // .attr('stroke-width', '2px') .attr('opacity', 0.8); let myScale = 0.1; let filteredData = {'coordinates':[],'intensity':[]}; console.log('data',data); for(var i=0;i `translate(${projection(d)}) rotate(0) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(72) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(144) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.5) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(216) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) // svg.append('g') // .selectAll('.' + data.key) // .data(filteredData.coordinates) // .join('path') // .attr('d',petalPath) // .attr('class', data.key) // .attr('transform', (d,i) => `translate(${projection(d)}) rotate(288) scale(${intensity(filteredData.intensity[i])/2})`) // // .attr('r', (d, i) => i === 0 ? 5 : 2.5) // .attr('fill', (d, i) => color(filteredData.intensity[i])) // .attr('opacity', 0.8) // .attr('stroke', 'white') // .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) // .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('circle') .attr('class', data.key) .attr('transform', d => `translate(${projection(d)})`) .attr('r', (d, i) => i === 0 ? 0 : intensity(data.intensity[i])*50) .attr('fill', (d, i) => coloralt(data.intensity[i])) .attr('opacity', 0.6) .attr('stroke', 'white') .attr('stroke-opacity', (d, i) => i === 0 ? 0.8 : 0.2) .attr('stroke-width', (d, i) => i === 0 ? 0.8 : 0.5) svg.append('g') .selectAll('.' + data.key) .data(data.coordinates) .join('path') .append('title') .text((d, i) => data.time[i] + '\n' + (data.intensity[i] !== 0 ? data.intensity[i] + ' kts' : 'Too weak / Fading')); } svg.append('text') .attr('font-family', 'sans-serif') .attr('font-style', 'italic') .attr('font-size', 72) .attr('font-weight', 600) .attr('fill', 'white') .attr('opacity', 0.8) .attr('transform', 'translate(735, 530)') .text('2019'); return svg.node(); }36:[{"id":"59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","href":"https://static.observableusercontent.com/files/59043c111274a27ebf73fed54359203b6a76decd910308ad1233a898571445b943fe17e60c37c4d31bf3dea812aa16a901c36f774a75ab6198b62dbe69f21577","name":"point-data.json","type":"application/json","lastModified":1668248747811.453,"size":187027}] 2c:{"id":"dae4c526c925ed02","slug":null,"title":"Flowers and Tracks","thumbnail":"fb88bcf492f337382d57c00f1ea10ba2dbb1fa8f1e6982ea4de7971c9979db3a","access_level":"public","create_time":"$D2022-11-12T10:25:47.811Z","update_time":"$D2022-11-12T10:25:47.811Z","view_time":null,"first_public_time":"$D2022-11-12T10:25:47.811Z","has_unpublished_edits":null,"fork":{"id":"9ee00c8d0c784e4d","slug":"flowers-and-tracks","title":"Flowers and Tracks","owner":{"id":"c9876ed17b18c97d","login":"chamthesleeptalker","name":"Cham Mamador"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7632798b0a0057f3","login":"joaormendes","name":"João Ricardo Mendes","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":"pro_2024"},"version":832,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null}],"members":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flowers and Tracks","cells":[{"id":617,"value":"# Flowers and Tracks\n\nWe have a saying that, *\"Even the most dangerous things can be quite beautiful.\"*\n\nTake a few minutes and look at the piece below and tell me what you can see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"### Maybe it reminded you of the bliss of summer from your childhood?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"### Or maybe you were reminded of the famous cherry blossoms of Japan and South Korea that attracts millions of tourists year after year?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"## Let's see what's behind these flowers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"## I think you have a good idea now of what these tracks were actually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":673,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"> *The sizes of the circles were, just like their color, related to the intensity of the typhoon at that point in time.*\n> \n> *The data used to display this came RSMC Tokyo-Typhoon Center as indicated by [@z-richard](https://observablehq.com/@z-richard) in his work were this [notebook](https://observablehq.com/@z-richard/northwestern-pacific-typhoon-track-v3-2019) was forked from.*\n>\n> ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"# These are the typhoon tracks on the northwestern Pacific area observed for 2019.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"### *Most notable typhoon of 2019 in this area was Typhoon Hagibis.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"This typhoon, in particular, was described as *the fingerprint of global warming* in an [article](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) published in **Scientific American**. In fact it brought the [highest rainfall observed](https://www.worldweatherattribution.org/climate-change-added-4bn-to-damage-of-japans-typhoon-hagibis/) in Japan's recorded history.\n\nIn total, Typhoon Hagibis took the lives of [121 and left 3 people missing until now](https://en.wikipedia.org/wiki/Typhoon_Hagibis). Of the estimated *10 billion* damages [*4 billion*](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#) can be attributed to climate change. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":762,"value":"# The likely of an event like Hagibis occurring has been increased to [67% due to climate change](https://www.scientificamerican.com/article/climate-change-caused-4-billion-of-typhoons-damage/#).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"Year after year we are breaking record after record related to climate change such as heatwaves, sea level rise, drought, intensity of typhoons, and so on. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"## *Hence, there is a need more than ever to take action against climate change.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":821,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"### *Set up lines*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"formatLongitude = x => `${Math.abs(x)}°${x < 0 ? 'W' : 'E'}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"formatTime = d3.timeFormat('%B %d, %Y %H:%M')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"intensity = d3.scaleLinear()\n .domain([34, 48, 64, 85, 105])\n .range([0.06,0.12,0.18,0.24,0.3]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"coloralt = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#8299d9', '#4d63a1', '#e3ce71', '#e0ae51', '#e69035', '#e05f34'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"color = d3.scaleThreshold()\n .domain([34, 48, 64, 85, 105])\n .range(['#f6bc66','#f69c6d','#f68c70','#f57c73','#f56c77','#f55c7a']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"/* Rotate according to the longitude offset,\n and center the graph based on the latitude offset. */\nprojection = d3.geoMercator()\n .rotate([-140, 0])\n .center([0, 25]) \n .scale([600])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"basemap = d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json').then(data => {\n return topojson.feature(data, data.objects.countries)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"trackData = FileAttachment('point-data.json').json().then(d => {\n let result = []\n for (const key in d) {\n const rawData = d[key];\n result.push({\n 'type': \"LineString\",\n 'coordinates': rawData.map(d2 => d2.location),\n 'intensity': rawData.map(d2 => d2.intensity),\n 'time': rawData.map(d2 => formatTime(new Date(d2.time))),\n 'number': key\n });\n } \n return result;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"longitude = d3.range(100, 181, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"*This petalPath is from [@sxywu's](https://observablehq.com/@sxywu/) Introduction to D3.js Workshop*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"petalPath = \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 2d:"$2c:body"