2b:null 2c:["$","title",null,{"children":"Reusable Adjacent Charting template | Adjacent | Observable"}] 31:T121f,This guide explains how to use the `AdjacentChart` template for creating consistent, responsive visualizations for Adjacent News articles. ## Overview The `AdjacentChart` template allows you to create visualizations that: - Maintain consistent branding across all devices - Adapt responsively to different screen sizes - Share a cohesive visual language - Can be embedded in Adjacent News articles via Observable ## Getting Started ### 1. Import the Template Copy the full `AdjacentChart` function at the top of your notebook for standalone use. ### 2. Prepare Your Data Structure your data with: - A date field (typically named "date") - Series columns with values for each data point Example: ```javascript const data = [ { date: new Date("2025-04-22"), "Series A": 25, "Series B": 40 }, { date: new Date("2025-04-23"), "Series A": 30, "Series B": 45 }, // ...more data points ] ``` ### 3. Configure Your Chart Create your chart with the `AdjacentChart` function: ```javascript viewof myChart = AdjacentChart({ title: "My Chart Title", subtitle: "Based on prediction market data", data: myData, seriesNames: ["Series A", "Series B"], seriesColors: ["#E63946", "#1D3557"], xAxis: { field: "date", label: "Date", format: "%b %d" }, yAxis: { label: "Probability (%)", domain: [0, 100] }, width: width, aspectRatio: 0.625 // Optional parameters can be added/modified here }) ``` ## Configuration Options ### Required Parameters | Parameter | Description | |-----------|-------------| | `data` | Array of data objects | | `seriesNames` | Array of column names to display | | `xAxis.field` | The field name in your data to use for the x-axis | ### Common Optional Parameters | Parameter | Description | Default | |-----------|-------------|---------| | `title` | Chart title | "Chart Title" | | `subtitle` | Chart subtitle | "" | | `seriesColors` | Array of colors for each series | Predefined color palette | | `width` | Observable width function or number | 800 | | `aspectRatio` | Height to width ratio | 0.625 | | `showLegend` | Show legend | true | | `showWatermark` | Show Adjacent watermark | true | | `showEndLabels` | Show value labels at line ends | true | | `showDots` | Show dots on lines | true | | `showGrid` | Show grid lines | true | ## Responsive Behavior The template automatically: - Adjusts font sizes, margins, and spacings based on screen width - Shows the legend below the chart on mobile and as an overlay on desktop - Reduces the number of dots displayed on small screens - Adjusts the watermark size and position - Shows/hides end labels based on available space ## Branding Consistency The template ensures: - The Adjacent watermark appears in the same position - Font sizes and styles are consistent - Colors are applied consistently - Legends follow a consistent format ## Examples ### Basic Line Chart (India-Pakistan Conflict Visualization) ```javascript viewof indiaRisk = AdjacentChart({ title: "India Conflict Risk", subtitle: "Based on prediction market data", data: processedData, seriesNames: [ "India invade Pakistan before July", "India military action against Pakistan before June" ], seriesColors: ["#E63946", "#1D3557"], xAxis: { field: "date", label: "Date", format: "%b %d" }, yAxis: { label: "Probability (%)", domain: [0, 100] }, width: width }) ``` ### Index Chart (Single Series) ```javascript viewof indiaConflictRiskIndex = AdjacentChart({ title: "India Conflict Weighted Risk Index", subtitle: "Based on weighted prediction markets", data: indexData, seriesNames: ["India Conflict Risk Index"], seriesColors: ["#E63946"], xAxis: { field: "date", label: "Date", format: "%b %d" }, yAxis: { label: "Risk Index (%)", domain: [0, 100] }, width: width, showLegend: false, // One series, so no legend needed showDots: false // Cleaner look without dots }) ``` ## Embedding in Adjacent News Articles 1. Publish your Observable notebook 2. Use Observable's embed feature to generate an embed code 3. Insert the embed code into your Adjacent News article ## Customization Tips - Use a consistent color palette across visualizations - Maintain the aspect ratio for consistency across articles - Adjust the grid lines with `gridLines: [0, 20, 40, 60, 80, 100]` for custom intervals - Use `dotFrequency` to control dot density on lines ## Troubleshooting - If legends overlap, adjust positioning with custom styling - If data doesn't appear, check that series names match exactly with data column names - For performance issues with large datasets, reduce dots with higher `dotFrequency` values32:T2d9a,/** * AdjacentChart - A reusable template for creating consistent, responsive Observable charts * for Adjacent News visualizations across devices * * This template provides consistent styling, mobile responsiveness, and branding * across all Adjacent News visualizations. * * @param {Object} config - Configuration object with the following properties: * @param {string} config.title - Chart title * @param {string} config.subtitle - Chart subtitle * @param {Array} config.data - The dataset for the chart * @param {Array} config.seriesNames - Array of series names to display in the chart * @param {Array} config.seriesColors - Array of colors for each series (defaults provided if not specified) * @param {Object} config.xAxis - X-axis configuration (field, label, format) * @param {Object} config.yAxis - Y-axis configuration (label, domain, format) * @param {string} config.chartType - Type of chart ("line", "bar", "area", etc.) * @param {Function} config.width - Observable width function (or number) * @param {number} config.aspectRatio - Height to width ratio (default: 0.625) * @param {boolean} config.showLegend - Whether to show the legend (default: true) * @param {boolean} config.showWatermark - Whether to show the Adjacent watermark (default: true) * @param {boolean} config.showEndLabels - Whether to show value labels at the end of lines (default: true) * @param {boolean} config.showDots - Whether to show dots on lines (default: true) * @param {number} config.dotFrequency - How often to show dots (default: 7 for desktop, 14 for mobile) * @param {boolean} config.showGrid - Whether to show grid lines (default: true) * @param {Array} config.gridLines - Custom grid line positions (if not provided, reasonable defaults are used) * @returns {HTMLElement} - The chart container element */ function AdjacentChart(config) { // Default configuration values const defaultColors = ["#E63946", "#1D3557", "#2A9D8F", "#F4A261", "#457B9D", "#A8DADC"]; // Ensure required config properties if (!config.data) throw new Error("Data is required"); if (!config.xAxis || !config.xAxis.field) throw new Error("X-axis field is required"); if (!config.seriesNames || config.seriesNames.length === 0) throw new Error("At least one series name is required"); // Set default values for optional config config.title = config.title || "Chart Title"; config.subtitle = config.subtitle || ""; config.chartType = config.chartType || "line"; config.seriesColors = config.seriesColors || defaultColors; config.aspectRatio = config.aspectRatio || 0.625; config.showLegend = config.showLegend !== undefined ? config.showLegend : true; config.showWatermark = config.showWatermark !== undefined ? config.showWatermark : true; config.showEndLabels = config.showEndLabels !== undefined ? config.showEndLabels : true; config.showDots = config.showDots !== undefined ? config.showDots : true; config.showGrid = config.showGrid !== undefined ? config.showGrid : true; // Function to determine width based on container size const getResponsiveWidth = () => { // Get the container width (default to 800 if not available) const containerWidth = typeof config.width === 'function' ? config.width() : (config.width || 800); return Math.min(containerWidth, 800); // Cap at 800px max }; // Calculate responsive dimensions const chartWidth = getResponsiveWidth(); const chartHeight = chartWidth * config.aspectRatio; // Adjust font sizes based on width const titleSize = chartWidth < 500 ? 14 : 16; const subtitleSize = chartWidth < 500 ? 12 : 14; const labelSize = chartWidth < 500 ? 10 : 12; // Adjust margins for smaller screens const rightMargin = chartWidth < 500 ? 80 : 120; const leftMargin = chartWidth < 500 ? 40 : 60; const bottomMargin = chartWidth < 500 ? 30 : 40; const topMargin = chartWidth < 500 ? 30 : 40; // Adjust tick count for smaller screens const tickCount = chartWidth < 500 ? 4 : 8; // Determine dot frequency based on screen size const dotFrequency = config.dotFrequency || (chartWidth < 500 ? 14 : 7); // Set up basic marks array that will be populated based on config const marks = []; // Add grid lines if enabled if (config.showGrid) { const gridValues = config.gridLines || [0, 25, 50, 75, 100]; marks.push( Plot.ruleY(gridValues, { stroke: "#ccc", strokeDasharray: "3,3" }) ); } // Generate lines for each series for (let i = 0; i < config.seriesNames.length; i++) { const seriesName = config.seriesNames[i]; const color = config.seriesColors[i % config.seriesColors.length]; // Add the line mark marks.push( Plot.line(config.data, { x: config.xAxis.field, y: seriesName, stroke: color, strokeWidth: chartWidth < 500 ? 1.5 : 2 }) ); // Add dots if enabled if (config.showDots) { marks.push( Plot.dot( config.data.filter((d, i) => i % dotFrequency === 0), { x: config.xAxis.field, y: seriesName, fill: color, r: chartWidth < 500 ? 2 : 3, opacity: 0.7 } ) ); } // Add end labels if enabled and screen is large enough if (config.showEndLabels && chartWidth >= 500) { marks.push( Plot.text( config.data.filter((d, i) => i === config.data.length - 1), { x: config.xAxis.field, y: seriesName, text: (d) => `${d[seriesName]?.toFixed(1)}%`, dx: chartWidth < 600 ? 30 : 50, fill: color, fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ) ); } } // Create the basic chart using Plot const chart = Plot.plot({ title: config.title, subtitle: config.subtitle, width: chartWidth, height: chartHeight, style: { fontSize: labelSize, ".plot-title": { fontSize: titleSize + "px" }, ".plot-subtitle": { fontSize: subtitleSize + "px" } }, x: { label: config.xAxis.label || "", tickFormat: config.xAxis.format || "%b %d", tickCount: tickCount, grid: config.showGrid }, y: { label: config.yAxis.label || "", domain: config.yAxis.domain || [0, 100], grid: config.showGrid }, // Use responsive margins marginRight: rightMargin, marginLeft: leftMargin, marginBottom: bottomMargin, marginTop: topMargin, marks: marks }); // Determine legend font size const legendFontSize = chartWidth < 500 ? 11 : 10.5; // Calculate watermark position and size const watermarkTop = chartHeight / 2 + topMargin; const watermarkLeft = chartWidth / 2; const watermarkSize = chartWidth < 500 ? 30 : 60; // Create a container for the chart const chartContainer = html`

${chart} ${config.showWatermark ? html`

ADJACENT

` : ''}

`; // Create legend items HTML (will be used in both desktop and mobile views) if (config.showLegend) { const legendItemsHTML = config.seriesNames .map((name, index) => { const color = config.seriesColors[index % config.seriesColors.length]; const displayName = name.replace("?", ""); if (chartWidth < 500) { // Mobile legend items return `

${displayName}

`; } else { // Desktop legend items return `

${displayName}

`; } }) .join(""); // Add legend to the chart if (chartWidth < 500) { // Mobile: Create a wrapper that includes both chart and legend below it const wrapper = html`

${chartContainer}

${html([legendItemsHTML])}

`; wrapper.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return wrapper; } }); observer.observe(wrapper); } return wrapper; } else { // Desktop: Add legend as an overlay const legendElement = html`

${html([legendItemsHTML])}

`; chartContainer.appendChild(legendElement); chartContainer.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return chartContainer; } }); observer.observe(chartContainer); } return chartContainer; } } else { // No legend chartContainer.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return chartContainer; } }); observer.observe(chartContainer); } return chartContainer; } } // Example usage: // viewof myChart = AdjacentChart({ // title: "India Conflict Risk", // subtitle: "Based on prediction market data", // data: processedData, // seriesNames: ["India invade Pakistan before July", "India military action against Pakistan before June", "Military strike on Pakistan by Friday", "Pakistan reopen airspace to India before May"], // seriesColors: ["#E63946", "#1D3557", "#2A9D8F", "#F4A261"], // xAxis: { field: "date", label: "Date", format: "%b %d" }, // yAxis: { label: "Probability (%)", domain: [0, 100] }, // width: width, // aspectRatio: 0.625, // showLegend: true, // showWatermark: true, // showEndLabels: true, // showDots: true, // showGrid: true // })33:T9b3,// Sample data for demonstration - in production, this would be your actual data sampleData = [ { date: new Date("2025-04-22"), "India invade Pakistan before July": 15, "India military action against Pakistan before June": 25, "India military strike on Pakistan by Friday": 6, "Pakistan reopen airspace to India before May": 0.1 }, { date: new Date("2025-04-23"), "India invade Pakistan before July": 16, "India military action against Pakistan before June": 35, "India military strike on Pakistan by Friday": 5, "Pakistan reopen airspace to India before May": 0.4 }, { date: new Date("2025-04-24"), "India invade Pakistan before July": 19, "India military action against Pakistan before June": 57, "India military strike on Pakistan by Friday": 9, "Pakistan reopen airspace to India before May": 0.7 }, { date: new Date("2025-04-25"), "India invade Pakistan before July": 18, "India military action against Pakistan before June": 58, "India military strike on Pakistan by Friday": 4, "Pakistan reopen airspace to India before May": 0.3 }, { date: new Date("2025-04-26"), "India invade Pakistan before July": 20, "India military action against Pakistan before June": 62, "India military strike on Pakistan by Friday": 3, "Pakistan reopen airspace to India before May": 0.2 }, { date: new Date("2025-04-27"), "India invade Pakistan before July": 28, "India military action against Pakistan before June": 71, "India military strike on Pakistan by Friday": 2, "Pakistan reopen airspace to India before May": 0.2 }, { date: new Date("2025-04-28"), "India invade Pakistan before July": 19, "India military action against Pakistan before June": 69, "India military strike on Pakistan by Friday": 1, "Pakistan reopen airspace to India before May": 0.1 }, { date: new Date("2025-04-29"), "India invade Pakistan before July": 27, "India military action against Pakistan before June": 79, "India military strike on Pakistan by Friday": 25, "Pakistan reopen airspace to India before May": 0.1 }, { date: new Date("2025-04-30"), "India invade Pakistan before July": 15, "India military action against Pakistan before June": 61, "India military strike on Pakistan by Friday": 15, "Pakistan reopen airspace to India before May": 0.1 }, { date: new Date("2025-05-01"), "India invade Pakistan before July": 12.5, "India military action against Pakistan before June": 51, "India military strike on Pakistan by Friday": 2.4, "Pakistan reopen airspace to India before May": 0.1 } ];34:Tae0,// Example with more markets and different configuration viewof expandedIndiaRisk = AdjacentChart({ title: "India Conflict Risk", subtitle: "Based on prediction market data with China-India conflict included", data: [ ...sampleData, // We'll extend the data to include China-India conflict markets for this example { date: new Date("2025-04-22"), "China x India military clash by June 30": 3, "China x India military clash in 2025": 9 }, { date: new Date("2025-04-23"), "China x India military clash by June 30": 3, "China x India military clash in 2025": 9 }, { date: new Date("2025-04-24"), "China x India military clash by June 30": 3.5, "China x India military clash in 2025": 9.5 }, { date: new Date("2025-04-25"), "China x India military clash by June 30": 3.3, "China x India military clash in 2025": 9.7 }, { date: new Date("2025-04-26"), "China x India military clash by June 30": 3.4, "China x India military clash in 2025": 9.8 }, { date: new Date("2025-04-27"), "China x India military clash by June 30": 3.7, "China x India military clash in 2025": 10 }, { date: new Date("2025-04-28"), "China x India military clash by June 30": 3.6, "China x India military clash in 2025": 10.1 }, { date: new Date("2025-04-29"), "China x India military clash by June 30": 3.8, "China x India military clash in 2025": 10.3 }, { date: new Date("2025-04-30"), "China x India military clash by June 30": 3.8, "China x India military clash in 2025": 10.4 }, { date: new Date("2025-05-01"), "China x India military clash by June 30": 3.8, "China x India military clash in 2025": 10.5 } ].map(d => ({ date: d.date, "India invade Pakistan before July": d["India invade Pakistan before July"] || null, "India military action against Pakistan before June": d["India military action against Pakistan before June"] || null, "India military strike on Pakistan by Friday": d["India military strike on Pakistan by Friday"] || null, "Pakistan reopen airspace to India before May": d["Pakistan reopen airspace to India before May"] || null, "China x India military clash by June 30": d["China x India military clash by June 30"] || null, "China x India military clash in 2025": d["China x India military clash in 2025"] || null })), seriesNames: [ ...indiaRiskMarketNames, "China x India military clash by June 30", "China x India military clash in 2025" ], seriesColors: ["#E63946", "#1D3557", "#2A9D8F", "#F4A261", "#457B9D", "#A8DADC"], xAxis: { field: "date", label: "Date", format: "%b %d" }, yAxis: { label: "Probability (%)", domain: [0, 100] }, width: width, aspectRatio: 0.625, showLegend: true, showWatermark: true, showEndLabels: true, showDots: true, showGrid: true })35:T57e,// Example for the weighted index chart with different configuration viewof indiaConflictRiskIndex = AdjacentChart({ title: "India Conflict Weighted Risk Index", subtitle: "Based on weighted prediction markets for India-Pakistan and India-China conflicts", data: [ { date: new Date("2025-04-22"), "India Conflict Risk Index": 25 }, { date: new Date("2025-04-23"), "India Conflict Risk Index": 22 }, { date: new Date("2025-04-24"), "India Conflict Risk Index": 26 }, { date: new Date("2025-04-25"), "India Conflict Risk Index": 27 }, { date: new Date("2025-04-26"), "India Conflict Risk Index": 30 }, { date: new Date("2025-04-27"), "India Conflict Risk Index": 37 }, { date: new Date("2025-04-28"), "India Conflict Risk Index": 32 }, { date: new Date("2025-04-29"), "India Conflict Risk Index": 36 }, { date: new Date("2025-04-30"), "India Conflict Risk Index": 24 }, { date: new Date("2025-05-01"), "India Conflict Risk Index": 17.7 } ], seriesNames: ["India Conflict Risk Index"], seriesColors: ["#E63946"], xAxis: { field: "date", label: "Date", format: "%b %d" }, yAxis: { label: "Risk Index (%)", domain: [0, 100] }, width: width, aspectRatio: 0.625, showLegend: false, // Only one series, so legend not needed showWatermark: true, showEndLabels: true, showDots: false, // Let's keep this one cleaner without dots showGrid: true })36:[] 2f:{"id":"4a8012560d9f5c20","slug":"reusable-adjacent-charting-template","title":"Reusable Adjacent Charting template","thumbnail":"0d28c9be84a1b49dec1802036ed560fb9307296c194d7cc61ee19061fe9cb9ee","access_level":"public","create_time":"$D2025-05-01T20:31:23.013Z","update_time":"$D2025-05-03T08:10:46.363Z","view_time":null,"first_public_time":"$D2025-05-03T11:28:38.543Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"59b2aaa9189b56d4","login":"adjacent","name":"Adjacent","avatar_url":"https://avatars-next.observableusercontent.com/e34bfda26f2a3e11bf04364a685b422fda7ad5630974dadb7c20559fdf8ea883","tier":"pro_2024"},"version":53,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d75e52b48086387","login":"dougiebuckets","name":"dougiebuckets","avatar_url":"https://avatars-next.observableusercontent.com/d55596be54f2db1cfdf1dd98b171dbdcc2e8c228c20ce7d20d50902a10772d44","tier":null}],"members":[{"type":"team","id":"59b2aaa9189b56d4","login":"adjacent","name":"Adjacent","avatar_url":"https://avatars-next.observableusercontent.com/e34bfda26f2a3e11bf04364a685b422fda7ad5630974dadb7c20559fdf8ea883","tier":"pro_2024","role":"editor"},{"type":"individual","id":"4d75e52b48086387","login":"dougiebuckets","name":"dougiebuckets","avatar_url":"https://avatars-next.observableusercontent.com/d55596be54f2db1cfdf1dd98b171dbdcc2e8c228c20ce7d20d50902a10772d44","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Reusable Adjacent Charting template","cells":[{"id":0,"value":"# Reusable Adjacent Charting template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"The goal of the following is to have a consistent and reusable template for data visualizations from a branding (e.g., Adjacent watermark consistently placed in the same spot) and formatting perspective (consistency with X and Y axes), and so that they are mobile responsive on nearly all devices (e.g., desktops, phones, tablets, etc)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Here are specific implementation examples that shows how to use our template with data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// Define the market names for this chart\nindiaRiskMarketNames = [\n \"India invade Pakistan before July\",\n \"India military action against Pakistan before June\",\n \"India military strike on Pakistan by Friday\",\n \"Pakistan reopen airspace to India before May\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// This example shows how to implement the India Conflict Risk visualization\n// using our new AdjacentChart template function\n\n// Create the chart using our template\nviewof indiaRisk = AdjacentChart({\n title: \"India Conflict Risk\",\n subtitle: \"Based on prediction market data\",\n data: sampleData,\n seriesNames: indiaRiskMarketNames,\n seriesColors: [\"#E63946\", \"#1D3557\", \"#2A9D8F\", \"#F4A261\"],\n xAxis: { field: \"date\", label: \"Date\", format: \"%b %d\" },\n yAxis: { label: \"Probability (%)\", domain: [0, 100] },\n width: width, // This assumes 'width' is available in your Observable notebook\n aspectRatio: 0.625,\n showLegend: true,\n showWatermark: true,\n showEndLabels: true,\n showDots: false,\n showGrid: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"