Questions tagged [observablehq]

Observable is a JavaScript computational web-notebooks for interactive data processing and visualization.

Filter by
Sorted by
Tagged with
0 votes
0 answers
31 views

How to use observablehq to plot N line charts having shared zooming and tooltip?

I want to mimick the functionalities of Grafana due to its limitation in ObservableHQ. I have simulated timeseries of 100 sensors and the x starts from 0 to 300s with steps of 1. Hence, all sensors ...
Selva's user avatar
  • 961
0 votes
0 answers
118 views

D3.js OrgChart - How can make some nodes with different styles (compact or non-compact)

I used d3 OrgChart and implemented my code as below: d3.json( url.href ).then((dataFlattened) => { modes = modes.map(element => { if (element.checked) { element.checked = false; } else {...
Parsa Saei's user avatar
  • 1,283
0 votes
1 answer
50 views

Creating a new array from an existing array using .Map

I have this code: const newArray = sheet.map((obj) => { const { Name, reppertota, dempertota } = obj; return { Name, reppertota, dempertota }; }); "sheet" is the name of my ...
zbmm's user avatar
  • 1
1 vote
1 answer
150 views

How to style ticks in Observable HQ?

Chart with code and wrong data display I have a problem styling the x-axis of a simple line chart in Observable HQ so that it displays years. Currently, it only shows the years with decimal separators....
Luke's user avatar
  • 11
1 vote
2 answers
187 views

Observable Plot: Associate path with coresponding mark

When creating a list of marks (e.g. Plot.line) as part of an options object to Plot.plot there seens no way know which mark is responsible for which path object. I can iterate through all marks and ...
Candlejack's user avatar
2 votes
2 answers
154 views

observable js input options based on selected input before

I'm pretty new to observable js (or rather anything js / html related), so this might be a very stupid question and I might not have grasped some of the core concepts. I'd be super thankful for any ...
Jazz's user avatar
  • 31
0 votes
1 answer
44 views

How do you syncronize a field from Inputs.form in ObservableHQ?

I have a notebook with several grouped forms that are using Inputs.form and I would like to synchronize them (i.e. https://observablehq.com/@observablehq/synchronized-inputs), such as with Inputs.bind(...
xLegoz's user avatar
  • 3
1 vote
1 answer
184 views

Is it possible to use Observable Data Table Cell in Quarto?

I would like to use Observable Data Table Cell for its superb filtering capabilities and data summaries, but I would like to use it in Quarto documents. Is it possible? It seems to me that it is, ...
Jakub.Novotny's user avatar
0 votes
1 answer
254 views

How to show distinct datasets in stacked bar chart with Observable Plot?

I'm trying to visualise a seemingly simple income vs expenses chart in form of stacked bar chart with Observable Plot. While I can more or less visualise a single dataset, I'm not sure if showing two ...
ALx's user avatar
  • 621
0 votes
1 answer
71 views

How to use sparklines in AG Grid with observablehq?

A couple of months ago, I created an observablehq based AG Grid table with sparklines. Recently, the sparklines stopped working, and I am not sure why. Here is a notebook with an example that used to ...
Jakub.Novotny's user avatar
0 votes
1 answer
64 views

How to make a faceted cell graph in ObservableHQ?

I have the following array of objects: [{ "userid": 1, "groupid": 66123, "date_joined": "2023-01-01", "d0": "10", "d1": "6&...
Aditya Mohile's user avatar
2 votes
1 answer
119 views

Replacing colored circles with image circles using javascript d3 visualization

I am trying to replace the colored circles with image circles. The following plot is made using d3 in javascript. I cannot add image due to my less than 10 rating. enter image description here // ...
Maaz's user avatar
  • 19
1 vote
3 answers
583 views

How to highlight a line when mouse over it in observable plot using JavaScript?

My chart looks like so:: and here is my code: linePlot = Plot.plot({ marginLeft: 60, // space to the left of the chart y: { type: "log", // set the type }, marks: [ Plot....
new student's user avatar
0 votes
1 answer
112 views

Cannot pan SVG when the cursor is on the svg itself in D3.js

I've made a simple Zoom & Pan notebook in ObservableHQ.com with D3.js I have two questions: https://observablehq.com/d/c63434913a56fbb2 If the curson is on the black square (i.e. SVG), it dosen't ...
FractalCitta's user avatar
1 vote
1 answer
64 views

Is it possible to add a class to an input in observablehq?

I would like to add a custom class to an observablehq input so that Bootstrap styling can be applied (e.g. Inputs.select). Is this possible?
Jakub.Novotny's user avatar
0 votes
2 answers
134 views

Is it possible to create a searchable multi select box in observablehq?

I would like to create a searchable multi select box in observablehq that would not consume too much space when, for example, 50+ values are selected (in my usecase, all values are selected by default)...
Jakub.Novotny's user avatar
1 vote
2 answers
67 views

Is it possible to use the for...of syntax for a for loop in observablehq?

In regular JavaScript, one can write a for loop using the for...of syntax. Is this possible with observablehq? const array1 = [1, 2, 3]; for (const element of array1) { console.log(element); }
Jakub.Novotny's user avatar
1 vote
1 answer
163 views

observablehq: is it possible to have inputs with custom html?

I would like to have multiple inputs, such as Inputs.select, collapsed into an accordion menu in an observablehq notebook. I managed to create an accordion menu using custom html (js/css/html), but I ...
Jakub.Novotny's user avatar
0 votes
1 answer
438 views

filter data and update d3.js sankey diagram in react

i want to make a react app that allows to filter a sankey-diagram with a slider. I'm rather new to react, so i'm still a bit overwhelmed. This is the current state: https://codesandbox.io/s/react-d3-...
sisyphos 's user avatar
1 vote
2 answers
232 views

AG Data Grid table: generate a Vega-Lite chart that updates automatically

I would like to use Ag Data Grid filtered data to generate plots in Vega-Lite that update automatically whenever the filter(s) are changed. I would prefer to have the implementation in an observablehq ...
Jakub.Novotny's user avatar
0 votes
1 answer
96 views

Is it possible to use Perspective Data Grid in observablehq?

I tried to use Perpective Data Grid in observablehq, but I am struggling to reproduce even the simpliest examples from the Perspective documentation such as the one below. I fear it is because I do ...
Jakub.Novotny's user avatar
0 votes
2 answers
403 views

How to wrap long tick text in Observablehq using the Plot.plot function?

How to wrap long tick text in Observable using the Plot.plot function? Here is an example with D3: svg.select(".x_axis") .call(xAxis.tickFormat(d3.timeFormat("%d-%m-%Y %H:%M:%S&...
dergroncki's user avatar
0 votes
1 answer
51 views

How to use Tabulator JavaScript library in observablehg?

I would like to use the Tabulator JavaScript library as part of an observablehq notebook, but for some reason I can't make it work. Below is an example. Works fine in browser, but I could not make it ...
Jakub.Novotny's user avatar
-1 votes
1 answer
26 views

access node data and fill accordingly on observablehq forcegraph

I am accessing the following sample page on observablehq. Force directed graph At the moment the page colors node based on group. I am struggling to do the following: colorfill (with a specific ...
dhuvvamundha's user avatar
0 votes
2 answers
225 views

Quarto: Use js-object defined in cell above

So I am creating an object in a cell in a quarto-file like this: ```{ojs} { { const persons = { mike: { age: 32, height: 180, }, anna: { age: 32, height: 175, ...
Lenn's user avatar
  • 1,323
0 votes
2 answers
135 views

Is it possible to add totals to observablehq inputs.Table

Is it possible to add a total row in inputs.Table from Observablehq? The idea is to have a column aggregate such as sum or mean. I searched through the inputs.Table documentation, but it does not seem ...
Jakub.Novotny's user avatar
3 votes
1 answer
540 views

Use dataframe created in R codechunk in ojs codechunk in quarto

I'm completely new to using quarto. But one thing I wonder is if there is any chance to use a dataframe created "on the fly" in the quarto document in an observable (ojs) chunk, instead of ...
Lenn's user avatar
  • 1,323
0 votes
1 answer
73 views

D3 stacked chart---problems with stack()

I've been recently trying to recreate Mike Bostock's stacked chart, in the form he's presented in an Observable notebook here: https://observablehq.com/@mbostock/most-popular-operating-systems-2003-...
Rafal Kleczek's user avatar
1 vote
0 answers
1k views

Interactive Sequence diagram using mermaid.js producing parse errors in Observable Notebooks

I tried creating an interactive sequence diagram inspired by https://observablehq.com/@tomlarkworthy/animated-sequence-diagrams The (required) diagram is as shown below: However when I am trying to ...
User 1426833's user avatar
1 vote
1 answer
297 views

Save High Resolution PNG with included Image in Chart Using d3.js on ObservableHQ.com

When creating a chart with D3.js, I can include an external image using : svg.append("svg:image").attr("x", 100).attr("y", 100).attr( "xlink:href", "https:/...
FractalCitta's user avatar
0 votes
1 answer
153 views

How can we proramatically generate vega grammar JSON from vega-lite plot?

I am able to get vega json grammar on local installation of nodejs with vega-lite and vega-lite-api installed through npm as follows: vl = require('vega-lite') vla = require('vega-lite-api') data = ...
Mahesha999's user avatar
0 votes
1 answer
356 views

D3 - Can't create line chart with time data

This is my first time with D3 and I am trying to create a line chart. I forked from this example: https://observablehq.com/@d3/line-chart My fork is here: https://observablehq.com/d/f98c480a077a03ac ...
rahulthewall's user avatar
1 vote
1 answer
716 views

Integrating Plot into Svelte

How to integrate @observablehq/plot in Svelte? Below is the code, currently working for me, is there a better way to integrate? <script> import * as Plot from "@observablehq/plot"; ...
hashg's user avatar
  • 806
0 votes
1 answer
693 views

D3 - How can I put an SVG into a DIV via a function?

To reuse code I want to put my SVG into a function and call it as needed. Once I select the DIV what is the appropriate construct to render the SVG inside it? ... if (intLocations.includes(comm....
kalmdown's user avatar
  • 601
0 votes
1 answer
1k views

Adding Tooltip Functionality to ObservableHQ Plot Locally

Would there be an easy way to implement this addTooltip function from Mike Freeman's Plot Tooltip Notebook within a local vanilla JavaScript environment? In addition, what would be the best way to ...
Scott Franz's user avatar
0 votes
1 answer
328 views

How to add non-overlapping polylines and text labels to 3D pie chart using d3.js?

I have commented the extra code on the already existing code written by DavidB and created this example to extract only one 3d pie chart. I would like to add polylines(non-overlapping) and text labels ...
Vamsi Yandapalli's user avatar
0 votes
2 answers
1k views

Getting "SyntaxError: Unexpected token" in Observable

I was trying vega-lite-api on observablehq here. This is my code: Putting these two in different cells work: obj = vl.markPoint() .data(df) .encode(vl.y().fieldN('city')); In next cell: obj....
Rnj's user avatar
  • 1,097
1 vote
0 answers
133 views

How to create gaps when using group / groupX / groupY in Observable Plot?

On line charts "if some of the x or y channel values are undefined (or null or NaN), gaps will appear between adjacent points". If my dataset contains such undefined values, how can I ...
Markus Weninger's user avatar
0 votes
1 answer
324 views

D3.js - Issue creating normalised stacked bar chart using example function on Obsevablehq

I'm having issues using the function provided at: https://observablehq.com/@d3/stacked-normalized-horizontal-bar The data i'm passing into the function is in the format that is used as an example {...
Jake Clifford's user avatar
1 vote
1 answer
472 views

How to use markes on a line graph in Observable Plot?

While working with Observable Plot, I stumbled across the markers section in the API documentation. Yet, I cannot figure out how to make it work. Imagine I have the following mark: Plot.line(data, {x: ...
Markus Weninger's user avatar
2 votes
1 answer
707 views

How to create one line plot per color series in Observable Plot?

Description: I am playing around with Observable Plot an really like how easy it is to set up simple plots. Now I have a little "more advanced" chart that I want to plot and need help. In my ...
Markus Weninger's user avatar
0 votes
0 answers
15 views

D3.js with Observable, problem with event handler [duplicate]

I don't understand why my click event handler doesn't work. I know the event handler is running because I can see output for the three console.log() statements. The trouble is that the click event ...
user3344266's user avatar
1 vote
1 answer
143 views

import and use remark & rehype plugins in Observable

Import Stubborn Modules in Observable With the introduction of require, observable has enabled us to use thousands of open-source JavaScript modules in notebooks. This has worked fine couple of years ...
Gangula's user avatar
  • 5,551
0 votes
1 answer
95 views

How to do pandas-like shift operation on an arquero table (or other tables) for plotting in ObservableHQ?

For example, you might have something like this in your plotting spec for a scatter: {"data": {"values": mydata.select("x", "y")}, ... } But suppose you want ...
mathtick's user avatar
  • 6,600
2 votes
1 answer
1k views

Animating data transition in Observable Plot

I'm using the Javascript library Observable Plot to render a bar chart on a webpage (not on Observable itself). I would like the bars in the bar chart to transition in response to changes in the data: ...
Olof's user avatar
  • 23
0 votes
1 answer
212 views

How to copy multiple cells between notebooks in ObservableHQ?

It seems I can COPY the cells by selecting one and then Shift+Down etc ... check marks appear on all the cell, I can copy it, but then pasting just dumps everything into one cell. And I think the ...
mathtick's user avatar
  • 6,600
0 votes
1 answer
117 views

observable Scrubber notebook convertion into vanilla JS

I am trying to convert observablehq 'Scrubber' notebook into vanilla JS. My current code looks like this: <!DOCTYPE html> <meta charset="utf-8"> <title>Scrubber</title&...
Sosa's user avatar
  • 141
-1 votes
1 answer
184 views

Loading excel files in observablehq

Observable has a built-in method for loading excel files. The docs say it's based on exceljs. However, since it appears to be a cut-down version, I wanted to use exceljs directly. I created this ...
John's user avatar
  • 6,751
0 votes
1 answer
135 views

D3 zoom breaks mouse wheel zooming after using zoomIdentity

When I use d3-zoom and programatically call the scaleTo function using zoomIdentity I cannot zoom using the mouse wheel anymore. How do I fix this issue? https://observablehq.com/d/8a5dfbc7d858a16b // ...
pac w's user avatar
  • 657
1 vote
0 answers
845 views

How to resolve TypeScript declaration file error with observablehq/plot

I am using react and Next.js, I am following this guide https://github.com/observablehq/plot with the goal to render/visualize some data from a heroku postgres DB. I used npm install @observablehq/...
Alejandro Zapien's user avatar