Hello! I am working on a project and I'm attempting to alter previously used code. In the file, there is a node connected graph where no data is actually displayed, it's just a visual representation of nodes.. What I'm attempting to do is alter the code so that it displays the Lekagul Sensor Data. I want to have 1 node per each gate, and for each node when hovered over, it displays the amount of visits to each gate (and the rest of the Object data, if that's possible). Is this a plausible thing to do in d3? Any help would be appreciated, I am not savvy with d3 in the slightest. https://observablehq.com/d/a54f4be3c924ecf7

👋 大家好！

I found this example at Observable throw an error, maybe failing to load the

.csv

file cause this error

yes we're working on the outage, thanks for flagging!

hey, probably a story told a million times, but someone down to go through experiences again on what forces typically lead to best network layouts?

someone who may be more expert in comparing network variations: which of these two seem a better layout for the same network? first created with Cortext manager's cryptic algorithm, second custom made with node/link forces relative to graph density/complexity

Hi, as shown in the image below, I added a boundary and displayed some nodes inside and outside based on filtering. The issue is that the nodes are shaking for some time. Is there any way to fix or stabilize those nodes?

Hey! I hope it's okay if I plug this: https://talk.observablehq.com/t/synchronizing-d3-zoom-between-on-and-off-screen-canvas/9300 I am honestly going insane trying to solve this, and I'd really really appreciate any input

Hey everyone, can anyone help me clarify what is the difference in writing

vanilla d3 code

inside React

useEffect

hook and embed the code into

JSX

style (for example: array.map(d=><circle r={d.r}>). Thank you and much appreciate for the help

what are `extent`s?

is there a way to set padding for an svg so that stroke on shapes within the svg don't get cut off when they bump up against the edge?

different but related question: any tips on making svg responsive?

how would you draw a polygon that needs bezier curves for two edges, like the connection of a sankey diagram?

I'm attempting to embed some html in a

foreignObject

and it's simply refusing to show up. If I go and edit the element type and change it from a div to a p in the browser console then it shows up, even if I switch it back. Is there some trick to this that I'm not aware of?

when switching from SVG to HTML you have to specify the name space. Something like

.append("xhtml:div")

instead of

.append("div")

I think

see https://d3js.org/d3-selection/namespaces#namespaces

ohhhh interesting, I'll give that a shot, thanks @Fil!

yep, that did it, thanks so much!

I need help.. My area() is not working right. There is some 'commodity' missing. What am I missing?

const keys = d3.union(d3.map(data, d => d.commodity))

const rollup = d3.rollup(data, D => d3.sum(D, d => d.total_emissions_MtCO2e),

d => d.year,

d => d.commodity

)

const stack = d3.stack()

.keys(keys)

.order(d3.stackOrderInsideOut)

.value(([year, data], commodity) => data.get(commodity))

([...rollup])

const area = d3.area()

.x(d => x(d.data[0]))

.y0(d => y(d[0]))

.y1(d => y(d[1]))

and it looks like this:

Hey everyone, can anyone help me with an error i had when setting up an svg under an responsive (bootstrap grid system) div. The error is that the svg keep overflow/blow up from the screen and require cursor

is there a way to select the DOM object that a datum is bound to, and then update that object?

not directly; but you can create a Map (or WeakMap) for fast access

Hey, would someone please help me understand

d3.contour

hello, I was wondering how can i use the built in

d3.color-legend

outside the observable notebook

Hi people, nice to meet you: I have a problem with d3.js I would love some help: Context: I'm zooming a path and I implement a clipPath to delimit the area where the path can be shown. but isn't working as I expect to be, in the image (white bg) you'll see the line is overflowing the y axis container. In the screenshot with the dom tree you'll see the clipPath has a rectangle and that clipPath is attached to a group with id

"trend-limits"

which is the container of the paths that I'm zooming in the image with white bg. I been investigating but every reference confirm that I'm attaching correctly the clipPath, I think something is missing but I need to help to find where is the issue, do you have any idea?

trendLines.attr('clip-path', 'url(#clip-area)');

this is who I'm attaching the clipPath to the

tend-limits

container.

are d3 transition events supposed to fire multiple times for a single transition? I get many start and end events triggered for the same transition

how does one determine the values to put in

d3.zoom().scaleExtent

?

Hi everyone, I hope this message finds you well. My name is Rishant, and I am reaching out on behalf of Green Scale Ltd, an innovative and forward-thinking startup dedicated to fostering carbon literacy among students at schools. We are currently developing a web-based application designed to increase carbon literacy. As part of this exciting project, we are looking to hire a talented D3 programmer for a 2-5 month contract. Given the expertise within this Slack group, we believe that this opportunity would be an excellent fit for members here. Role: The role involves creating dynamic and interactive visualizations using D3.js for our web-based project. The ideal candidate should have a deep understanding of D3.js and Svelte, and the ability to translate complex data into visually appealing and informative graphics. Compensation: We are offering a stipend of €1000 per month, based on workload and project requirements. We believe this contract will provide a valuable opportunity to gain practical experience while contributing to a meaningful cause. If you are interested, please fill out the following Google form: https://forms.gle/tcP1hFUasjPM5FYD8 Thank you for your time and consideration. We look forward to potentially working with one of the talented members of this group. Best regards, Rishant Godara HR-recruitment rishant@greenscaleco.com

Good afternoon, if I want to have my svg fit on multiple layouts (grid system), would I be able to use only 1 set of svg- viewBox values?

Hi all, I'm seeing some weird behaviour with

d3.contour

, it seems like the very edges of my diagram have these weird artifacts where the data sems to veer wildly off course? You can see on the RHS the lines turn sharply downwards which isn't expected, and at the bottom they veer to the right, when the curve of the lines should be gradual! We also have these weird clipped corners. The data is all correct from what we can see, but does anyone have any idea for something immediately obvious that could cause this sort of thing?