Questions tagged [observablehq]
Observable is a JavaScript computational web-notebooks for interactive data processing and visualization.
129
questions
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 ...
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 {...
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 ...
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....
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 ...
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 ...
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(...
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, ...
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 ...
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 ...
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&...
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
// ...
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....
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 ...
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?
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)...
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);
}
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 ...
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-...
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 ...
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 ...
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&...
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 ...
-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 ...
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,
...
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 ...
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 ...
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-...
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 ...
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:/...
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 = ...
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
...
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";
...
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....
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 ...
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 ...
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....
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 ...
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
{...
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: ...
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 ...
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 ...
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 ...
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 ...
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: ...
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 ...
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&...
-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 ...
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
// ...
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/...