2c:null 2d:["$","title",null,{"children":"Quadrat sampling to visualize density of Air and Drone strikes in Ukraine from 2022/02/22 to 2024/02/24 | dgaitsgo | Observable"}] 32:T10ed,{ ////////////////////////////////////////////////////////////////////////////////////////////////// // set-up ////////////////////////////////////////////////////////////////////////////////////////////////// const margins = { top : 100, left: 0 } let grid = [] let svg,path, g,strikesG,borderG,gridG if (d3.select('#svg-map').empty()) { const svg = d3.select('#svg-container') .append('svg') .attr('width', width) .attr('height', height) .attr('id', 'svg-map'), path = d3.geoPath().projection(projection), g = svg.append('g') .attr('transform', `translate(${margins.left}, ${margins.top})`) .attr('class', 'transform-group'), borderG = g.append('g').attr('class', 'borders-g'), gridG = svg.append('g').attr('id', 'grid-g'), strikesG = g.append('g').attr('class', 'strikes-g') // borderG.append('path') // .datum(borders) // .attr('class', 'border') // .attr('d', path) // .attr('fill', 'none') // .attr('stroke', '#2b8cbe') // .attr('stroke-width', 1) strikesG .selectAll('.new-cricles') .data(data.filter((d, i) => d.sub_event_type === 'Air/drone strike')) .enter() .append('circle') .each(function (dp, i) { const [x, y] = projection([Number(dp.longitude), Number(dp.latitude)]) points.push([x, y]) d3.select(this) .attr('cx', x) .attr('cy', y) }) .attr('r', 1) .attr('fill', 'black') } ////////////////////////////////////////////////////////////////////////////////////////////////// // grid ////////////////////////////////////////////////////////////////////////////////////////////////// gridG = d3.select('#grid-g').html('') grid = [] const numRows = Math.floor(height / sq) const numCols = Math.floor(width / sq) for (let i = 0; i < numRows; i++) { for (let j = 0; j < numCols; j++) { if (!grid[i]) { grid[i] = [] } const x = j * sq const y = i * sq const id = `sq-${i}-${j}` gridG.append('rect') .attr('x', x) .attr('y', y) .attr('width', sq) .attr('height', sq) .attr('stroke', 'black') .attr('id', id) .attr('fill', 'none') grid[i].push(new GridCell(x, y, x + sq, y + sq, id)) } } points.forEach((point) => { const [x, y] = point const cellX = Math.floor((x + margins.left) / sq) const cellY = Math.floor((y + margins.top) / sq) if (cellX >= 0 && cellX < numCols && cellY >= 0 && cellY < numRows) { grid[cellY][cellX].count++ } }) const counts = {} grid.forEach((row) => row.forEach(cell => counts[cell.count] = true)) const colorScale = d3.scaleQuantile() .domain(Object.keys(counts).map(n => Number(n)).sort()) .range(d3.schemeBlues[9]) const legendRange = colorScale.quantiles() grid.forEach(row => row.forEach(cell => { const c = colorScale(cell.count) const id = cell.id const co = gridG.select(`#${id}`) .attr('fill', cell.count === 0 ? 'none' : c) .attr('stroke', cell.count === 0 ? 'none' : 'black') .attr('fill-opacity', 0.7) }) ) ////////////////////////////////////////////////////////////////////////////////////////////////// // Qudrat ////////////////////////////////////////////////////////////////////////////////////////////////// const o = projection.invert([0, 0]) const o1 = projection.invert([sq, 0]) const o2 = projection.invert([0, sq]) const kmWid = kmDistance(o[0], o[1], o1[0], o1[1]) const kmLon = kmDistance(o[0], o[1], o2[0], o2[1]) mutable quadratSize = kmWid * kmLon ////////////////////////////////////////////////////////////////////////////////////////////////// // legend ////////////////////////////////////////////////////////////////////////////////////////////////// const legend = d3.select('#scale-wrapper') .html('') legendRange.forEach((n) => { const div = legend.append('div') div.append('div') .style('background', colorScale(n)) .attr('class', 'legend-square') div.append('span') .text(Math.round(n)) }) return "air and drone strikes" } 33:[{"id":"41e99a45ec43169bf92f3151be4b055d18b27669dacac4ec0e9c922cef934d22cf7bac1a6b7f1a2cedd03d2880d08666773ca4a9ac10edef534e19eedbbbef65","href":"https://static.observableusercontent.com/files/41e99a45ec43169bf92f3151be4b055d18b27669dacac4ec0e9c922cef934d22cf7bac1a6b7f1a2cedd03d2880d08666773ca4a9ac10edef534e19eedbbbef65","name":"ukraine-4.geojson","type":"application/geo+json","lastModified":1709214985030.492,"size":125037},{"id":"6e6af47bbe6573d3476ab6f60b087488e04a3cbf68283d6127fba6782ccfd826d30d346828ef97be806dec44007ce6ab60a663e3a55d15c089a6d842b9a825d6","href":"https://static.observableusercontent.com/files/6e6af47bbe6573d3476ab6f60b087488e04a3cbf68283d6127fba6782ccfd826d30d346828ef97be806dec44007ce6ab60a663e3a55d15c089a6d842b9a825d6","name":"2022-02-22-2024-02-29-Ukraine.csv","type":"text/csv","lastModified":1709216232496.201,"size":32104400}] 30:{"id":"9f02458a240a3b83","slug":null,"title":"Quadrat sampling to visualize density of Air and Drone strikes in Ukraine from 2022/02/22 to 2024/02/24","thumbnail":"11852b9ada4ee82933cec9ebc4f81ee813a4d588689f996ebfc360138aafc89a","access_level":"public","create_time":"$D2024-02-29T12:25:38.374Z","update_time":"$D2024-03-01T15:13:11.439Z","view_time":null,"first_public_time":"$D2024-03-01T13:34:20.052Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024"},"version":778,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null}],"members":[{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"87e9170a0317d215","slug":"europe","title":"Europe","owner":{"id":"7975ac2b6aec485b","login":"dgaitsgo","name":""}},"type":"notebook","body":{"title":"Quadrat sampling to visualize density of Air and Drone strikes in Ukraine from 2022/02/22 to 2024/02/24","cells":[{"id":0,"value":"# Quadrat sampling to visualize density of Air and Drone strikes in Ukraine from 2022/02/22 to 2024/02/24","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"Quadrat size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"

≈ ${Math.round(quadratSize).toLocaleString()} km²

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"viewof sq = Inputs.range([14, 70], {step: 1, value: 25})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"

\n Number of strikes in quadrat\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":760,"value":"mutable quadratSize = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"width = 860","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"height = 670","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"data = await FileAttachment(\"2022-02-22-2024-02-29-Ukraine.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"borders = await FileAttachment(\"ukraine-4.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"points = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"projection = d3\n .geoMercator()\n .fitSize([width, height], borders)\n .center([ 31.34, 45.65 ])\n .scale((512) * 0.5 / Math.PI * Math.pow(2, 4.7))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"function kmDistance(lat1, lon1, lat2, lon2) {\n const rlat1 = Math.PI * lat1/180\n const rlat2 = Math.PI * lat2/180\n const rlon1 = Math.PI * lon1/180\n const rlon2 = Math.PI * lon2/180\n const theta = lon1 - lon2\n const rtheta = Math.PI * theta/180\n let dist = Math.sin(rlat1) * Math.sin(rlat2) + Math.cos(rlat1) * Math.cos(rlat2) * Math.cos(rtheta);\n dist = Math.acos(dist)\n dist = dist * 180/Math.PI\n dist = dist * 60 * 1.1515\n return dist * 1.609344\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"class GridCell {\n constructor(xMin, yMin, xMax, yMax, id) {\n this.xMin = xMin;\n this.yMax = yMax;\n this.xMax = xMax;\n this.yMin = yMin;\n this.id = id;\n this.count = 0;\n }\n\n contains(point) {\n return (\n point.x >= this.xMin &&\n point.x <= this.xMax &&\n point.y >= this.yMin &&\n point.y <= this.yMax\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.4.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiaXNhYWNsdW1wa2lucyIsImEiOiJjajNhdTVlZXMwMGFnMzJvNzdoemQ0N3phIn0.hv3Atoq7kaBU9F-YCBGBOw\"\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"map = new mapboxgl.Map({\n container: 'canvas-container',\n center: [ 31.4, 47.5 ],\n zoom: 4.7,\n style: 'mapbox://styles/mapbox/satellite-streets-v12',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":692,"value":"Ukraine country Boundaries [geoBoundaries](https://www.geoboundaries.org/): `geoBoundaries-UKR-ADM0_simplified.geojson`\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"Air and Drone strike data: The Armed Conflict Location & Event Data Project (ACLED) - requires registration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"