Im trying to create a multiline graphic whith D3, in body I have this Line: <svg id="lineChart1" width="600" height="400"></svg> this is the js code: function getRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const…
issue I encountered an issue while using D3.js. I have two functions, unexpectedCode and expectedCode, which are supposed to draw some circles in an SVG and change their color when clicked. The click event in expectedCode works fine, but in…
Using Observable Plot, I wish to recreate the https://merrysky.net weather timeline with colored bands and text labels. I have gotten an initial version working, but it has some flaws: The labels are often longer than the "section" they are labeling,…
Question: How can I get the x/y data values from an Obervable Plot for the point the mouse is hovering over? (Or touched on mobile.) Background: I am trying to make an interactive timeline like on https://merrysky.net. So I would…
Follow up from Add Rows to grid layout via d3 With the following snippet I can now add data as rows in a grid layout. However, as you can see, d3 adds first all cell1 then all cell2 and eventually…
I use "Scrollytelling" in my React application and need to change an svg dynamically according to the current scrollprogress of a section. For example like this: useEffect(() => { if(scrollProgress > 0.5 && scrollProgress < 0.7) foo(); // Called at…
I am trying to add a legend to the d3.js example named Line chart with zoom in d3.js 1°) I added the script: // Add legend rectangle line.append('rect') .attr('x', width - 80) .attr('y', 90) .attr('width', 10) .attr('height', 10) .style('fill', "steelblue");…
I'm creating a 3-line chart using D3v7 but only 1 is showed. I'm unable to figure out why. This is my dataset: Current output: Check out my code below: // Setup SVG var svg = d3.select("body").append("svg") .attr("width", width + paddingLeft…
I have code using d3 v6.7.0 that sets up a scale like so: const range = [0, 828.156]; const domain = [[300,1],[300,2],[300,3],[400,1],[400,2],[400,3],[400,4]] const scale = d3.scaleBand() .domain(domain) .range(range); // test 1: this works in both v6 and v7 const a…
I have been using very basic LineChart that renders like this: As you can see, the Money label is overlapping with the ticks. What is the best way of avoiding this? Source of the LineChart: const xAxisMax = _.max(turns) ??…