profile
viewpoint
Mike Bostock mbostock @observablehq San Francisco, CA https://bost.ocks.org/mike/ Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.

d3/d3-queue 1416

Evaluate asynchronous tasks with configurable concurrency.

mapbox/delaunator 1086

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

d3/d3-sankey 468

Visualize flow between nodes in a directed acyclic network.

mbostock/gistup 456

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

d3/d3-delaunay 291

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

d3/d3-hexbin 149

Group two-dimensional points into hexagonal bins.

mbostock/git-static 109

A versioned static file server backed by Git.

mbostock/bl.ocks.org 81

Browser Extensions for bl.ocks.org

mbostock/json-write 35

A stream-based serializer for JSON.

mbostock/dependency-tree 29

Hierarchical edge bundling in JavaScript & Canvas.

Pull request review commentd3/d3-dsv

Add a CSP warning for csvParse, tsvParse, parse

 var data = d3.csvParse(string);  ## API Reference -<a name="csvParse" href="#csvParse">#</a> d3.<b>csvParse</b>(<i>string</i>[, <i>row</i>]) [<>](https://github.com/d3/d3-dsv/blob/master/src/csv.js "Source")+<a name="csvParse" href="#csvParse">#</a> d3.<b>csvParse</b>(<i>string</i>[, <i>row</i>]) [<>](https://github.com/d3/d3-dsv/blob/master/src/csv.js "Source") :warning: [CSP in browser context](#content-security-policy)  Equivalent to [dsvFormat](#dsvFormat)(",").[parse](#dsv_parse).

Yes, please delete the warning (in favor of the note).

tdelmas

comment created time in 3 hours

Pull request review commentd3/d3-dsv

Add a CSP warning for csvParse, tsvParse, parse

 var data = d3.csvParse(string);  ## API Reference -<a name="csvParse" href="#csvParse">#</a> d3.<b>csvParse</b>(<i>string</i>[, <i>row</i>]) [<>](https://github.com/d3/d3-dsv/blob/master/src/csv.js "Source")+<a name="csvParse" href="#csvParse">#</a> d3.<b>csvParse</b>(<i>string</i>[, <i>row</i>]) [<>](https://github.com/d3/d3-dsv/blob/master/src/csv.js "Source") :warning: [CSP in browser context](#content-security-policy)  Equivalent to [dsvFormat](#dsvFormat)(",").[parse](#dsv_parse).
Equivalent to [dsvFormat](#dsvFormat)(",").[parse](#dsv_parse). Note: requires unsafe-eval [content security policy](#content-security-policy).
tdelmas

comment created time in 8 hours

issue closedd3/d3-dsv

Add documentation about CSP incompatibility

It's important to highlight methods not compatible with a strong Content-Security-Policy (i.e. without unsafe-eval).

In the same wait it's documented in https://github.com/d3/d3-dsv#content-security-policy

It should be documented in https://github.com/d3/d3-dsv/blob/master/README.md#csvParse : https://github.com/d3/d3-dsv/issues/65

closed time in 10 hours

tdelmas

issue commentd3/d3-dsv

Add documentation about CSP incompatibility

I don’t see a need to repeat the CSP documentation that already exists in the README, but feel free to send a PR with suggested edits.

tdelmas

comment created time in 10 hours

issue closedd3/d3-fetch

Fix incompatibility with strict/safe CSP

https://github.com/d3/d3-fetch/blob/master/src/dsv.js use csvParse and tsvParse from "d3-dsv"

As explained in https://github.com/d3/d3-dsv/issues/65 by @mbostock :

I recommend using parseRows as suggested in the text you pasted from the README and a row function to turn the array of field values into an object.

Using csvParse or tsvParse make it incompatible with CSP without unsafe-eval.

It impact for example plotly/plotly.js#897 (which use the old version of d3 "3.5.17" so "d3-request" and not this package, but "d3-request" has the exact same problem. I didn't opened an issue there as its status is "This module is deprecated as of D3 5.0; please use d3-fetch instead.")

Or is there another API from this package that can be used to avoid that problem?

closed time in a day

tdelmas

issue commentd3/d3-fetch

Fix incompatibility with strict/safe CSP

Use d3.text or use fetch directly.

d3.csvParseRows(await d3.text("path/to/file.csv"))
fetch("path/to/file.csv")
  .then(response => response.text())
  .then(text => d3.csvParseRows(text))
tdelmas

comment created time in a day

issue closedd3/d3-dsv

Avoid "Function" constructor

https://github.com/d3/d3-dsv/blob/master/src/dsv.js#L8

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

The Function constructor is not allowed in browser context in browser context when a safe CSP is used (without unsafe-eval). For example it prevent the usage of Plotly with a safe CSP because it uses this package: https://github.com/plotly/plotly.js/issues/897

https://github.com/d3/d3-dsv#content-security-policy

If a content security policy is in place, note that dsv.parse requires unsafe-eval in the script-src directive, due to the (safe) use of dynamic code generation for fast parsing. (See source.) Alternatively, use dsv.parseRows.

Maybe a replacement for dsv.parse (ex. dsv.parseSafe) should be given?

closed time in a day

tdelmas

issue commentd3/d3-dsv

Avoid "Function" constructor

I recommend using parseRows as suggested in the text you pasted from the README and a row function to turn the array of field values into an object.

tdelmas

comment created time in a day

issue openedd3/d3-shape

d3.line(x, y) and d3.area(x, y0, y1)?

It’d be nice shorthand equivalent for

d3.line().x(x).y(y)

and

d3.area().x(x).y0(y0).y1(y1)

created time in 2 days

issue commentd3/d3-shape

curvePoints ?

Sounds good.

Fil

comment created time in 2 days

issue closedd3/d3-axis

Color ramps?

d3.rampHorizontal = function(x, color) {
  var size = 16;

  function ramp(g) {
    var image = g.selectAll("image").data([null]),
        xz = x.range(),
        x0 = xz[0],
        x1 = xz[xz.length - 1],
        canvas = document.createElement("canvas"),
        context = (canvas.width = x1 - x0 + 1, canvas.height = 1, canvas).getContext("2d");

    for (var i = x0; i <= x1; ++i) {
      context.fillStyle = color(x.invert(i));
      context.fillRect(i - x0, 0, 1, 1);
    }

    image = image.enter().append("image").merge(image)
        .attr("x", x0)
        .attr("y", -size)
        .attr("width", x1 - x0 + 1)
        .attr("height", size)
        .attr("preserveAspectRatio", "none")
        .attr("xlink:href", canvas.toDataURL());
  }

  ramp.position = function(_) {
    return arguments.length ? (x = _, ramp) : x;
  };

  ramp.color = function(_) {
    return arguments.length ? (color = _, ramp) : color;
  };

  ramp.size = function(_) {
    return arguments.length ? (size = +_, ramp) : size;
  };

  return ramp;
};

closed time in 2 days

mbostock

issue commentd3/d3-axis

Color ramps?

https://observablehq.com/@d3/color-legend

mbostock

comment created time in 2 days

issue closedd3/d3-scale

scaleQuantize.range throws an error if the range is empty?

The code below is invalid per spec

https://github.com/d3/d3-scale/blob/732ed4b1cd5c643700571d1089c7deb8472242a6/src/quantize.js#L18-L19

Running...

new Array(-1);

Results in the following error

Uncaught RangeError: Invalid array length
    at <anonymous>:1:1

closed time in 2 days

nickofthyme

Pull request review commentd3/d3-random

Gamma, Weibull, Poisson distributions, etc.

+import defaultSource from "./defaultSource.js";++export default (function sourcerandomWeibull(source) {+  function randomWeibull(lambda, k) {+    if ((k = +k) < 0) throw new RangeError("invalid k");+    k = 1 / k;+    return function() {+      return lambda * Math.pow(-Math.log1p(-source()), k);+    };+  }++  randomWeibull.source = sourcerandomWeibull;
  randomWeibull.source = sourceRandomWeibull;
Parcly-Taxel

comment created time in 2 days

Pull request review commentd3/d3-random

Gamma, Weibull, Poisson distributions, etc.

+import defaultSource from "./defaultSource.js";++export default (function sourcerandomWeibull(source) {
export default (function sourceRandomWeibull(source) {
Parcly-Taxel

comment created time in 2 days

pull request commentd3/d3-dsv

dsv2json: Add '-a/--autotype' flag to use d3.autoType

Probably —auto-type…

joallard

comment created time in 2 days

issue commentd3/d3-delaunay

Adding points incrementally without retriangulating

(Also this library is very fast, so unless you have a lot of points, recomputing the triangulation from scratch is unlikely to be a problem.)

Kebabrulle4869

comment created time in 3 days

issue closedd3/d3-delaunay

Adding points incrementally without retriangulating

Hello!

I've been using this library for my "gymnasiearbete", a final work during Swedish high school, and I've had great success in doing so. However, I can't quite figure out how to add points incrementally to the triangulation without redoing the entire thing. I'm guessing that this is possible with this library somehow, based on the demo. I would imagine you're using some functionality I've missed in the library, and if you're not and you're just retriangulating after every new point, I think a function that could add a single point quickly to an existing triangulation would be very welcome.

More specifically, I'm using this library to randomly place points in the plane with a minimum distance between them. Using this library, I can make a triangulation of the existing points, then find the nearest point to the new candidate point, and check the distance between them. I think this would be more effective if I could figure out how to add points incrementally, and be able to execute other functions between adding points. I've already tried using .update(), but it seems to only work when moving points, not adding points.

Sorry if this is the wrong place to ask this sort of thing - I'm not too familiar with using github, and thank you in advance.

closed time in 3 days

Kebabrulle4869

issue commentd3/d3-delaunay

Adding points incrementally without retriangulating

I don’t think that’s possible with the sweep-line algorithm used by this library, but the place to file this request would be over in mapbox/delaunator.

Kebabrulle4869

comment created time in 3 days

issue closedd3/d3-brush

Can't create new brush selection inside extent, only change exsisting one

I am using semiotic to draw a chart. From there I have an svg layer that sits on top of my chart, which I need for brushing. If I move the brush with "brush.move(gBrush, [[x1, y1], [x2, y2]]);" I can extend and move the already existing one but cannot seem to create a new one in the extent.

Layout of my elements:

    <div
      ref={ref}
    >
        <XYFrame {...frameProps} />
        <svg
          id="brushSvg"
          width="700px"
          height="700px"
          style={{ pointerEvents: "none" }}
        />
    </div>

How I append the brush:

      const brushSvg = d3.select("#brushSvg");
      const brush = d3
        .brush()
        .extent([[0, 0], [700, 700]])
        .on("end", brushEnd);

      function brushEnd() {
        const selection = d3.event.selection;
        if (!d3.event.sourceEvent || !selection) return;
      }

         const gBrush = brushSvg
        .append("g")
        .attr("class", "brush");
        
        gBrush.call(brush)

      //brush.move(gBrush, [[60, 60], [100, 100]]);

If someone could help me, it would be greatly. appreciated!

closed time in 4 days

vbojilova

issue commentd3/d3-brush

Can't create new brush selection inside extent, only change exsisting one

With the default behavior, you need to command-click if you want to draw a new extent within the existing extent, rather than dragging the existing extent.

vbojilova

comment created time in 4 days

issue closedd3/d3-scale

Duplicated values in scaleBand

Hello, I'm trying to display 36 hours array labels = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]

with data

data = [16.1, 15.55, 14.12, 11.81, 9.637, 8.022, 6.625, 5.105, 5.216, 8.398, 11.4, 10.86, 10.52, 11.14, 15.37, 13.26, 11.33, 8.572, 12.21, 16.98, 12.43, 10.4, 10.09, 10.19, 9.361, 9.068, 9.763, 12.06, 15.52, 17.32, 15.53, 14.46, 14.05, 24.24, 12.26, 11.01]

xScale looks like: const xScale = d3.scaleBand() .range([ 0, chartWidth ]) .domain(labels) .paddingInner(innerPadding);

but displayed only 24 elements from 1:00 to 00:00. :sweat: :sweat: :sweat: Does any ways to configure scaleBand without override duplicated labels data ?

closed time in 6 days

maximys963

issue commentd3/d3-scale

Duplicated values in scaleBand

Ordinal, band, and point scales use strings to identify data points, so you have to pass in unique string for each unique value. You can then change the tick format of the axis to control how it is displayed (for example to only show hours). For dates this is often done using date objects or milliseconds as the domain values and a d3.timeFormat instance.

maximys963

comment created time in 6 days

issue closedd3/d3-fetch

Fetching large files always gives up at 50MiB

I tried to fetch a relatively large file (200 MiB) for a visualization. However, the fetch request always seems to give up at 50.7 MiB. Below is a screenshot of the situation in Chrome, and a link to the project.

I am not super well versed in the nuances of javascript network requests, but I did notice that "streaming is supported", though I'm not sure if that's used in this case, or how specifically to enable it.

Am I doing something stupid here?

https://github.com/j2kun/harmonic-phase-space

Screen Shot 2020-02-10 at 6 37 57 PM

closed time in 7 days

j2kun

issue commentd3/d3-fetch

Fetching large files always gives up at 50MiB

This library just wraps Fetch (see the source). I’d fetch isn’t doing what you expect, you might try asking Stack Overflow for help. It could be a network or server or browser add on issue.

j2kun

comment created time in 7 days

issue commentd3/d3-shape

d3.stack for tidy data?

Here’s an earlier example that breaks the data transformation into separate cells:

https://observablehq.com/@d3/stacked-area-chart-via-d3-group

mbostock

comment created time in 8 days

issue commentobservablehq/runtime

Is there a way not to show the data?

Try this snippet from the README:

const runtime = new Runtime();
const main = runtime.module(define, name => {
  if (name === "chart") {
    return new Inspector(document.body);
  }
});

You can display multiple cells this way too, but you’ll need to give each of them a container element.

const runtime = new Runtime();
const main = runtime.module(define, name => {
  if (name === "chart" || name === "legend") {
    return new Inspector(document.querySelector(`#${name}`));
  }
});
eyaleizenberg

comment created time in 8 days

issue closedobservablehq/runtime

Is there a way not to show the data?

I am just starting out with Observablehq so sorry for the noob question. I started out locally modifying this example: https://observablehq.com/@d3/force-directed-graph

My question is, is there a way for me to hide the data part below the graph?

Screen Shot 2020-02-09 at 16 29 09

closed time in 8 days

eyaleizenberg

issue closedd3/d3

How can I update my own outdated link on the gallery page and add some new examples.

How can I update my own outdated link on the gallery page and add some new examples.

Thanks

closed time in 9 days

xuchen81

issue commentd3/d3

How can I update my own outdated link on the gallery page and add some new examples.

Please send me any requests by filing an issue. Thank you!

xuchen81

comment created time in 9 days

GollumEvent
GollumEvent
GollumEvent
GollumEvent
GollumEvent
GollumEvent
GollumEvent
GollumEvent

push eventd3/d3.github.com

Mike Bostock

commit sha cebd931258132b5f5e5dd44a848c964a357e4e7b

Remove empty paragraph elements.

view details

push time in 9 days

issue commentd3/d3-zoom

dblclick zooms results in NaN mouse values

I think this is the expected behavior, unfortunately. The problem is that when you dblclick, the zoom behavior schedules a transition to start on the next animation frame. By the time the transition starts, and the zoom start event is dispatched, the dblclick event has expired and so the sourceEvent on the zoom start event is null causing d3.mouse to return [NaN, NaN].

If you want to get the mouse coordinates of the dblclick, you need to listen to the dblclick, not just the start event on the zoom behavior.

Alternatively, the zoom behavior would somehow need to set the sourceEvent of the zoom start event to the expired dblclick event.

Fil

comment created time in 9 days

issue commentd3/d3

How can I update my own outdated link on the gallery page and add some new examples.

I am maintaining a new gallery on Observable:

https://observablehq.com/@d3/gallery

I will probably retire the old gallery on this wiki because there are too many broken and malicious links, and it is not feasible for me to maintain those links in perpetuity.

xuchen81

comment created time in 9 days

issue closedd3/d3-selection

Cannot create svgpoint from a keyboard event in Firefox

In point.js it assumes that the event has defined clientX and clientY fields. But, if the event is a keyboard event it will not have those fields. Chrome is OK with assigning undefined to the field, but Firefox throws an exception:

TypeError: Value being assigned to SVGPoint.x is not a finite floating-point value.

closed time in 11 days

dplassgit

issue commentd3/d3-selection

Cannot create svgpoint from a keyboard event in Firefox

d3.clientPoint isn’t supposed to be passed a KeyboardEvent. It expects a MouseEvent or a Touch.

dplassgit

comment created time in 11 days

issue openedd3/d3-shape

d3.stack for tidy data?

d3.stack is designed to work with non-tidy data where each row corresponds to a “group” (the set of observations for all layers, e.g., year) with properties for each “layer” a.k.a. series (e.g., format) recording the observed value (e.g., revenue).

Year 8 - Track Cassette Cassette Single
1973 2699600000 419600000 0
1974 2730600000 433600000 0

In the tidy format, in contrast, rows correspond to observations and columns correspond to variables. (This is less efficient as the layer names are repeated, but oh well.)

Year Format Revenue
1973 8 - Track 2699600000
1973 Cassette 419600000
1973 Cassette Single 0
1974 8 - Track 2730600000
1974 Cassette 433600000
1974 Cassette Single 0

It’s possible to use tidy data with d3.stack, but it’s a little convoluted.

series = d3.stack()
    .keys(d3.group(data, d => d.name).keys())
    .value((group, key) => group.get(key).value)
    .order(d3.stackOrderReverse)
  (d3.rollup(data, ([d]) => d, d => d.year, d => d.name).values())
    .map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))

It’d be nice if were more convenient to give d3.stack tidy data, say like so:

series = d3.stack()
    .key(d => [d.name, d.year])
    .value(d => d.value)
    .order(d3.stackOrderReverse)
  (data)

Here the key accessor would return a two-part key: the layer key and the group key. And the value accessor wouldn’t need to know the current keys. (Because the data is tidy, the value accessor is the same for all observations.)

An implication of the proposed design is that the data can be sparse: some layers may be missing observations for some groups (and equivalently vice versa). That’s not possible with the current design because the layer keys (stack.keys) and group keys (data) are specified as separate arrays, but it should be easy enough for d3.stack to compute the union of layer keys and the union of group keys to fill in the missing data. d3.stack probably will also need some facility for ordering the group keys, as the order may not be consistent across layers.

I imagine it’ll be difficult to make this backwards-compatible, but maybe it’s possible, or maybe it could be under a new name such as d3.stackTidy.

created time in 11 days

issue closedd3/d3-shape

Issue when using cornerRadius with padRadius and padAngle

I'm using d3 version 5.9.2 and getting issue trying to add rounded corners to my chart. But the issue is appearing only in one case, when there is only two paths around. And there are two kind of errors appear (sometimes three and the right side path is disappearing). Screenshot (3) Screenshot (4) Screenshot (6)

So if there is only two paths around, issue appear. With other cases it works fine.

here is my code to create the arcs... var arc = d3.svg.arc() .startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function (d) { if(d.depth == 0){0}else{ return Math.max(0, (y(d.y) + 8))}; }) .outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); }) .padAngle(0.08) .padRadius(100) .cornerRadius(4);

closed time in 11 days

shotaars

issue commentd3/d3-shape

Issue when using cornerRadius with padRadius and padAngle

I’m not able to reproduce this error, so I’ll assume you’re using an old version of D3. If that’s not the case, please fork the notebook below to demonstrate the problem and I will investigate further.

https://observablehq.com/d/8ebc2030d93f72d8

shotaars

comment created time in 11 days

issue commentd3/d3-shape

Issue when using cornerRadius with padRadius and padAngle

You say you’re using d3 v5, but your code snippet references d3.svg.arc which hasn’t existed since d3 v3. Is that a copy-paste error? Or are you mixing old and new versions of D3?

shotaars

comment created time in 11 days

issue commentd3/d3-array

d3.index(iterable, …keys)?

Sketch: https://observablehq.com/d/40780044f9484b90

mbostock

comment created time in 11 days

issue openedd3/d3-array

d3.index(iterable, …keys)?

Sometimes you want something like d3.group, but with the expectation that there will be a single value rather than multiple values per unique key. You can do this using d3.rollup as

d3.rollup(data, ([d]) => d, d => d.foo, d => d.bar)

but this is a little verbose, and it will silently ignore additional values if the keys happen to be non-unique. So how about a stricter shorthand?

d3.index(data, d => d.foo, d => d.bar)

Where:

function index(values, ...keys) {
  return nest(values, identity, indexReduce, keys);
}

function indexReduce(values) {
  if (values.length !== 1) throw new Error("non-unique key");
  return values[0];
}

Is d3.index too generic a name? Maybe d3.groupUnique?

(See also the previous d3.uniques proposal #118.)

created time in 11 days

pull request commentd3/d3-shape

Accept iterables.

Here’s a good example of how iterables support will help:

https://observablehq.com/@mbostock/revenue-by-music-format-1973-2018

Before:

series = d3.stack()
    .keys(Array.from(colors.keys()))
    .value(([, group], name) => group.get(name).value)
    .order(d3.stackOrderReverse)
  (Array.from(d3.rollup(data, ([d]) => d, d => +d.date, d => d.name)))

After:

series = d3.stack()
    .keys(colors.keys())
    .value(([, group], name) => group.get(name).value)
    .order(d3.stackOrderReverse)
  (d3.rollup(data, ([d]) => d, d => +d.date, d => d.name))

Similarly with d3-scale support, before:

color = d3.scaleOrdinal()
    .domain(Array.from(colors.keys()))
    .range(Array.from(colors.values()))

After:

color = d3.scaleOrdinal()
    .domain(colors.keys())
    .range(colors.values())
mbostock

comment created time in 11 days

Pull request review commentobservablehq/htl

Implement {html,svg}.fragment.

-export const html = hypertext(string => {+function renderHtml(string) {   const template = document.createElement("template");   template.innerHTML = string;   return template.content;-});+} -export const svg = hypertext(string => {+function renderSvg(string) {   const g = document.createElementNS("http://www.w3.org/2000/svg", "g");   g.innerHTML = string;   return g;-});+}++export const html = Object.assign(hypertext(renderHtml, fragment => {+  if (fragment.firstChild === null) return null;+  if (fragment.firstChild === fragment.lastChild) return fragment.removeChild(fragment.firstChild);+  const span = document.createElement("span");+  span.appendChild(fragment);+  return span;+}), {fragment: hypertext(renderHtml, fragment => fragment)});++export const svg = Object.assign(hypertext(renderSvg, g => {+  if (g.firstChild === null) return null;+  if (g.firstChild === g.lastChild) return g.removeChild(g.firstChild);+  return g;+}), {fragment: hypertext(renderSvg, g => {+  const fragment = document.createDocumentFragment();+  while (g.firstChild) fragment.appendChild(g.firstChild);

Because the G element can have multiple children. Appending the first child to the document fragment removes it from the G element, changing the value of g.firstChild, and the loop breaks when the G element is empty.

mbostock

comment created time in 12 days

PR opened observablehq/htl

Reviewers
Implement {html,svg}.fragment.

Fixes #9.

+24 -8

0 comment

1 changed file

pr created time in 12 days

create barnchobservablehq/htl

branch : fragment

created branch time in 12 days

issue commentd3/d3-scale

Invalid javascript

It looks like you specified an empty range (so n = 1) and then called invertExtent. Did you intend to specify an empty range?

nickofthyme

comment created time in 13 days

push eventd3/d3.github.com

Mike Bostock

commit sha 1990c5ae323c0a1bec8b687e54f550bdd9c673b9

New gallery.

view details

push time in 13 days

issue commentobservablehq/htl

No wrapping <div> when there are multiple nodes

That’s correct, and it’s explicitly covered in the documentation:

https://observablehq.com/@observablehq/htl

If multiple top-level nodes are given, the result is a document fragment. (Observable doesn’t display fragments because it would dissolve them!) If you’d prefer an element, wrap your markup in your element of choice.

That said, I was thinking about this last night, and I think I’d like to change the API as follows:

  • html always returns a Node (either a TextNode or an Element, wrapping in a SPAN if necessary)
  • html.fragment always returns a DocumentFragment

This way, you can use html if you want the implicit SPAN, but if you need a more accurate interpretation of the specified markup (as when composing multiple pieces of markup), you can opt-in to using html.fragment. And it’ll be more backwards-compatible with the existing Observable standard library, though that’s explicitly not a goal (because the existing html tagged template literal is dangerous).

(There’ll be an svg.fragment too.)

ariofrio

comment created time in 13 days

issue commentd3/d3-zoom

d3-zoom doesn't work with core-js >3.6 on IE11

Do you have a stack trace? Can you try debugging? From what you’ve shared it looks like this line:

https://github.com/d3/d3-dispatch/blob/4f868212fc5b425cd11c07f929fef8a77a46adf3/src/dispatch.js#L19

Yohandah

comment created time in 13 days

pull request commentd3/d3

Support esm on node with conditional exports

Neat! The future is here. I’ll need to do some testing but this looks good at first glance.

sebamarynissen

comment created time in 14 days

issue closedd3/d3-zoom

d3-zoom doesn't work with core-js >3.6 on IE11

Hello,

I have an Angular 8 project that uses d3-zoom 1.8.3, and my project uses core-js which is normal for an Angular project.

When compiling (ng build or ng serve) with core-js 3.5 as a dependency my app works fine in Evergreen browsers, and IE11.

When compiling with core-js 3.6 as a dependency, my app works fine in Evergreen browsers, but on IE 11 I have the following error :

unknown type z and it throws when doing d3Zoom.zoom().on("zoom", () => { });

You don't even need to do something in the callback, just calling .on will throw the error ...

closed time in 14 days

Yohandah

issue commentd3/d3-zoom

d3-zoom doesn't work with core-js >3.6 on IE11

This sounds like a compiler issue, not a library issue. Please see this related discussion: https://github.com/d3/d3-color/issues/68#issuecomment-537147753

Yohandah

comment created time in 14 days

pull request commentd3/d3-delaunay

Object.assign Delaunay.from.

Gosh, yes. I’m embarrassed that didn’t occur to me.

mbostock

comment created time in 17 days

push eventd3/d3-delaunay

Mike Bostock

commit sha a4a0b4585b22466c96632a55d2e2fe782a702190

Static from.

view details

push time in 17 days

issue commentd3/d3-delaunay

d3-delaunay@5.1.6 sideEffects breaks Delaunay class

Does #100 fix this?

jloveless63

comment created time in 17 days

PR opened d3/d3-delaunay

Reviewers
Object.assign Delaunay.from.

This is my (as-yet untested) guess at fixing #99.

+8 -8

0 comment

1 changed file

pr created time in 17 days

create barnchd3/d3-delaunay

branch : assign-from

created branch time in 17 days

issue commentd3/d3-zoom

Touchpad zoom broken in v5

I would also accept a PR changing the default filter so that it only applies the ctrlKey and button tests for mousedown events.

function defaultFilter() {
  return event.type !== "mousedown" || !(event.ctrlKey || event.button);
}
RyanColantuono

comment created time in 18 days

issue commentd3/d3-zoom

Touchpad zoom broken in v5

Have you tried overriding the default filter? If your hypothesis is correct, this should be the fix:

zoom.filter(() => !d3.event.button)
RyanColantuono

comment created time in 18 days

issue commentd3/d3-zoom

Touchpad zoom broken in v5

Do you have some trackpad setting or extension installed that would affect the behavior of two-finger zooming?

RyanColantuono

comment created time in 18 days

issue closedd3/d3-zoom

Touchpad zoom broken in v5

Touchpad support for zooming seems to have been lost in the current d3 v5.

Example in v4 where touchpad zoom is working: https://jsfiddle.net/zshktfp9/2/

Example in v5 where touchpad zoom is no longer working: https://jsfiddle.net/zshktfp9/4/

The zoom code I am using is simple. I tested on mac in safari and chrome and on windows in chrome, the same break in functionality between v4 and v5 happened on all.

var zoom = d3.zoom() .scaleExtent([1, 10]) .on("zoom", function() { grp.attr("transform", d3.event.transform) }); svg.call(zoom);

closed time in 18 days

RyanColantuono

issue commentd3/d3-zoom

Touchpad zoom broken in v5

Can you be more precise about what you mean by “touchpad”? What device, operating system, and browser are you using?

Here are the changes in d3-zoom between d3 v4 and v5:

https://github.com/d3/d3-zoom/compare/v1.7.1...v1.8.3

I don’t see any problems with zooming on multitouch devices, so I’m not able to investigate further. But if you’re willing to provide more information, I can reopen to investigate further. The most helpful information would be to try different versions of d3-zoom to isolate at which point the behavior changed.

RyanColantuono

comment created time in 18 days

issue commentd3/d3-hierarchy

Treemap layout (treemapBinary strategy) outputs NaN co-ordinates

As a notebook for easier inspection and editing:

https://observablehq.com/d/d69b436a2fcc4ed6

It’s almost certainly a divide by zero here:

https://github.com/d3/d3-hierarchy/blob/46f9e8bf1a5a55e94c40158c23025f405adf0be5/src/treemap/binary.js#L37 https://github.com/d3/d3-hierarchy/blob/46f9e8bf1a5a55e94c40158c23025f405adf0be5/src/treemap/binary.js#L41

peterrcook

comment created time in 21 days

issue commentmbostock/ndjson-cli

Support object spread syntax ({...d, }) in ndjson-map

I think we’d just need to update the version of Acorn and configure the ecmaVersion to allow new language features.

stevage

comment created time in a month

issue commentd3/d3-scale-chromatic

Support various output formats

Thanks for the suggestion. :)

jonsadka

comment created time in a month

issue closedd3/d3-scale-chromatic

Support various output formats

Current

Scale functions export an rgb string making it a bit cumbersome to work with

  • d3.interpolateSpectral(0.5) => "rgb(251, 248, 176)"

Proposal

Be able to specify the output format. One such example:

  • d3.interpolateSpectral(0.5, 'object') => {r: 251, g: 248, b: 176}
  • d3.interpolateSpectral(0.5, 'array') => [251, 248, 176]

Part of me feels like there is a utility function in d3-color to convert the rgb string but couldnt find it

closed time in a month

jonsadka

issue commentd3/d3-scale-chromatic

Support various output formats

This class follows the patterns of D3’s color interpolators and returns the result of color.toString which is the RGB-formatted color (for compatibility with computed values CSS, and to prevent transitions when the color hasn’t actually changed).

So, I think it’d be too much work to support arbitrary output formats everywhere D3 has color interpolators.

If you want to compute the channel values in RGB color space, you can parse the string returned by the interpolator:

d3.rgb(d3.interpolateSpectral(0.5)) // {r: 251, g: 248, b: 176}
jonsadka

comment created time in a month

issue closedd3/d3-force

Is there a way to avoid superposition of edges & nodes ?

Hi,

In this example, we could think that there is a link between these two nodes : image but in reality they are not connected, the edge is just passing through this node to go to another one. image

Is there a way to avoid this behavior please ?

closed time in a month

redouane59

issue commentd3/d3-force

Is there a way to avoid superposition of edges & nodes ?

There’s nothing built-in to prevent this, but possibly you could write a custom force that tries to avoid edges passing through unrelated nodes.

redouane59

comment created time in a month

pull request commentd3/d3-brush

allow to pass custom event on brush start

Likewise, I don’t understand the motivation for this change, and this PR includes a number of unrelated changes that are also undesirable.

bartes

comment created time in a month

issue commentd3/d3-sankey

Support multiple orientations?

Related https://github.com/d3/d3-hierarchy/issues/63.

I think I’d follow the approach there (and in d3-axis) and have aliases for the different orientations d3.sankeyUp, d3.sankeyDown, d3.sankeyLeft, d3.sankeyRight with the default d3.sankey = d3.sankeyRight.

But, I’m a little busy right now with other stuff so I don’t know when I’ll get a chance to review this.

limzgiser

comment created time in a month

pull request commentd3/d3-shape

README.md update to describe .data in d3.stack()

A few paragraphs earlier it says:

The input data element for each point is available as point.data.

fraziern

comment created time in a month

issue closedd3/d3-time-format

Implement iso 8601 week year (%G)

I came across a client bug on 1st January 2020 due to the lack of this code.

There appears to be an in-limbo pull request on this already https://github.com/d3/d3-time-format/pull/52 or https://github.com/d3/d3-time-format/pull/49 but I don't see any Issues so have created this one!

closed time in a month

eoghanmurray

issue commentd3/d3-time-format

Implement iso 8601 week year (%G)

Duplicate of #42 .

eoghanmurray

comment created time in a month

issue commentd3/d3-geo-projection

There are es2015 in the final package file

You can add an eslint rule to remind you if you like.

zhubin1992

comment created time in a month

pull request commentd3/d3-geo

Add projection.reflectX / reflectY to all projections.

Interesting. What’s the use case? And is there any appreciable performance cost?

Fil

comment created time in a month

pull request commentd3/d3-hierarchy

Correct description of hierachy.links() method

@Fil That’s exactly what I was going to say.

VorontsovIE

comment created time in 2 months

PR closed d3/d3-color

Update color.js

parse color like 'rgba(255, 0, 0, 0)'

+1 -1

1 comment

1 changed file

hzzcc

pr closed time in 2 months

pull request commentd3/d3-color

Update color.js

If you want to construct that sort of color, you have to use the constructor directly rather than parsing a CSS string. Achromatic CSS colors have NaN values for RGB.

hzzcc

comment created time in 2 months

push eventd3/d3-hierarchy

Mike Bostock

commit sha 14b8c3341888e213df96f971e13f43c1f5581b13

Don’t mangle Node.

view details

push time in 2 months

release d3/d3

v5.15.0

d3.zip 0.25MB

released time in 2 months

release d3/d3-time-format

v2.2.3

released time in 2 months

release d3/d3-format

v1.4.3

released time in 2 months

push eventd3/d3

Mike Bostock

commit sha 4223190ca72929d1c561f3b6181ce5ac6f00aa53

Update dependencies.

view details

Mike Bostock

commit sha 7c711baf51a1485ed8f99f8a6a96dd388409ecf3

5.15.0

view details

push time in 2 months

created tagd3/d3

tagv5.15.0

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

created time in 2 months

created tagmbostock-bower/d3-bower

tagv5.15.0

Generated files from d3 for Bower.

created time in 2 months

push eventmbostock-bower/d3-bower

Mike Bostock

commit sha 05b2ce4344afe56a0787e6c00aa61b308e8cde4a

5.15.0

view details

push time in 2 months

push eventd3/d3.github.com

Mike Bostock

commit sha 26932ba6f7851f6057d1887f03b632dc7a5c69c6

d3 5.15.0

view details

push time in 2 months

push eventd3/d3.github.com

Mike Bostock

commit sha 1f471136a18e0df150b524218f54f61aaa2d63d0

d3-time-format 2.2.3

view details

push time in 2 months

created tagd3/d3-time-format

tagv2.2.3

Parse and format times, inspired by strptime and strftime.

created time in 2 months

push eventd3/d3-time-format

Mike Bostock

commit sha e3bb9e4a3d7ac6f82fa0bd79f9524776fc85b040

2.2.3

view details

push time in 2 months

PR closed d3/d3-time-format

Add zh-TW locale

We use (zh-TW) instead of (zh-CN) We need this for full i18n support for Taiwan / Hong Kong users. They think it's typo.

You can check the related project date-fns to verify this PR

+10 -0

1 comment

1 changed file

Fonger

pr closed time in 2 months

more