News Articles D3.js

Parse json tree with javascript to get and use a certain attribute to change colour dynamically

I have a json tree , which I want to parse to read an attribute . The attribute is a boolean , the problem is that not all nodes in the tree have the "checked attribute" , This is my json tree : { "children": [ { "children": [ { "children": [], "id": 50, "name": […]

React – Too many re-renders when using props

I have been doing a project where I present a graph on the screen. Now, the data state within the App.js is being passed as a prop and then causes an infinite loop error. If the data variable is within the Graph.js file and used and defined within the useState, then there is no issue. […]

Adding slider to a decision tree in d3.js

I am trying to add sliders in my decision tree plot so that the tree changes dynamically with the slider input(such as a slider for max depth). How do I add a slider such that the classifier gets the slider input and refits the tree to show the plot again. The ‘rules.json’ file is the […]

How to control d3.brush selection with mouse wheel

I have a timeline that I’m using to control a few different visualizations with a d3 brushed selection. I wanted to tie the mouse scroll wheel to the movement of the timeline along the x-axis. So if I scroll down it would move the selection to the left and moving it up would move the […]

How to show ticks each 1.5 on D3.js?

I’m learning D3.js to make some graphs and I have issues with the values shown on an axis. I tried with this: var width = 400, height = 400; var svg ="body") .append("svg") .attr("width", width) .attr("height", height); var xscale = d3.scaleLinear() .domain([0.0, 17.0]) .range([0, width]); var x_axis = d3.axisBottom(xscale) .tickValues([0.0, 1.5, 3.0, 4.5, 6.0, […]

Style D3 chart with CSS

Aiming to keep good separation of concerns between content and styling in my code, while acknowledging that creating charts with D3 blurs the lines a little, I am trying to figure out how to fully control the styling of a D3 chart with CSS. For example, consider the following where I create my SVG:‘svg’) […]

D3.js graph not moving with simulation variable triggering it

So I am using react and D3 together, and I can get a graph to appear with my data, however when I apply the tick, however the graph displayed is static and cannot be interacted with Here is my file: Graph.js import * as d3 from "d3" import { forceSimulation } from "d3"; import { […]

How to implement hyperlinks in JSON & D3 plugin?

My goal here is to have the childless nodes contain hyperlinks. This is the D3 plugin I’m basing things off of: Image Example I’m newer to JS and JSON so I’m having difficulties on figuring out how to proceed, especially since there’s little to refer to in regard to hyperlinks & JSON. If there’s […]

D3.js Nested Axis Labels for Radar Chart

I would like to add nested axis Labels to my radar chart. All online resources just show a singular axis. An example of the image I am trying to reproduce is shown in the below figure. The axis is Management.sr_lvl_1, Management.sr_lvl_2, Management.sr_lvl_3… However, I want the word management to appear only once in the label […]

Making nested y-axis labels when creating bar chart using D3.js

I am new to D3, but need to complete a project task for data visualization, I tried to research how to make nested y-axis labels when creating a bar chart using D3.js. I have my data structure like this [{group:"A", value:"Apple"}, {group:"A", value:"Avocado"}, {group:"B", value:"Banana"}] and [{key:"A", value: {count:1, value: [Apple", "Avocado"]} } {key:"B", value: […]

append circle to path using D3.js

I have an SVG image and I want to attach circles next to the paths with id attach. Here is my code: const svg =‘#svgImage’).attr(‘width’, 500).attr(‘height’, 500) svg .select(‘#attach’) .append(‘svg:circle’) .attr(‘cx’, 100) .attr(‘cy’, 100) .attr(‘r’, 500) .style(‘fill’, ‘#69b3a2’) .attr(‘stroke’, ‘black’) .attr(‘stroke-width’, 2) Problem: The circle is added as a child of the path and […]

How to detect that D3 chart is fully loaded?

I am using D3 with React. There are some animations as part of D3 chart rendering. Once animation is completed, I want to display something in React part of application relying on the rendered element of the D3 chart. But I don’t know how to detect whether D3 chart is fully loaded. I tried using […]

D3js: How do I make my tooltip appear next to the selection?

I am trying to have a tooltip for each square on my heatmap visualization. However, I am not able to position it next to the cursor correctly. This is what happens: My code is this: const margin = { top: 20, right: 20, bottom: 30, left: 150, }; const width = 960 – margin.left – […]

I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error

I am making a bar chart with the years on the X axis. Currently trying to remove the commas using, tickFormat() but it throws an error. Uncaught (in promise) TypeError: svg.append(…).attr(…).attr(…).classed(…).call(…).tickFormat is not a function at Does anyone know what is wrong? My code: let dataNumsOnly = []; let labels = []; fetch(‘’) .then(response => […]

Create link between nodes in d3 React

I have to create link between nodes that are generated via props, this is the code: ` const NetworkGraph = props => { const areaChart = useRef() const dimensions = {width:400, height:200} useEffect(() => { const svg = .attr(‘width’, dimensions.width) .attr(‘height’, dimensions.height) .style(‘background-color’,’white’) const nodo = svg .selectAll("circle") .data( .join("circle") //.enter() //.append("circle") .attr("r", d […]

One line is offset in d3 multi-line chart

I have a d3 chart in observable with 20 lines drawn. I’m using data with .group() applied to do it. One my my lines is always offset by one. I’ve checked and it is not a data issue – in fact, when I use my drop downs to filter the data differently, the country that […]

attr() of another css elemenet. Help me to set the background color of Tippy

How to set an attribute by copying it from another element in css.So I mean something like: #div123 { border-top-color: attr(parent.fillColor) } I know it looks very JavaScriptish, but I cant avoid using CSS / or would be really a mass in my case. Is there any solution for that? // I am using Tippy. […]

D3 force zoom to stay in bounds and smoother

I’m using d3 force with react and trying to add zoom/panning. Zoom and panning is working to a certain extent but I can drag my nodes off of my container and when I drag, it is a bit jittery and sometimes even flies off the screen. const links = => Object.assign({}, d)); const nodes […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.