Mike Bostock mbostock @observablehq San Francisco, CA Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.

d3/d3-queue 1417

Evaluate asynchronous tasks with configurable concurrency.

An incredibly fast JavaScript library for Delaunay triangulation of 2D points

d3/d3-sankey 520

Visualize flow between nodes in a directed acyclic network.

Create a gist from terminal, then use git to update it.

Compute the Voronoi diagram of a set of two-dimensional points.

d3/d3-hexbin 158

Group two-dimensional points into hexagonal bins.

A versioned static file server backed by Git.

Browser Extensions for bl.ocks.org

A stream-based serializer for JSON.

Hierarchical edge bundling in JavaScript & Canvas.

issue closedtopojson/topojson-client

Right now, the only way to add use the the topojson-client is to import it like this:

import * as topojson from "topojson-client";


What if we export it in a way that we can use it like:

import topojson from "topojson-client";


closed time in 4 hours

pedroapfilho

issue commenttopojson/topojson-client

No. If you want to import everything, use * to import the namespace. Otherwise, import specific symbols, e.g., import {feature} from "topojson-client";. I don’t think it’s appropriate to make the namespace itself a symbol.

pedroapfilho

comment created time in 4 hours

issue closedd3/d3-selection

d3 version 6 has made significant changes to event management. It is no longer possible to use arrow function like this:

selection.on("mouseenter", (d, i, nodes) => {
d3.select(nodes[i]);
});


This technique was used to replicate this:

selection.on("mouseenter", function() {
d3.select(this);
});


D3 6.0 migration guide made no mention of how to use arrow function for event management when this is required.

closed time in 2 days

peterith

issue commentd3/d3-selection

Try

selection.on("mouseenter", (event) => {
d3.select(event.currentTarget);
});

peterith

comment created time in 2 days

issue commentvega/vega

FWIW d3.bin will still have an inclusive upper bound for the last bin, too; it’s just that we’re increasing the default niced domain’s upper bound to make an extra bin when there are input values that equal the (initially) niced domain’s upper bound. This avoids the confusing edge case of these maximal values going into the last bin as shown above, but only when no domain is explicitly specified and when nice ticks are requested.

mbostock

comment created time in 2 days

issue openedvega/vega

This is a bug inherited from d3-array, which I’m fixing here: https://github.com/d3/d3-array/pull/177

Consider this histogram:

{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": { "values": [ {"a": 0}, {"a": 10}, {"a": 20}, {"a": 20}, {"a": 210}, {"a": 220}, {"a": 230}, {"a": 230}, {"a": 240}, {"a": 240}, {"a": 240}, {"a": 240}, {"a": 240}, {"a": 240} ] }, "mark": {"type": "bar", "tooltip": true}, "width": 400, "encoding": { "x": {"bin": {"maxbins": 100}, "field": "a"}, "y": {"aggregate": "count"} } }  The 240 values are included in the last bin, [235-240]. This is surprising because for all other bins, the upper bound is exclusive. And, with a small change to the data to increase one value, this inconsistency is more apparent: { "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"a": 0},
{"a": 10},
{"a": 20},
{"a": 20},
{"a": 210},
{"a": 220},
{"a": 230},
{"a": 230},
{"a": 240},
{"a": 240},
{"a": 240},
{"a": 240},
{"a": 240},
{"a": 241}
]
},
"mark": {"type": "bar", "tooltip": true},
"width": 400,
"encoding": {
"x": {"bin": {"maxbins": 100}, "field": "a"},
"y": {"aggregate": "count"}
}
}


The proposed fix in d3-array is to extend the niced domain’s upper bound by one tick, so that in both of these examples, the domain will be [0, 245], and the last bin will be [240, 245] rather than [235, 240].

created time in 2 days

PR opened d3/d3-array

Reviewers

This follows #174 to fix an edge case where the input data’s maximum value is coincident with the niced upper bound of the domain. When this occurs, we extend the niced upper bound by one additional tick step to again ensure uniform bin widths.

Ref. https://observablehq.com/d/a9da34f2bbf326b0

+41 -17

0 comment

2 changed files

pr created time in 2 days

push eventd3/d3-array

commit sha 1a23ff0c8673654075bc896d0c1a7bf24637642d

Fix zero-width last bin.

push time in 2 days

create barnchd3/d3-array

created branch time in 2 days

issue commentobservablehq/stdlib

Here’s how do define your own definition of tex with the mhchem extension:

tex = {
const [katex, style] = await Promise.all([
require("katex@0.12.0/dist/katex.min.js"),
require.resolve("katex@0.12.0/dist/katex.min.css")
]);
document.head.append(html<link rel="stylesheet" href="${style}">); await require.alias({katex})("katex@0.12.0/dist/contrib/mhchem.min.js"); return function tex() { var root = document.createElement("div"); katex.render(String.raw.apply(String, arguments), root); return root.removeChild(root.firstChild); }; }  espinielli comment created time in 3 days issue closedd3/d3 I found this in version 6.1.1.0 when I create a figure with .on('click',d=>console.log(d)) pass the value of MouseEvent , and I think it must pass the current value of the data (d) in ts/angular this.svg.selectAll(".circle") .data(this.historia) .enter().append("circle") .attr("class", (d,i) => ("circulo" + this.data.nombre+i)) .attr("cx", (d, i) => this.margin.left + xScale(i + 1)) .attr("cy", d => yScale(d)) .attr("r", 4) .style('fill', (d) => { if (d > 0) return '#FF3C5F' if (d < 0) return '#2ED47A' }) .on("click", (d,i) => { this.showPopOver(d,i) }) I return to the version 5.16.0... and works as expected.. I hope this could be helpful, thank you closed time in 4 days Juan-Baquero issue commentd3/d3 https://github.com/d3/d3/blob/master/CHANGES.md Juan-Baquero comment created time in 4 days PR opened observablehq/runtime Followup to #106. +1 -1 0 comment 1 changed file pr created time in 4 days create barnchobservablehq/runtime created branch time in 4 days issue closedd3/d3-transition ### Steps to replicate: 1. https://jsfiddle.net/chris_h/4haze3pc/ (Note: only Chrome seems to currently support the SVG2 feature of setting geometry properties using CSS style) ### Expected Behaviour All 4 circles should transition to cx: 100 ### Actual Behaviour The circle with style=cx: 0 does not transition to the expected cx: 100 location. My best guess is this is due to the browser automatically converting cx: 0 into cx: 0px closed time in 4 days ChrisHSandN issue commentd3/d3-transition If you use CSS, you must specify units.  .style('cx', datum => ${datum.cx}px)
.style('cy', datum => \${datum.cy}px);

ChrisHSandN

comment created time in 4 days

    var z = x1 - x0 || 1

while (x0 > x || x >= x1 || y0 > y || y >= y1) {
i = (y < y0) << 1 | (x < x0);
parent = new Array(4), parent[i] = node, node = parent, z *= 2;
switch (i) {
case 0: x1 = x0 + z, y1 = y0 + z; break;
case 1: x0 = x1 - z, y1 = y0 + z; break;
case 2: x1 = x0 + z, y0 = y1 - z; break;
case 3: x0 = x1 - z, y0 = y1 - z; break;
}
}


should be

    var zx = x1 - x0 || 1, zy = y1 - y0 || 1

while (x0 > x || x >= x1 || y0 > y || y >= y1) {
i = (y < y0) << 1 | (x < x0);
parent = new Array(4), parent[i] = node, node = parent, zx *= 2, zy *= 2;
switch (i) {
case 0: x1 = x0 + zx, y1 = y0 + zy; break;
case 1: x0 = x1 - zx, y1 = y0 + zy; break;
case 2: x1 = x0 + zx, y0 = y1 - zy; break;
case 3: x0 = x1 - zx, y0 = y1 - zy; break;
}
}


closed time in 4 days

nickbetteridge

Quads are square, so x1 - x0 = y1 - y0.

If you want to report a bug, please provide a test case. Thanks!

nickbetteridge

comment created time in 4 days

delete branch d3/d3-geo

delete branch : fix-array-dep

delete time in 5 days

push eventd3/d3-geo

commit sha 54f8890a44826828bd29a81d0bc6dfba9e6786b4

Fix d3-array dependency.

push time in 5 days

PR merged d3/d3-geo

+5 -5

0 comment

2 changed files

mbostock

pr closed time in 5 days

release d3/d3

d3.zip 0.27MB

released time in 5 days

push eventd3/d3

commit sha ffb43e65271c643125d2519bf25ae1b891cb1d50

Update d3-array, d3-scale.

commit sha 3c63660903dfc459ab9ac6df2ab73912df3a7924

6.2.0

push time in 5 days

created tagd3/d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

created time in 5 days

push eventd3/d3.github.com

commit sha bd0030f308d2e742bf6f47bc18317f98c1a835e2

d3 6.2.0

push time in 5 days

PR opened d3/d3-geo

Reviewers
+5 -5

0 comment

2 changed files

pr created time in 5 days

create barnchd3/d3-geo

created branch time in 5 days

CommitCommentEvent

release d3/d3-scale

released time in 5 days

push eventd3/d3.github.com

commit sha 78430892573530a2e60a8be2f182a6ae6a727a8f

d3-scale 3.2.3

push time in 5 days

created tagd3/d3-scale

Encodings that map abstract data to visual representation.

created time in 5 days

push eventd3/d3-scale

commit sha c7efc99bf1b11d1fd4086e8300445d49be00349f

3.2.3

push time in 5 days

push eventd3/d3-scale

commit sha 5d3e9c3b8123b209e789290a9d18c3f921757aaf

Update d3-array.

push time in 5 days

pull request commentd3/d3-scale

This is missing a change to package.json: if we adopt quantileSorted, then we need d3-array 2.3.0 or higher. I’ll fix.

ilijapuaca

comment created time in 5 days

PR closed d3/d3-scale

The Babel rule: no-anonymous-default-export is complaining about the amount of anonymous exports that are in d3-scale.

This will solve this issue.

+7 -7

7 changed files

michielmetcake

pr closed time in 5 days

pull request commentd3/d3-scale

Merged in 957482b75f11448fd07e1e8fa69cf7acc2e17e5f.

michielmetcake

comment created time in 5 days

push eventd3/d3-scale

commit sha 1ff652207c92a67ec7429e6352393f3885f98a00

yarn

push time in 5 days

CommitCommentEvent

push eventd3/d3-scale

commit sha 957482b75f11448fd07e1e8fa69cf7acc2e17e5f

Update tickFormat.js Update utcTime.js Update time.js Update nice.js Update number.js Update constant.js Update colors.js

push time in 5 days

PR merged d3/d3-scale

We've noticed a significant performance drop since upgrading to newer version of d3-scale. Based on profiling that we've done it was apparent that scaleQuantile was taking much longer to complete for the same input.

By inspecting the code it looks like it's calling out to d3-array::quantile, which creates a copy of the array (640k entries in our case) and re-sorts it each time. Since our input is already sorted, and the previous version of this function did not do in-place sorting, using d3-array::quantileSorted instead of d3-array::quantile gets the performance back to regular execution times.

d3-array added quantileSorted in this commit, I assume this update is an expected outcome as it restores the behavior it had prior to this change.

+1 -1

0 comment

1 changed file

ilijapuaca

pr closed time in 5 days

push eventd3/d3-scale

commit sha 42d546e73be86c766d176eb74819a26da5a1d1ef

scaleQuantile performance fixup

push time in 5 days

push eventd3/d3-array

push time in 5 days

release d3/d3-array

released time in 5 days

push eventd3/d3.github.com

d3-array 2.8.0

push time in 5 days

created tagd3/d3-array

Array manipulation, ordering, searching, summarizing, etc.

created time in 5 days

push eventd3/d3-array

commit sha 2159613cc2815d9a6dc2dfbacfa67b3092852108

2.8.0

push time in 5 days

delete branch d3/d3-array

delete branch : set-operations

delete time in 5 days

PR merged d3/d3-array

Reviewers

Fixes #173. Needs a README update.

+324 -61

16 changed files

mbostock

pr closed time in 5 days

issue closedd3/d3-array

https://docs.python.org/3/library/stdtypes.html#set

closed time in 5 days

mbostock

push eventd3/d3-array

commit sha d911874058117af57005c0a646b59439a8d2d8bf

commit sha 6451d80ce3e27c44d2a0b84ef587a607b46df730

Allow unbounded sets.

push time in 5 days

push eventd3/d3-array

commit sha 6451d80ce3e27c44d2a0b84ef587a607b46df730

Allow unbounded sets.

push time in 5 days

push eventd3/d3-array

commit sha 2b97c9c5cd30f07c933ee3146dda679159e00d3d

Allow unbounded sets.

push time in 5 days

push eventd3/d3-array

commit sha d911874058117af57005c0a646b59439a8d2d8bf

push time in 5 days

push eventd3/d3-array

commit sha 3efcd5ebe1b488dbefbd2eca515589e6a5bc2120

push time in 5 days

push eventd3/d3-array

commit sha a2bc90a3bda59a6f0496777449b6536f518be771

A nice default bin domain.

commit sha ace4b5077582c03cab75034f4775e288b575f236

Add basic array methods for iterables.

push time in 5 days

delete branch d3/d3-array

delete branch : basic-methods

delete time in 5 days

PR merged d3/d3-array

What do you think about adding the equivalents of basic array methods (array.filter, array.sort, etc.), but for iterables? Yes, these are all roughly equivalent to converting to an array with Array.from first, but I think it’s convenient (and hopefully faster) to have dedicated methods.

For example:

const set = new Set([1, 2, 3]);
every(set, d => d > 0); // true

+441 -0

16 changed files

mbostock

pr closed time in 5 days

push eventd3/d3-array

commit sha ace4b5077582c03cab75034f4775e288b575f236

Add basic array methods for iterables.

push time in 5 days

push eventd3/d3-array

commit sha ace4b5077582c03cab75034f4775e288b575f236

Add basic array methods for iterables.

push time in 5 days

push eventd3/d3-array

commit sha a2bc90a3bda59a6f0496777449b6536f518be771

A nice default bin domain.

commit sha e4395de952cfc1466326c86a09b2b7da8634c88b

Add basic array methods for iterables.

push time in 5 days

push eventd3/d3-array

commit sha c2cef1fde6c2aaeb6c8499e3b4ff041dc74f6c36

push time in 5 days

push eventd3/d3-array

commit sha 7fdd8421cb9c3c62bb905b5309471e04898d3575

push time in 5 days

push eventd3/d3-array

commit sha c0864ccb8fbe45b64d48a04a3b23f7fce4be0caf

push time in 5 days

push eventd3/d3-array

commit sha e39dcafdc4aefce397d0586be9a21f7d53b042b4

push time in 5 days

PullRequestReviewEvent
PullRequestReviewEvent

pull request commentd3/d3-array

There’s precedent for “difference” (meaning set difference) in lodash. It’d be nicer if Set supported this natively…

mbostock

comment created time in 6 days

delete branch d3/d3-array

delete branch : nice-bin-domain

delete time in 6 days

PR merged d3/d3-array

This changes the default behavior of d3.bin to nice the domain such that the bins are uniform width. The previous behavior often resulted in thinner first and last bins, which was confusing. #46 To make this easier, I’ve also added d3.nice which implements iterative nicing strategy now used by d3-scale (and d3-scale can be upgraded to use d3.nice in the future, if desired).

+141 -4

0 comment

7 changed files

mbostock

pr closed time in 6 days

push eventd3/d3-array

commit sha a2bc90a3bda59a6f0496777449b6536f518be771

A nice default bin domain.

push time in 6 days

Pull request review commentd3/d3-array

 Like [d3.tickStep](#tickStep), except requires that *start* is always less than  Returns the difference between adjacent tick values if the same arguments were passed to [d3.ticks](#ticks): a nicely-rounded value that is a power of ten multiplied by 1, 2 or 5. Note that due to the limited precision of IEEE 754 floating point, the returned value may not be exact decimals; use [d3-format](https://github.com/d3/d3-format) to format numbers for human consumption. +<a name="nice" href="#nice">#</a> d3.<b>nice</b>(<i>start</i>, <i>stop</i>, <i>count</i>)++Returns a new interval [*niceStart*, *niceStop*] covering the given interval [*start*, *stop*] and where *niceStart* and *niceStop* are guaranteed to align with the corresponding [tick step](#tickStep). Like [d3.tickIncrement](#tickIncrement), this requires that *start* is less than or equal to *step*.

Good catch! Fixed that typo, too.

mbostock

comment created time in 6 days

PullRequestReviewEvent

push eventd3/d3-array

commit sha a2bc90a3bda59a6f0496777449b6536f518be771

A nice default bin domain.

push time in 6 days

push eventd3/d3-array

commit sha b32d2d1d1471259883dcccf315939a028365fa2b

A nice default bin domain.

push time in 6 days

push eventd3/d3-array

commit sha ece6786ba4cbb575946135e195c4f397942caaca

A nice default bin domain.

push time in 6 days

push eventd3/d3-array

Fix typo.

push time in 6 days

Pull request review commentd3/d3-array

 Like [d3.tickStep](#tickStep), except requires that *start* is always less than  Returns the difference between adjacent tick values if the same arguments were passed to [d3.ticks](#ticks): a nicely-rounded value that is a power of ten multiplied by 1, 2 or 5. Note that due to the limited precision of IEEE 754 floating point, the returned value may not be exact decimals; use [d3-format](https://github.com/d3/d3-format) to format numbers for human consumption. +<a name="nice" href="#nice">#</a> d3.<b>nice</b>(<i>start</i>, <i>stop</i>, <i>count</i>)++Returns a new interval [*niceStart*, *niceStop*] covering the given interval [*start*, *stop*] and where *niceStart* and *niceStop* are guaranteed to align with the corresponding [tick step](#tickStep). Like [d3.tickIncrement](#tickIncrement), this requires that *start* is less than or equal to *step*.

That’s a typo. I meant stop.

mbostock

comment created time in 6 days

PullRequestReviewEvent

issue commentd3/d3-array

They work with any iterable but they return sets.

mbostock

comment created time in 6 days

issue commentd3/d3-scale

There is not yet one in d3-array, but I’ve proposed there should be.

curran

comment created time in 6 days

push eventd3/d3-array

commit sha 3e79302359c37d2080fbb3c21bf3b6c0fb719c23

push time in 6 days

PR opened d3/d3-array

Reviewers

Fixes #173. Needs a README update.

+136 -0

0 comment

14 changed files

pr created time in 6 days

create barnchd3/d3-array

created branch time in 6 days

PullRequestReviewEvent

Pull request review commentd3/d3-array

+const tape = require("tape-await");+const d3 = require("../");++tape("every(values, test) returns true if all tests pass", (test) => {+  test.strictEqual(d3.every([1, 2, 3, 2, 1], x => x & 1), false);+  test.strictEqual(d3.every([1, 2, 3, 2, 1], x => x >= 1), true);+});++tape("every(values, test) returns true if values is empty", (test) => {+  test.strictEqual(d3.every([], () => false), true);+});++tape("every(values, test) accepts an iterable", (test) => {+  test.strictEqual(d3.every(new Set([1, 2, 3, 2, 1]), x => x >= 1), true);+  test.strictEqual(d3.every((function*() { yield* [1, 2, 3, 2, 1]; })(), x => x >= 1), true);+  test.strictEqual(d3.every(Uint8Array.of(1, 2, 3, 2, 1), x => x >= 1), true);+});++tape("every(values, test) enforces that test is a function", (test) => {+  test.throws(() => d3.every([]), TypeError);+});++tape("every(values, test) enforces that values is iterable", (test) => {+  test.throws(() => d3.every({}, () => true), TypeError);+});++tape("every(values, test) passes test (value, index, values)", (test) => {+  const calls = [];+  const values = new Set([5, 4, 3, 2, 1]);+  d3.every(values, function() { return calls.push([this, ...arguments]); });+  test.deepEqual(calls, [+    [global, 5, 0, values],

Because the passed in function should not be called with any particular this context.

mbostock

comment created time in 6 days

Pull request review commentd3/d3-array

+export default function every(values, test) {+  if (typeof test !== "function") throw new TypeError("test is not a function");+  let index = -1;

Out of habit, mostly. At one point I was told it was faster…

mbostock

comment created time in 6 days

PullRequestReviewEvent

push eventd3/d3-array

commit sha 5e9de969912957541bd283e91a571fb51f315aca

A nice default bin domain.

push time in 6 days

PR opened d3/d3-array

Reviewers

This changes the default behavior of d3.bin to nice the domain, such as that the bins are uniform width. The previous behavior often resulted in thinner first and last bins, which was confusing. #46 To make this easier, I’ve also added d3.nice which implements iterative nicing strategy now used by d3-scale (and d3-scale can be upgraded to use d3.nice in the future, if desired).

+26 -3

0 comment

4 changed files

pr created time in 6 days

create barnchd3/d3-array

created branch time in 6 days

issue openedd3/d3-array

https://docs.python.org/3/library/stdtypes.html#set

created time in 6 days

issue commentobservablehq/stdlib

Do these help?

https://observablehq.com/@mbostock/toc https://observablehq.com/@nebrius/indented-toc

JackieAnxis

comment created time in 7 days

pull request commentd3/d3-array

We don’t want d3.permute to have a radically different semantics if only a single argument is passed. That’s very confusing. So, this needs a new name. I propose d3.permutations.

I’m not sure I see this function reaching the bar of usefulness to merit inclusion in this library. Do you have some practical, applied examples?

Given that this is derived from third-party code rather than an original contribution, this would require including the Google Collections Apache license. Also, that algorithm is a little complicated, and is it worth the complexity? I feel it would be simpler and easier to write a fresh implementation of the simpler Heap’s algorithm such as

function* permutations(array) {
array = Array.from(array); // defensive copy and convert to array
let i = 0, n = array.length, index = new Uint32Array(n).fill(0);
yield array.slice(); // defensive copy
while (i < n) {
let j = index[i];
if (j < i) {
if ((i & 1) === 0) j = 0;
let t = array[j];
array[j] = array[i];
array[i] = t;
yield array.slice(); // defensive copy
++index[i];
i = 0;
} else {
index[i] = 0;
++i;
}
}
}


I guess if it’s that small, there’s not much harm in including it… but I’d still appreciate some applied examples.

Another consideration is whether we want to implement an optional r argument, and a d3.combinations method at the same time. For reference, here’s a port of itertools by Jacob Rus, and the Python itertools API reference for itertools.permutations and itertools.combinations. Of course if we’re going to base on implementation on Python’s itertools then we’ll likewise need to add a copy of the PSF license.

mfulton26

comment created time in 9 days

PullRequestReviewEvent

delete branch d3/d3.github.com

delete time in 10 days

push eventd3/d3.github.com

commit sha 32ea8568dee3350b5d09940d6cae3d7c4c694b30

commit sha ab23efed1899f60b7d4f40bf282637a14c95a98d

Slightly smaller icons, all black, as local SVGs

commit sha 9643fd545c3b74c60d09502f4ea6747eb4ee1eb6

Optimize SVG and tweak styles.

push time in 10 days

PR merged d3/d3.github.com

Supersedes #25. /cc @tophtucker

+49 -1

1 comment

6 changed files

mbostock

pr closed time in 10 days

PR closed d3/d3.github.com

If you must have an analytics system, might I suggest either:

• Plausible: https://plausible.io (offers a 50% discount for FOSS projects)
• Goatcounter: https://goatcounter.com
• Matomo: https://matomo.org
• Fathom: https://usefathom.org

These solutions are all well-tested and open-source. This, of course, means they can be independently audited for privacy and security. Instead of using a proprietary nonfree system such as Google Analytics, perhaps we could work together to replace it with something slightly more ethical?

Furthermore, the majority of privacy features in evergreen browsers block Google Analytics from being run. I can not say the same for solutions such as Plausible, which suggests they are trusted for their privacy by independent persons.

+0 -12

0 comment

1 changed file

resynth1943

pr closed time in 10 days

PR closed d3/d3.github.com

I considered preserving Verb <a href>noun</a>. but it felt weird and <a href>Verb noun.</a> seems sufficiently stylistically consistent with the other asides

currently just hotlinks to favicons; not sure how stable those addresses will be

+89 -1

6 changed files

tophtucker

pr closed time in 10 days

pull request commentd3/d3.github.com

See #26.

tophtucker

comment created time in 10 days

more