glowing sphere - d3 orthographic projection cant get css to work

Question

I'm trying to combine these two d3 examples:

http://bl.ocks.org/mbostock/4183330

http://bl.ocks.org/mbostock/2206590

I have a sphere with the projection displaying correctly, and the zoom working correctly. All I'm trying to do now is style it.

I got the world tour example working previously, it uses canvas and I was able to give it a shadow to create a glow effect that I really liked.

After merging these two code pieces I'm now using svg elements and I cannot seem to get the glow effect to work.

Here is my code (the fill attribute of the .globe class seems to be working):

<!DOCTYPE html>
<meta charset="utf-8">
 <style>

body {
  background: #000000;
}

.background {
  fill: none;
  pointer-events: all;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.feature.active {
  fill: #00FF15;
}

.globe
{
  fill:#fff;
  strokeStyle: #35C441; 
  lineWidth: 5; 
  shadowColor: #35C441;
  shadowBlur: 40;
  shadowOffsetX: 0;
  shadowOffsetY: 0;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script src="d3/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 720;
    active = d3.select(null);

var globe = {type: "Sphere"};

var projection = d3.geo.orthographic()
    .scale(height / 2.1)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.5);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//append a rectange to the svg element. give it the background css style class.
//on click do reset?
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

//append "g" to the svg element
var g = svg.append("g")
    .style("stroke-width", "1.5px");

var path = d3.geo.path()
    .projection(projection)

d3.json("./world-110m.json", function(error, world) {
  g.append("path")
        .datum(globe)
        .attr("class", "globe")
        .attr("d", path);

  g.selectAll("path")
    .data(topojson.feature(world, world.objects.countries).features)
    .enter().append("path")
    .attr("d", path)
    .attr("class", "feature")
    .on("click", clicked);



 g.append("path")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "mesh")
      .attr("d", path);

});

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
}

</script>

</body>
</html>

If anyone can help that would be great, or if the answer already exists on here could you please point me in the right direction

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

It would have helped if you included a picture of the effect you want.

That said, your CSS is simply not valid with SVG elements:

enter image description here

The first two have corresponding styles:

.globe {
   fill:#fff;
   stroke: #35C441; 
   stroke-width: 5; 
}

Shadows, though, are a bit trickier.

edited May 23 '17 at 12:05

Community

1
1

answered Dec 20 '14 at 16:52

Mark

106,305
20
172
230

glowing sphere - d3 orthographic projection cant get css to work

1 Answers1