Mihael Ankerst
04/04/2024, 11:00 PMAndy Luu
04/05/2024, 2:51 PMRoy Pardee
04/06/2024, 3:27 PMSaurabh Lomte
04/08/2024, 10:14 AMFrank Contrepois
04/08/2024, 1:13 PMannotations && [
Plot.ruleX(annotations, {x: "date", strokeOpacity: 0.1}),
Plot.text(annotations, {
x: "date",
text: "text",
//href: "href",
//target: "_blank",
rotate: 0,
dy: (d) => d.text.startsWith("Beginning")?3:20,
dx: -3,
frameAnchor: "top-right",
lineAnchor: "bottom",
fontVariant: "tabular-nums",
fill: "currentColor",
stroke: "var(--theme-background)",
})
],
Michael Sharman
04/09/2024, 3:59 AMcompromise.syllables
and have an interesting case where the word however
is being returned as a single syllable.
const words = nlp(sentence).terms().out('array');
const longWords = words.filter(word => {
const syllables = nlp(word).syllables();
const flatSyllables = syllables.flat();
// `however` is returned as a single syllable
});
Michael Sharman
04/09/2024, 3:59 AMconst sentence = 'However, after having a baby, if a mother keeps the extra weight she gained during pregnancy, this can be harmful to her long-term health.';
Frank Contrepois
04/09/2024, 4:12 PMLuis
04/10/2024, 4:38 PMnum_trajets
is the count of journeys) :
journey_duration num_trajets
0 75,850
5 811,743
10 1,358,633
15 1,459,553
20 1,414,174
25 1,287,003
...
80 11,191
85 7,530
90 37,313
The last bin (90) sum all values that are above or equal to 90 minutes. I tested two options, use rectY as the x scale is continuous :
Plot.plot({
marginLeft: 100,
marginRight: 50,
marginTop:60,
width:width,
y: {grid: true},
x : {type:"linear", domain:[0,90], tickFormat: (d)=> d<90 ? d: '90+'},
marks: [
Plot.rectY(duration_test,
{
y: "num_trajets",
x1: (d) => (d.journey_duration),
x2: (d) => (d.journey_duration+5),
tip:true,
fill:'#344C8A',
stroke:'black',
strokeWidth:0.5
}),
Plot.ruleY([0])
]
})
The result is in the first attached image. But maybe it is a bit misleading to have this last bar ?
Another option was to pre-compute the bins as interval strings and use area (second image attached)
Do you have some tips for handling those outliers in histogram viz ?Jo Wood
04/11/2024, 10:42 AMVishal Apte
04/11/2024, 11:05 PM[
{"date": "YYYY-MM-DD", "value": 123.45, "curve": "abc"},
{"date": "YYYY-MM-DD", "value": 234.56, "curve": "bcd"},
...
]
I started with...
const extent = d3.extent(data, d => new Date(d.date));
let firstYear = extent[0].getFullYear();
let lastYear = extent[1].getFullYear();
const years = d3.range(firstYear, lastYear + 1, 1);
plot = Plot.plot({
x: {
tickFormat: d3.timeFormat("%Y"),
ticks: years.map(y => y+"-01-01"),
},
marks: [
Plot.barY(data, {x: date, y: value, fill: curve, stroke: curve})
],
}
The xaxis looks terrible with this approach. If I first convert date strings to dates:
data.forEach(d => {
d.date = new Date(d.date);
});
and change ticks to
ticks: years.map(y => new Date(y, 0, 1)),
I still get the same warnings:
• some data associated with the x scale are strings that appear to be dates (e.g., YYYY-MM-DD). If these strings represent dates, you should parse them to Date objects. Dates are typically associated with a "utc" or "time" scale rather than a "band" scale. If you are using a bar mark, you probably want a rect mark with the interval option instead; if you are using a group transform, you probably want a bin transform instead. If you want to treat this data as ordinal, you can suppress this warning by setting the type of the x scale to "band".
• the x-axis ticks appear to not align with the scale domain, resulting in no ticks. Try different ticks?
What should I do differently?Alexander
04/12/2024, 6:45 PMAbdulfettah Adwani
04/13/2024, 8:32 AMLuis
04/14/2024, 1:09 PMimport { DuckDBClient } from "npm:@observablehq/duckdb";
But when I run node docs/data/trips_sample.json.js
to test my data loader, I get the following error :
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'npm:'
Brent Sullivan
04/16/2024, 7:45 AMAsyncGenerator {}
, not an array, from what I can tell.
Later on, when I attempt to set up table search...
const searchResults = view(Inputs.search(olympians, {
datalist: ["mal", "1986", "USA gym"],
placeholder: "Search athletes"
}))
and then...
Inputs.table(searchResults)
I get...
TypeError: data is not iterable
because searchResults
is an AsyncGenerator
not an array.
Maybe I'm missing something obvious.
How do I get this...
Inputs.table(searchResults)
to work?Aditya Rana
04/16/2024, 8:52 AMTypeError: Failed to resolve module specifier "torii-sdk". Relative references must start with either "/", "./", or "../".
RuntimeError: Failed to resolve module specifier "torii-sdk". Relative references must start with either "/", "./", or "../".
Brent Sullivan
04/16/2024, 5:43 PMyarn deploy --debug
Deploying to Hello Framework (@brent-sullivan-ws/hello-framework).
│
◇ What changed in this deploy?
│ adviser table
│
(node:52285) ExperimentalWarning: buffer.File is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
◐ 51 / 51 _npm/@observablehq/plot@0.6.14/_esm.js.│
■ Error: Unexpected response status 520
and...
There is an issue between Cloudflare's cache and your origin web server. Cloudflare monitors for these errors and automatically investigates the cause. To help support the investigation, you can pull the corresponding error log from your web server and submit it our support team. Please include the Ray ID (which is at the bottom of this error page).</span> <a rel="noopener noreferrer" href="<https://support.cloudflare.com/hc/en-us/articles/200171936-Error-520>">Additional troubleshooting resources
But...
ping <http://api.observablehq.com|api.observablehq.com>
Seems fine.
Any issues I should know about. I can dump the full log if that's helpful once I know how to squash user input.Madhavanesh Kannan
04/17/2024, 9:28 AMError: Cannot find module 'node-resolve:empty.js'
Require stack:
- /home/madhavaneshk/torii-ui-assets/node_modules/bn.js/noop.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
at Function.resolve (node:internal/modules/helpers:187:19)
at resolveNodeImportInternal (file:///home/madhavaneshk/torii-ui-assets/node_modules/@observablehq/framework/dist/node.js:25:35)
at Object.resolve (file:///home/madhavaneshk/torii-ui-assets/node_modules/@observablehq/framework/dist/node.js:111:46)
at file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:19611:40
at async PluginDriver.hookFirstAndGetPlugin (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:19511:28)
at async resolveId (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:18192:26)
at async ModuleLoader.resolveId (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:18595:15)
at async Object.handler (file:///home/madhavaneshk/torii-ui-assets/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:1318:36)
at async PluginDriver.hookFirstAndGetPlugin (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:19511:28) {
code: 'PLUGIN_ERROR',
requireStack: [ '/home/madhavaneshk/torii-ui-assets/node_modules/bn.js/noop.js' ],
pluginCode: 'MODULE_NOT_FOUND',
plugin: 'commonjs--resolver',
hook: 'resolveId',
id: '/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/math/build/index.js',
watchFiles: [
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/math/build/index.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/math/build/decimal.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/math/build/integers.js'
]
}
brorand → docs/.observablehq/cache/_node/brorand@1.1.0/index.js
libsodium-sumo → docs/.observablehq/cache/_node/libsodium-sumo@0.7.13/index.js
bn.js → docs/.observablehq/cache/_node/bn.js@4.12.0/index.js
Error [RollupError]: Expected ';', '}' or <eof>
at getRollupError (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
... 4 lines matching cause stack trace ...
at async ModuleLoader.addModuleSource (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:18729:13) {
cause: Error [RollupError]: Expected ';', '}' or <eof>
at getRollupError (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
at ParseError.initialise (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:11170:28)
at convertNode (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:12915:10)
at convertProgram (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:12232:12)
at Module.setSource (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:14076:24)
at async ModuleLoader.addModuleSource (file:///home/madhavaneshk/torii-ui-assets/node_modules/rollup/dist/es/shared/node-entry.js:18729:13) {
code: 'PARSE_ERROR',
pos: 10
},
code: 'PLUGIN_ERROR',
id: '/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic.js',
pos: 10,
loc: {
column: 8,
file: '/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/package.json',
line: 2
},
frame: '1: {\n' +
'2: "name": "elliptic",\n' +
' ^\n' +
'3: "version": "6.5.5",\n' +
'4: "description": "EC cryptography",',
pluginCode: 'PARSE_ERROR',
plugin: 'commonjs--resolver',
hook: 'resolveId',
watchFiles: [
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/utils.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curve/index.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curves.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/ec/index.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/eddsa/index.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curve/base.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curve/short.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curve/mont.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/curve/edwards.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/precomputed/secp256k1.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/ec/key.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/ec/signature.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/eddsa/key.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/lib/elliptic/eddsa/signature.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/elliptic/package.json'
],
[Symbol(augmented)]: true
}
Error: Transform failed with 1 error:
<stdin>:3:223: ERROR: Expected ")" but found ";"
at failureErrorWithLog (/home/madhavaneshk/torii-ui-assets/node_modules/esbuild/lib/main.js:1651:15)
at /home/madhavaneshk/torii-ui-assets/node_modules/esbuild/lib/main.js:849:29
at responseCallbacks.<computed> (/home/madhavaneshk/torii-ui-assets/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (/home/madhavaneshk/torii-ui-assets/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (/home/madhavaneshk/torii-ui-assets/node_modules/esbuild/lib/main.js:680:7)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:559:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
at Readable.push (node:internal/streams/readable:390:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
errors: [Getter/Setter],
warnings: [Getter/Setter],
code: 'PLUGIN_ERROR',
plugin: 'commonjs--resolver',
hook: 'resolveId',
id: '/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/index.js',
watchFiles: [
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/index.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/ascii.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/base64.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/bech32.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/hex.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/rfc3339.js',
'/home/madhavaneshk/torii-ui-assets/node_modules/@cosmjs/encoding/build/utf8.js'
]
}
Paulos Ab
04/17/2024, 5:36 PMcurveNatural
More context: I am creating a creating a library and I am using D3 to handle the SVG creation and manipulations, in the left picture is the library I am working on, it looks like the lines on the right are drawn correctly but I am struggling to make the lines on the left side draw well, this my code, thanks
const elementBounds = targetChild.getBoundingClientRect();
const parentElBounds = targetChild.parentElement?.getBoundingClientRect();
const svgSourceNodeBounds = svgNode.node().getBoundingClientRect()
const lineStartX = svgSourceNodeBounds.width / 2;
const lineStartY = svgSourceNodeBounds.height;
const lineEndX = (elementBounds.x - svgSourceNodeBounds.x) + (elementBounds.width / 2)
const lineEndY = targetChild.offsetTop as number;
const lineMove1X = lineStartX + (lineEndX * (lineEndX < 0 ? 0.4 : 0.2))
const lineMove1Y = lineStartY + (lineEndY * (lineEndX < 0 ? 0.2 : 0.2))
const lineMove2X = lineEndX * (lineEndX < 0 ? 0.65 : 0.85)
const lineMove2Y = lineEndY * 0.85
const link = this.hc_d3!.line()
.curve(this.hc_d3!.curveNatural);
const lineCurveData = lineEndX === lineStartX ? [] : [
[lineMove1X, lineMove1Y],
[lineMove2X, lineMove2Y],
]
const data = [
[lineStartX, lineStartY],
...lineCurveData,
[lineEndX, lineEndY],
] as Iterable<[number, number]>;
svgNode?.append('path')
.attr('d', link(data))
.attr('fill', 'none')
.attr('class', 'linker-line')
.attr('stroke-width', 1)
Brent Sullivan
04/17/2024, 9:20 PM---
theme: dashboard
title: All Adviser AUM
toc: false
---
```js
const advisers = await FileAttachment("./data/all_adviser_aum.tsv").tsv({typed:true});
js
const aumRange = [0, 10_000_000_000_000];
const minAumFilter = await view(Inputs.range(aumRange, {
label: "AUM minimum",
step: 100_000_000,
value: 100_000_000
}));
const maxAumFilter = await view(Inputs.range(aumRange, {
label: "AUM maximum",
step: 100_000_000,
value: 100_000_000_000_000,
}));
js
const filteredAdvisers = advisers.filter(adv => Math.round(adv["AUM Total"]) >= minAumFilter && Math.round(adv["AUM Total"]) <= maxAumFilter);
js
const searchView = await view(Inputs.search(filteredAdvisers, {
placeholder: "Search advisers…",
columns: ["Name"]
}));
js
const table = Inputs.table(searchView, {
columns: [
"Name",
"AUM Total"
],
format: {
"AUM Total": x => `$${Math.round(x).toLocaleString()}`
},
align: {
"AUM Total": "right"
},
sort: "AUM Total",
reverse: true,
layout: "fixed",
rows: 20
});
<div class="grid grid-cols-1">
<div class="card" style="padding: 0;">
${display(table)}
</div>
</div>```Max Bo
04/19/2024, 5:08 AM◐ 83 / 83 _npm/@duckdb/duckdb-wasm@1.28.0/dist/duckdb-mvp.wasm│
■ Error: Unexpected response status 520
│
● To see the full stack trace, run with the --debug flag.
running npm run observable deploy --debug
doesn't dump a full stack trace either.
https://github.com/observablehq/framework/issues/1251 seems to indicate that I'm using files above 50mb.
But attempting to remove `FileAttatchment`s of files that exceed that size does not prevent `520`s.
Any ideas?Aditya Rana
04/19/2024, 9:50 AM<div>
<div class="sku-search_block">
<svg xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sku-search_icon"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
${(function(){
const button = Inputs.search({placeholder: "Search"})
button.classList.add("sku-input_search");
return button;
})()}
</div>
</div>
<div>
${createButton}
</div>
</div>
Where and what should i add ?Paulos Ab
04/19/2024, 7:34 PMBrent Sullivan
04/21/2024, 5:18 AMscripts
Additional scripts to add to the head, such as for analytics. Unlike the head option, this allows you to reference a local script in the source root.
export default {
scripts: [{type: "module", async: true, src: "analytics.js"}]
};
So, I added this: scripts: [{ type: "text/javascript", src: "clarity.js" }]
to observablehq.config.js
And added clarity.js
to my source root.
I can see this <script _type_="text/javascript" _src_="./clarity.js"></script>
in <head>
But I'm getting a 404 when trying to load clarity.js
Request URL:
<http://127.0.0.1:3000/_import/clarity.js?sha=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855>
Request Method:
GET
Status Code:
404 Not Found
Remote Address:
127.0.0.1:3000
Referrer Policy:
strict-origin-when-cross-origin
When I run yarn build
I expect clarity.js
to be copied to ./dist
but it's not there (which explains the 404).
Even when I manually add clarity.js
to ./dist
I'm still getting the 404.
Can you help me add google analytics? Maybe I'm missing something simple. Thanks.Brent Sullivan
04/21/2024, 9:13 PMSaketh Kesari
04/22/2024, 5:34 AMSaketh Kesari
04/22/2024, 5:44 AMSaketh Kesari
04/22/2024, 6:00 AMSign Error
04/23/2024, 9:29 AMx-axis
shows the Days / Months / Years, depending on the overall range. And the y-axis
should show only the day time, so the hours/minutes/seconds parts of the Date.
How can I »split« a Date into those two components using d3, to setup the axis?Eli Goldberg
04/23/2024, 1:50 PM