style = html`
<link rel="stylesheet" href="https://www.hakaimagazine.com/wp-content/themes/HakaiMagazine/styles/fonts.processed.css">
<link rel="stylesheet" href="https://use.typekit.net/osp1zba.css">
<link rel='stylesheet' id='hakaimagazine-style-sheet-css' href='https://www.hakaimagazine.com/wp-content/themes/HakaiMagazine/css/style.css?ver=1611277791' type='text/css' media='all' />
<link rel='stylesheet' id='hakaimagazine-font-awesome-css' href='https://www.hakaimagazine.com/wp-content/themes/HakaiMagazine/fonts/font-awesome.min.css?ver=1611277791' type='text/css' media='all' />
<link rel="stylesheet" media="all" href="https://fontlibrary.org/face/nimbus-sans-l" type="text/css"/>
`
radius = 4
padding = 1.5
datageo
updateMapbox = {
// This allows us to update the map with data without re-rendering the whole cell
// There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders
let fc = {
type: "FeatureCollection",
features: datageo
};
if (map._loaded) {
if (!map.getSource("stories")) {
map.addSource("stories", {
type: "geojson",
data: fc
});
} else {
// console.log("setting source")
map.getSource("stories").setData(fc);
}
if (map.getLayer(hexbinLayer.id)) {
map.removeLayer(hexbinLayer.id);
}
// console.log("adding layer")
map.addLayer(hexbinLayer);
// map.flyTo(projection.invert([100,1000]))
// console.log("flying")
// }
return true;
}
return false;
}
hexbinLayer = {
return {
id: "stories",
type: "circle",
source: "stories",
paint: {
"circle-radius": [
"interpolate",
["linear"],
["number", ["get", "Casualty"]],
0,
4,
5,
24
],
"circle-color": ["get", "color"],
"circle-opacity": 0.8
}
// filter: ['all', filterHour, filterDay]
};
}
height = 200
// import { is_required } from "@xari/is_required"
// function paginated_fetch(
// url = is_required("url"), // Improvised required argument in JS
// page = 1,
// previousResponse = []
// // response
// ) {
// return fetch(`${url}&page=${page}`) // Append the page number to the base URL
// .then((response) => {
// // console.log(response.ok);
// if (!response.ok) {
// // create error object and reject if not a 2xx response code
// let err = new Error("HTTP status code: " + response.status);
// err.response = response;
// err.status = response.status;
// throw err;
// } else {
// // console.log(response.ok);
// return response.json();
// }
// })
// .then((newResponse) => {
// // console.log("hre", newResponse);
// // if (newResponse.data === undefined) {
// // console.log(newResponse.data === undefined);
// const response = [...previousResponse, ...newResponse]; // Combine the two arrays
// // console.log(newResponse.length);
// if (newResponse.length === 100) {
// // < 100 means the end of items, so don't make another call
// page++;
// return paginated_fetch(url, page, response);
// }
// // }
// // console.log(response);
// return response;
// // return response;
// });
// }
// data1 = {
// const out = [];
// return rawdata.map((d) => {
// const country = d.acf.geolocation ? d.acf.geolocation.country : "";
// const state = d.acf.geolocation ? d.acf.geolocation.state : "";
// const wc = d.acf.word_count_override ? d.acf.word_count_override : "";
// return {
// deck: d.acf.deck,
// name: d.title.rendered,
// country: country,
// state: state,
// wordCount: wc,
// ...d
// };
// });
// }
data = d3.csv(
"https://raw.githubusercontent.com/HakaiInstitute/magazine-visualizations/main/list.csv"
)
// rawdata[100].acf
// rawdata = [...rawdataF, ...rawdataNews, ...rawdataVV, ...rawdataAS]
// rawdataF = paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/features?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`
// )
// rawdataNews = paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/news?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`
// )
// rawdataVV = paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/videos-visuals?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`
// )
// rawdataAS = paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group,link,acf.word_count_override&per_page=100`
// )
// getData()
// function getData() {
// const rawdataAS = paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group&per_page=100`
// );
// return rawdataAS;
// }
// Generators.queue(worker(getData()))
// worker`return ${paginated_fetch(
// `https://hakaimagazine.com/wp-json/wp/v2/article-short?_fields=title,acf.deck,acf.geolocation,date,acf.authors_group&per_page=100`
// )}`
// rawdata[0].title
dataFilt = data.filter((d) => d.lat != null)
search[0]
datageo = search.map((d, i) => {
let sel = {};
if (d.lat != null) {
return {
id: i,
properties: {
...d,
// stroke: d.lat == sel.lat && d.lng == sel.lng ? 2 : 0,
color: "#C46328",
// d.collected === true ? (d.total > 0 ? "#5ec962" : "#fde725") : "grey",
opacity: 0.89
},
geometry: {
type: "Point",
coordinates: [d.lng, d.lat]
},
type: "Feature"
};
}
})
// list2 = FileAttachment("list@5.csv").csv()
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoiaGFrYWkiLCJhIjoiY20wbXh4emprMDc3cjJrcTI5czI3cXRjbCJ9.XNfWqelIzmfMTVRJlc7nIg";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
// import { worker } from "@fil/worker"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
