Here is what I am using. Can't for the life of me figure out how to add opacity.

const colorScale = d3.scaleSequential(d3.interpolateRdYlGn);

I get a rgb value, for example, rgb(174, 9, 38) but can't see how to return a rgba value if I wanted for example, rgba(174, 9, 38, 0.5)

Our World in Data develops Grapher, a tool based on d3.js that enables users to generate various data visualizations in a browser-like interface that can then be embedded into a website.

However, the project is not yet ready for general uptake outside OWiD's tech stack. Are you familiar with other attempts at building a similar tool?

The functionalities that I am looking for are enabling the developer to connect the data to the software and then a user to have a browser/grapher/dashboard-like experience where he/she is able to display the data in various forms, filter and select series to be displayed, probably adjust scales etc. The intended experience is similar to a dashboard.

Some examples (fulfilling my requirements to various degree) are:

• World Bank's data portal - allows for adding series of data interactively.
• Energy Charts - has features resembling a dashboard.

It would be lovely if it also allowed for employing various types of visualizations, not only charts/lines.

It seems like something like this would be useful for many organizations as an alternative to junky dashboards software like Tableau or Power BI. Yet I have not stumbled upon any alternatives to the undercooked Grapher yet. I wonder if you might have.

https://preview.redd.it/3julpxi5f1tc1.png?width=1920&format=png&auto=webp&s=4a005cb25c9377ad0305f538217a11d3d2929f09

I was exploring D3 and was wondering if I can create interfaces like this, with such interactivity & contextual menus using D3 ?

Hi,

I'm almost finish with a project but I ran into 2 problems:

1. The x-axis title is not aligned correctly and I also tried to add it inside of the svg, but it doesn't show up.

2. Trying to display the sunshine percentage on top of each bars but it doesn't show up.

I need help trying to resolve these 2 issues.

Thanks.

Code Link: https://pastebin.com/TqV1bq4f.

​

I want to create something like the title and I don't know where to start. It's a bit unique I know and this data is for multiple cities too. Thanks.

Using d3 to build a project involving network graphs, however I can't seem to get the force properties working properly i.e. the edges are not moving as I move the nodes. I followed the official documentation but it doesn't seem to work.

Link to my code: https://codesandbox.io/s/d3-graph-g9mf22?file=/src/App.js

In addition, how can I make sure that the labels for nodes and edges move as well?

First time poster. I’m looking to create a mind map, but what I think is a new type, and I’m hoping D3 is the right tool (it will be for an iOS app)

In short, imagine watching a video in slow motion of something hitting the centre of a piece of glass. The fractures would expand outwards, resulting in a pattern. I assume some rules could be observed which dictate direction based on location/angle of other cracks. Another analogy I have thought of is roots growing down into the ground, but in this case it would be 8 start points arranged around a circular start point. The end state would be roughly circular pattern with 8 different coloured segments, growing outwards from the centre.

The visualisation would start blank, and would grow step by step in response to new data. The new data will be a multiple choice question answered by the user. The answer would be categorised (8 categories), and given a strength value (thickness of strand), and a magnetism value (relation to other categories), to define direction within that category/root structure. The 8 categories would alter their starting position around their central axis based on space (getting crowded out) or relation to other categories. The logic of splitting/branching I will need to experiment with.

The thinking is that each user will end up with a unique mind map that grows organically, will be attractive to look at and colourful.

Anyone have any ideas, experience of this or useful videos? Is there a better platform to use than D3 or observable?

Grateful for any input, also happy to pay for work/consulting via Upwork.

I am looking for help to create dynamic representation of enterprise architectures; anyone here has experience with that?

​

​

I've been following the Tutorial from ObservableHQ [1] and currently at Data loaders [2]. However, at one point when the step supposedly to plot quake data on a globe/sphere object as below, but it throws `RuntimeError: land is not defined`, what gives ?

Plot.plot({

projection: {

type: "orthographic",

rotate: [110, -30]

},

marks: [

Plot.graticule(),

Plot.sphere(),

Plot.geo(land, {stroke: "var(--theme-foreground-faint)"}),

Plot.dot(quakes, {x: "longitude", y: "latitude", r: "magnitude", stroke: "#f43f5e"})

]

})

​

[1] https://observablehq.com/framework/getting-started

[2] https://observablehq.com/framework/loaders

The title is pretty descriptive of my question. I'm trying to find the most idiomatic/easy way to animate the scale and rotation property of a d3-geo projection (https://d3js.org/d3-geo/projection).

I'm fairly new to d3, so I don't know all the tools at my disposal yet, so please point me in a good direction if you have any answers/ideas. I'm also using React, so if that adds any complexity in your answer, please let me know.

My current attempt is using d3.tween() to manual call a function every tick t, that updates my current projection function and calls a function to redraw my Canvas. This works fine, but it doesn't allow me to use interpolations with different ease functions as I have both scale and rotation within the same .tween().

A trimmed version of my code:

/* input as array of arrays of form ["type", [interpolation range], duration, startTime] */
d3.transition()
      .duration(longestAnimation)
      .ease(d3.easePolyInOut)
      .tween("", function (d) {
        const interpolations = {};
        animationArray.forEach((animation) => {
          const [
            type,
            [interpolationStartVal, interpolationEndVal],
            duration,
            startTime,
          ] = animation;
          //console.log(animation);
          interpolations[animation] = [
            d3.interpolate(interpolationStartVal, interpolationEndVal),
            duration,
            startTime,
            type,
          ];
        });
        return function (t) {
          Object.entries(interpolations).forEach((interpolation) => {
            const [key, [interpolationFunc, duration, startTime, type]] =
              interpolation;
            const endTime = startTime + duration;
            let additionalFrame = false;
            if (startTime / longestAnimation <= t) {
              additionalFrame = true;
            }

            if (
              (startTime / longestAnimation <= t &&
                endTime / longestAnimation >= t) ||
              additionalFrame
            ) {
              if (endTime / longestAnimation >= t) additionalFrame = false;
              const newProjection = projection;
              const tempT = Math.min(endTime / longestAnimation, t);
              if (type === "rotate") {
              
                newProjection.rotate(
                  interpolationFunc(
                    (tempT - startTime / longestAnimation) *
                      (longestAnimation / duration)
                  )
                );
              }

              if (type === "scale") {
                newProjection.scale(
                  projectionScale *
                    interpolationFunc(
                      (tempT - startTime / longestAnimation) *
                        (longestAnimation / duration)
                    )
                );
              }
              drawCanvasFunc.current(newProjection);

This piece is a little long, but I wanted to illustrate the general idea I had so far, where I edit the current projection and then redraw the canvas every tick. Again, this works fine, but I can't use different easing functions.

Is my only option to write my own animation function using d3.timer?

Let me know - thanks a lot!

Hi all, I'm completely stumped by this, so please let me know any insight you have or where I can ask this question to get more responses.

I'm working on a project using React and D3. Specifically, using the d3geo package. I have a projection defined with

const projectionFunction =

d3[projectionName] || d3GeoProjection[projectionName]; let projection = projectionFunction().reflectX(true).clipAngle(90); useLayoutEffect(() => { projection.scale(projection.scale() * scale); }, [scale, projection]);

This works well. Whenever scale changes (which I change through the d3.zoom event handler), the projection function works as expected and "zooms" in.

const zoomed = useCallback(function zoomed(e) {
    const { k } = e.transform;
    setScale(k);
  }, []);
let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

Additionally, I have a function that rotates the projection, and the rotation is changed by the d3.drag event handler.

function onDrag(e) {
      setRotation((cur) => {
        return [cur[0] - e.dx / (6 * scale), cur[1] - e.dy / (6 * scale)]; // 6 is an arbitrary constant to reduce rotation speed
      });
    }

My code works perfectly as expected, and comfortably performant normally.

​

But, when I zoom in all the way (so scale is now set to 8, and subsequently projection.scale is multiplied by 8), rotations and zooms become extremely laggy. Oddly, this lag is only noticed on Firefox. I tested on Chrome and Edge and they both are very performant.

After using the profiler in both Firefox and Chrome, there is some odd behavior in the call stack that I think is what is causing the perceived lag.

Chrome profiler on the left, Firefox profiler on the right.

The image shows the first four function calls in the profilers when dragging on my projection (which, again, calls my setRotation function, which changes the projection.rotate()). As you can see, the Firefox profiler shows massive delays between each function call, around 50ms for each of them. This continues the entire profiler (you can see that in the full range above). Interestingly, this doesn't happen in Chrome. You can see in the window to the right that there is no delay between each call, therefore, no lag.

This gap in calls is only present when scale is zoomed all the way in.

Firefox profiler when zoomed fully out

You can notice here that the function calls are without delay.

And as another example,

Firefox profiler when zoomed about halfway in

You can see the function calls starting to get delayed, but not nearly as much as when fully zoomed in.

​

​

Is there some strange interaction between Firefox and d3 that I'm not accounting for?

Please let me know if you have any insight or where I should post this instead - thanks!

​

Hey D3 community. I need a bit help from you guys. I have been working on a projects where we are putting points on a 2D pitch and then plotting contour density map over it using d3.contourDensity and geoPath. But I want something like on the right side, where the paths are flowing in and out of axis. I am unable to find a variation of a contour density that does the same. If you want the code then I can put some data points and the graph in sandbox and add it here

I am working on an application that will display real-time data and will update the graph several times a second. In addition, the chart will need to have functions like zooming, drag and drop etc.

The question is whether it is possible to write such an application in react, given that both libraries manipulate the DOM. How will this affect performance?

I am afraid of too frequent re rendering.

What else can I be concerned about when developing this application?

​

Often using d3 with Vue, my code became increasingly complex over time, not only to read but also to make changes to. To solve these problems, I created a small example written in Vue.js. In the future, I want to write something similar for d3-brush and d3-zoom. I would appreciate comments and suggestions https://github.com/MstrVLT/d3_demo

I directly copied the code from this website, but the tooltip is appearing at the bottom for me. How do I make it appear next to the cursor?

Hi, I want to build things that users can interact with. that's why I spent the last 3 months learning three.js and it's quite hard to get a job without being proficient enough in it. then D3.js seems easier and as complex as I want it to be.

I've been interested in Frontend Development for about 3 years. I'm also wondering how much D3.js will help me find a job and is it worth spending my time on it?

I was doing data visualization before I became a developer, but I was only working on photoshop and illustrator and I worked like this for about 4 years.

Bonus: Also, can you send me any links or resources about D3.js that you find useful?

Hi everyone!

I'm new to D3 and looking to build a graph of nodes as pictured. Can you help me understand how I can build this with D3? The number of Nodes is data driven with each child item in a JSON Array being a node.

​

https://preview.redd.it/a2td6idrn6hc1.png?width=1120&format=png&auto=webp&s=9fc534990bf22138c20dc049201a9d569acf2e6e

I'm currently learning d3 and am trying to replicate this effect.
This was created in photoshop with a series of white rectangles with an opacity of 10% and a blend mode of dissolve.

I'm trying to recreate this in d3 and have been able to create the white rectangles however I am not sure how to replicate the dissolve effect...

Description of the dissolve blend mode:
The dissolve mode takes random pixels from both layers. With top layer opacity greater than that of the bottom layer, most pixels are taken from the top layer, while with low opacity most pixels are taken from the bottom layer.

Any suggestions would be greatly appreciated.

https://preview.redd.it/yg8lul57jvgc1.png?width=1260&format=png&auto=webp&s=5da3cc1b905a403a28ab5fc27c40c62ea24defd1

I'm was asked to create a show and tell about React and D3. I plan to do a short live coding session. I'm looking for the ideas for simple visualisations that could show a number of D3 features. What would you choose? The thought behind it is: with D3 one can simply create interesting and interactive visualisations.

Hello! Chat GPT has opened up a GPT store and if you fancy some quick assistance I made a GPT for it. It was fine tuned to pull the recent docs from d3.js official doc page. If you are interested here is the link or just look up " D3.js Assistant " in the GPT store. Any feedback is appreciated, have a good day.

I'm sorry if this is the wrong place to ask this, but I am having the absolute worst time figuring this problem out. I can get the axis to show up, but no matter what I do I cannot get the line to show up on my plot. If anyone can point out what I'm doing wrong I would be grateful.

function plot(rand_data){
	rand_data=rand_data[0]
	
// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
	width = 460 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
	const svg = d3.select("#data_plot")
  .append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
  .append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`);


	var xScale = d3.scaleLinear().domain([0, rand_data.index.length]).range([0, width]);
	svg.append("g")
	  .attr("transform", "translate(0," + height + ")")
	  .call(d3.axisBottom(xScale));
	  
	var yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
	svg.append("g")
	  .call(d3.axisLeft(yScale));
	
	
	svg.append("path")
	  .datum(rand_data)
	  .attr("fill", "none")
	  .attr("stroke", "steelblue")
	  .attr("stroke-width", 1.5)
	  .attr("d", d3.line()
		.x(function(d) { return xScale(d.value) })
		.y(function(d) { return yScale(d.index) })
		)
	
}

Hello d3.js community, I'm working on a project for my company that requires me to learn d3.js. I have never worked with data visualization libraries, and I do not know how to start learning this. Should I just watch YouTube videos, or read documentations, or watch udemy course? What would be the best approach to learn d3.js and what resources should I use? Any guidance would be appreciated.

PS: I have good understanding of js.

Hi! I am new to D3 and trying to find how to use d3js to build a time progression of a network of events, similar to Kronograph. Could you please give me some hints on the packages and open sources? Many thanks.

- X-axis is the time window.

- Y-axis is the list of entities which can be grouped.

- The chart signifies events between entities.

https://preview.redd.it/4ntzrybjm5ac1.png?width=784&format=png&auto=webp&s=c3e0eecd81ba4c3fcc3206a3c64365a6c1d295ff

https://preview.redd.it/43fyyb1zl5ac1.png?width=784&format=png&auto=webp&s=9408996e646ad2f047eb71922f1e0e0457bb2e65

I want to have a datagrid table on top and a line chart below it with same data points. Please note, they are separate sections, doesn't overlap with one another, rather one is on top of another. What I want to accomplish is to have the values in the table cells perfectly aligned vertically with the data points in the line chart below it. How can I accomplish that? I am open to use any framework or library possible.

I tried the followings:

1. to use canvas.js and rem/px/em values for widths of the table cells to adjust with the chart.
2. set the width of the chart to be the offsetWidth property of the table to adjust the width of the chart so that the points are equally distant and get aligned.

None of the approaches with canvas.js seems to work.

I would like to create a timeline but where the time axis is curved. Something like this. The timeline itself is fairly easy but I don't know how to make it "wiggle". Where should I start? Thank you!

https://preview.redd.it/1os2mwfs7n6c1.png?width=1350&format=png&auto=webp&s=88f9db8eb6281cae64fb09f8519397b41784397d

Hi everybody,

I'm pleased to introduce you to d3-custom-scale a tiny npm package that can be used to create custom d3 scales from mathematical functions.

For example, to create an asinh scale you just have to provide the scale function and its inverse.

const asinhScale = scaleCustom(x => Math.asinh(x), x => Math.sinh(x));

If anyone is interested in taking a look, please feel free to share your feedback with me!

Npm page - GitHub repository