2e:null 2f:["$","title",null,{"children":"Features API Heatmap Example | PredictHQ | Observable"}] 34:T594,parsedData = { const parseDate = d3.utcParse("%Y-%m-%d"); const rawdata = data.length == 0 ? [] : data.results.map( ({ date, phq_attendance_community, phq_attendance_concerts, phq_attendance_conferences, phq_attendance_expos, phq_attendance_festivals, phq_attendance_performing_arts, phq_attendance_sports }) => ({ date: parseDate(date), Community: phq_attendance_community.stats.sum, Concerts: phq_attendance_concerts.stats.sum, Conferences: phq_attendance_conferences.stats.sum, Community: phq_attendance_community.stats.sum, Expos: phq_attendance_expos.stats.sum, Festivals: phq_attendance_festivals.stats.sum, "Performing Arts": phq_attendance_performing_arts.stats.sum, Sports: phq_attendance_sports.stats.sum, Total: phq_attendance_community.stats.sum + phq_attendance_concerts.stats.sum + phq_attendance_conferences.stats.sum + phq_attendance_community.stats.sum + phq_attendance_expos.stats.sum + phq_attendance_festivals.stats.sum + phq_attendance_performing_arts.stats.sum + phq_attendance_sports.stats.sum }) ); return rawdata; }35:T18b1,function CalendarGrid( data, { // X AXIS x = (d) => d, // Given d in data, returns the (temporal) x-value xUnit = d3.utcDay, // Provide a different unit eg. d3.utcMonth, d3.utcDay xFormat = d3.utcFormat("%d %b"), // Provide a format function for your dates. xScale = undefined, // Provide your own d3.scaleTime based scale for the x axis. xDomain = undefined, // Provide your own [start date, end date] for the x axis. // Y AXIS y = (d) => undefined, // Given d in data, returns the (categorical/ordinal) y-value yDomain = undefined, // Provide your own y domain to order categories how you would like. Defaults to the unique values returned by y(), // COLOR c = (d) => "#000", // Given d in data, returns the value that determines the color of the cell. Assumed to be continuous by default. cFormat = d3.format(".3s"), // Provide a formatter for your values for the colors. cScale = undefined, // Provide your own d3 scale for colors, could be d3.scaleOrdinal, d3.scaleDiverging, etc. // Titles title = undefined, // Given d in data, return a title // Other Config cellSize = 40, // Size of the cells. cellPadding = 0.1, // Amount of padding between cells. rx = 2, // Rounding radius for cells width = "auto", // Chart width in pixels or 'auto' to have it be determined by the data height = "auto", // Chart height or 'auto' to have it be determined by the data margin = { top: 30, right: 10, bottom: 5, left: 60 }, // Standard d3 margin conventions responsive = true // Whether to use the viewbox attribute to constrain the chart to the svg size. } = {} ) { // Get our domains for each dimension. xDomain = xDomain || d3.extent(data.map((d) => x(d))); const xUnique = xUnit.range(xDomain[0], d3.timeDay.offset(xDomain[1], 1)); const yUnique = yDomain || [...new Set(data.map((d) => y(d)))]; // Set up chart width and height. const contentSize = { x: margin.left + margin.right + cellSize * (xUnique.length + 1), y: margin.top + margin.bottom + cellSize * (yUnique.length + 1) }; if (width === "auto") width = contentSize.x; if (height === "auto") height = contentSize.y; const viewBox = responsive ? contentSize : { x: width, y: height }; const svg = d3 .create("svg") .attr("viewBox", `0 0 ${viewBox.x} ${viewBox.y}`) .attr("width", width) .attr("height", height); if (xScale === undefined) { xScale = d3 .scaleTime() .range([margin.left, margin.left + cellSize * xUnique.length]) .domain(xDomain); } const yScale = d3 .scaleBand() .range([margin.top, margin.top + cellSize * yUnique.length]) .domain(yUnique) .round(true) .padding(cellPadding); const tooltip = d3tip() .style("border", "solid 1px black") .style("background-color", "white") .style("border-radius", "10px") .style("float", "bottom") .style("font-family", "sans-serif") .style("font-size", "0.8rem") .html( (event, d) => `

${d3.timeFormat("%d %b %Y")(d.date)}
${category} Attendance: ${d3.format(",")(d[category])}
Click to show individual events below

` ); // Apply tooltip to our SVG svg.call(tooltip); // Draw our cells const cellsGroup = svg.append("g").attr("id", "cells"); cellsGroup .selectAll("g") .data(data, (d) => `${x(d)}-${y(d)}`) .join((enter) => { const g = enter.append("g"); const cell = g .append("rect") .attr("x", (d) => xScale(x(d))) .attr("y", (d) => yScale(y(d))) .attr("width", yScale.bandwidth()) .attr("height", yScale.bandwidth()) .attr("rx", rx) .attr("fill", (d) => cScale(c(d))) .on("click", (event, d) => { fetchDailyData(d); mutable ccLink = buildURL(true, d); }) .on("mouseover.highlight", function (d) { d3.select(this) .raise() // bring to front .style("stroke", "grey") .style("stroke-width", 2); }) .on("mouseout.highlight", function (d) { d3.select(this).style("stroke", null); d3.select(status).text("highlight: none"); }) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); return g; }); // Draw the X axis labels. const xLabelGroup = svg.append("g").attr("id", "xLabels"); const xLabels = xUnit === d3.utcDay ? d3.utcMonday.range(...xDomain) // Mondays for daily data : xUnit === d3.utcWeek ? d3.utcMonth.range(...xDomain).map(d3.utcMonday) // First monday of the month : xUnit === d3.utcMonday ? d3.utcMonth.range(...xDomain).map(d3.utcMonday) // First monday of the month : xUnit === d3.utcMonth ? d3.utcYear.range(...xDomain) // First monday of the year : xUnit === d3.utcYear ? d3.utcYear.range(...xDomain, 10) // First monday of the decade : d3.utcYear.range(...xDomain); xLabelGroup .selectAll("g") .data(xLabels) .join((enter) => { const g = enter.append("g"); g.append("path") .attr("d", (d) => d3.line()([ [xScale(d) + yScale.step() / 2, margin.top - 2], [xScale(d) + yScale.step() / 2, margin.top - 10] ]) ) .attr("stroke", "black"); g.append("text") .text((d) => xFormat(d)) .attr("x", (d) => xScale(d) + yScale.step() / 2) .attr("y", margin.top - 15) .attr("alignment-baseline", "bottom") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "0.8rem"); return g; }); const yLabelGroup = svg.append("g").attr("id", "yLabels"); yLabelGroup .selectAll("text") .data(yUnique) .join((enter) => { const t = enter .append("text") .text((d) => d) .attr("x", margin.left - 5) .attr("y", (d) => yScale(d) + yScale.step() / 2) .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", "0.8rem"); return t; }); return Object.assign(svg.node(), { scales: { x: xScale, y: yScale, c: cScale } }); }36:[{"id":"ab78003b2ddf1ad6642c5ee39ebb9d984b0fb1cc3eec34ade724de78f17e0dace21b9b5dea732e67d68d3461fa6f9ca757dad1f82aac3780ef0bc7c9dafec8e0","href":"https://static.observableusercontent.com/files/ab78003b2ddf1ad6642c5ee39ebb9d984b0fb1cc3eec34ade724de78f17e0dace21b9b5dea732e67d68d3461fa6f9ca757dad1f82aac3780ef0bc7c9dafec8e0","name":"logo.svg","type":"image/svg+xml","lastModified":1667856937893.08,"size":5586}] 32:{"id":"7c5bf9b7cd8ca83f","slug":"features_api_heatmap","title":"Features API Heatmap Example","thumbnail":"cad01d90c77f02826d73242473fe3259d117aa4f160e4469377b36aa17e8dc16","access_level":"public","create_time":"$D2022-11-07T04:49:35.943Z","update_time":"$D2024-06-07T01:48:52.908Z","view_time":null,"first_public_time":"$D2022-11-13T23:14:52.712Z","has_unpublished_edits":null,"fork":{"id":"35ba7e5ebbf04804","slug":"calendar","title":"Calendar","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d6ee249ee95564d4","login":"predicthq","name":"PredictHQ","avatar_url":"https://avatars-next.observableusercontent.com/a4e3cd648700562a5437abc447acae27343ac62aabb5a668d31466aa55bc1fcb","tier":"pro_2024"},"version":1760,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"18a1a89d9411c98c","login":"glen","name":"Glen Alexander","avatar_url":"https://avatars-next.observableusercontent.com/8d5cfcc51eee1f5dce98a144749ab96d362b2a36a569d0bd44891e244a5692b7","tier":null}],"members":[{"type":"individual","id":"18a1a89d9411c98c","login":"glen","name":"Glen Alexander","avatar_url":"https://avatars-next.observableusercontent.com/8d5cfcc51eee1f5dce98a144749ab96d362b2a36a569d0bd44891e244a5692b7","tier":null,"role":"editor"},{"type":"team","id":"d6ee249ee95564d4","login":"predicthq","name":"PredictHQ","avatar_url":"https://avatars-next.observableusercontent.com/a4e3cd648700562a5437abc447acae27343ac62aabb5a668d31466aa55bc1fcb","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Features API Heatmap Example","cells":[{"id":1025,"value":"# Features API Heatmap Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":994,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":936,"value":"## Integrate PredictHQ's Event Attendance into a heatmap-styled Calendar\n\nThis provides an example of how to call [PredictHQ's Features API](https://www.predicthq.com/apis/features-api) and display the results in a heatmap-style calendar. The user may select a starting date, and the next 90 days will be displayed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1023,"value":"### API Token\nPlease enter a valid API Token below. Your API Token can be [created here](https://control.predicthq.com/clients).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1019,"value":"viewof APIToken = Inputs.text({\n label: \"API Token\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"---\n### Date selection\nThe start of the 90 day window to fetch attended events for:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":946,"value":"viewof startdate = Inputs.date({label: \"Start Date\", value: new Date()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"### Location Selection\nSelect the location to fetch events for:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"viewof location = Inputs.radio(new Map([\n [\"United States\", \"6252001\"],\n [\"California\", \"5332921\"],\n [\"San Francisco\", \"5391959\"],\n [\"London\", \"2643743\"],\n [\"Paris\", \"2988506\"],\n]), {value:\"6252001\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"### Category Selection\nSelect the individual category you are interested in, or use All Categories to see the total across all attendance-based events:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":844,"value":"viewof category = Inputs.radio(\n new Map([\n [\"All Categories\", \"Total\"],\n [\"Community\", \"Community\"],\n [\"Concerts\", \"Concerts\"],\n [\"Conferences\", \"Conferences\"],\n [\"Expos\", \"Expos\"],\n [\"Festivals\", \"Festivals\"],\n [\"Performing Arts\", \"Performing Arts\"],\n [\"Sports\", \"Sports\"]\n ]),\n { value: \"Total\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"key = Legend(chart2.scales.c, {\n title: \"Daily attendance\",\n tickSize: 12,\n height: 70,\n width: 1000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"chart2 = {\n const c = CalendarGrid(parsedData, {\n x: (d) => d3.utcMonday(d.date),\n y: (d) =>\n [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"][d.date.getUTCDay()],\n yDomain: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n c: (d) => d[category],\n cFormat: (c) => c,\n cScale: d3\n .scaleLinear()\n .domain(d3.extent(parsedData, (d) => d[category]))\n .range([\"pink\", \"#ff2364\"]),\n xUnit: d3.utcMonday,\n responsive: false,\n xDomain: [addDays(startdate, -20), addDays(startdate, 110)]\n });\n const node = d3\n .create(\"div\")\n .style(\"width\", width)\n .style(\"height\", 300)\n .style(\"overflow\", \"auto\")\n .node();\n node.appendChild(c);\n return Object.assign(node, { scales: c.scales });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"linktocontrolcenter = {\n return htl.html`View the selected day in Control Center`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"Inputs.table(dailyData.results, {\n columns: [\"title\", \"id\", \"category\", \"phq_attendance\"],\n header: {\n title: \"Event Title\",\n id: \"Event ID\",\n category: \"Category\",\n phq_attendance: \"Attendance\"\n },\n format: {\n id: (id) =>\n htl.html`${id}`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"---\n### Code to call API is shown below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1366,"value":"#### Call the Features API and retrieve JSON result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":810,"value":"data = APIToken == \"\"\n ? []\n : d3.json(\"https://api.predicthq.com/v1/features\", {\n method: \"POST\",\n body: JSON.stringify({\n active: {\n gte: startdate.toISOString().split(\"T\")[0],\n lte: addDays(startdate, 90).toISOString().split(\"T\")[0]\n },\n location: {\n place_id: [location]\n },\n phq_attendance_concerts: {\n stats: [\"sum\"]\n },\n phq_attendance_expos: {\n stats: [\"sum\"]\n },\n phq_attendance_festivals: {\n stats: [\"sum\"]\n },\n phq_attendance_sports: {\n stats: [\"sum\"]\n },\n phq_attendance_performing_arts: {\n stats: [\"sum\"]\n },\n phq_attendance_conferences: {\n stats: [\"sum\"]\n },\n phq_attendance_community: {\n stats: [\"sum\"]\n }\n }),\n headers: {\n \"Content-type\": \"application/json\",\n Authorization: \"Bearer \" + APIToken\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"#### Parse JSON response into a map suitable for displaying in a calendar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1543,"value":"mutable dailyData = {\n result: [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"#### Call the Events API to fetch the individual events for the day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1523,"value":"function fetchDailyData(d) {\n mutable dailyData =\n APIToken == \"\"\n ? []\n : d3.json(buildURL(false, d), {\n method: \"GET\",\n headers: {\n \"Content-type\": \"application/json\",\n Authorization: \"Bearer \" + APIToken\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1372,"value":"\n### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":973,"value":"function addDays(date, amount) {\n var result = new Date(date);\n result.setDate(result.getDate() + amount);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"function buildURL(CC, selectedDay) {\n var domain = CC\n ? \"https://control.predicthq.com/search\"\n : \"https://api.predicthq.com/v1\";\n var categories =\n category == \"Total\"\n ? \"conferences,expos,concerts,festivals,performing-arts,community,sports\"\n : category == \"Performing Arts\"\n ? \"performing-arts\"\n : category.toLowerCase();\n return (\n domain +\n \"/events?category=\" +\n categories +\n \"&place.scope=\" +\n location +\n \"&active.gte=\" +\n selectedDay[\"date\"].toISOString().split(\"T\", 1)[0] +\n \"&active.lte=\" +\n selectedDay[\"date\"].toISOString().split(\"T\", 1)[0] +\n \"&state=active\" +\n \"&active.tz=America/Los_Angeles\" +\n \"&sort=rank\" +\n \"&limit=25\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"mutable ccLink = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"