Trouble with

New To Observable
1

Hi all, I’m having trouble with the absolute basics of D3 with Observable. I have a bunch of D3 experience, but I’ve never done anything with Observable. I’m trying to do just a super simple plot with d3, but I’m getting null as a response from the following code. Can anyone see what’s wrong?

testChart = {
  const data = [{x: 5, y:6},{x: 6, y:6.3}, {x: 5.1, y:5.7}]
  const svg = d3.selectAll(DOM.svg(400, 500))

  svg.append("g").selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("fill", "#ff0000")
    .attr("cx", function(d) { d["x"] })
    .attr("cy", function(d) { d["y"] })
    .attr("r", 1.5)
    
  return svg.node()
}
2

Hi @nzufelt, and welcome!

Let’s dive right in:

const svg = d3.selectAll(DOM.svg(400, 500))

This might have been a typo. You’ll have to use d3.select() here:

const svg = d3.select(DOM.svg(400, 500))

or

const svg = d3.create("svg").attr("width", 400).attr("height", 500);

These two callbacks:

    .attr("cx", function(d) { d["x"] })
    .attr("cy", function(d) { d["y"] })

don’t return anything. They should instead read

    .attr("cx", function(d) { return d["x"] })
    .attr("cy", function(d) { return d["y"] })

or more concise

    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
3 Likes