26

I've been looking around a while for an answer to this, and I haven't been able to figure it out.

  • I'm ultimately creating a TopoJSON file from grid based data (GRIB files).
  • I can pretty easily interpolate the data down to a finer resolution grid so the plot points appear smoother when zoomed out, but when zoomed in, it's inevitable to see the blocky grid points.
  • I've also looked into simplification, which does help a bit but its not quite smoothing.
  • I'm using D3 to render the data.
  • Is this something that can be done on the front end or should/can it be done in the raw TopoJSON data?
  • I essentially don't want you to be able to tell that it's a grid, even if you zoom in 10,000%.
  • Here's an example of what I'm after:

enter image description here

5
  • 4
    Related Making a SVG path like a smooth line instead of being ragged
    – Hugolpz
    Commented Apr 1, 2015 at 19:30
  • Any time you require continuously smooth lines at all resolutions, your choices basically boil down to huge files or SVG. I would expect the solution would be to take the simplified data and convert it to SVG with rounding on the corners to achieve the desired effect.
    – brichins
    Commented Apr 7, 2015 at 21:14
  • 1
    Also, as a civil engineer I would first ask why this was required at all - it implies a level of accuracy that just doesn't exist in your data set, and for most problems I deal with, overstating your accuracy is a serious liability issue. Depending on your usage, doing this could be bad practice if it could possibly mislead a user and result in incorrect conclusions. I would personally prefer to display (for example) something blocky to visually represent '+/- 5 feet' than a perfect, 0-width line that might land on the wrong side of a property corner.
    – brichins
    Commented Apr 7, 2015 at 21:19
  • 1
    @brichins totally get your concerns but this is a meteorology problem. Historically, averages of data points (along with interpolation algos) creates nice smooth plots (ArcGIS, qGIS, GrADS) - which for this application is most consumable. Weather data generally is not very high resolution (GFS just recently upgraded to 0.25 degrees).
    – stewart715
    Commented Apr 14, 2015 at 13:36
  • This question may help. Commented Apr 15, 2015 at 1:29

3 Answers 3

1

Is this something that can be done on the front end or should/can it be done in the raw TopoJSON data?

This is something that should be done on the front end. If you were to smooth the data before you wrote it to the JSON file, the file would be needlessly big.

3
  • 1
    I'm accepting this, because this is basically what I've found. Algorithms need to do this on the front end, otherwise file size would be extraordinary. With D3/topojson, there is currently no baked in functionality to do this correctly. Must be hand rolled.
    – stewart715
    Commented Jul 30, 2015 at 15:36
  • 1
    Additionally, when done on the front end the interpolation can be performed lazily - if the user does not zoom in, there is no need to perform the interpolation.
    – Sam
    Commented Jul 30, 2015 at 15:42
  • It also might be worth pointing out an obvious statement: GeoJSON/Topojson do not support bezier curves. So smooth curves in that format are actually many, many straight lines that form a curve. Hence, the larger file size if you decide to bake this into the raw data.
    – stewart715
    Commented Jul 30, 2015 at 17:20
1

If you're using D3.js, and you're working with lines, the built-in interpolate() function is the way to go.

Here is a working example of D3's line.interpolate() using "cardinal" smoothing:

http://codepen.io/gracefulcode/pen/doPmOK

example of D3's line.interpolate()

Here's the code:

var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
  .interpolate("cardinal")
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.close);
  });

// Adds the svg canvas
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json('https://api.myjson.com/bins/175jl', function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
  });
  // Scale the range of the data
  // Starting with a basic graph 14
  x.domain(d3.extent(data, function(d) {
    return d.date;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.close;
  })]);
  // Add the valueline path.
  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));
  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
});
1
  • Thanks, but topojson appends paths, not lines. The standard interpolation/smoothing doesn't work unfortunately.
    – stewart715
    Commented Apr 28, 2015 at 13:08
0

Maybe d3 line.interpolate() is what you're looking for?

More info: http://www.d3noob.org/2013/01/smoothing-out-lines-in-d3js.html

1
  • This is for smoothing lines and not paths.
    – stewart715
    Commented Apr 21, 2015 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.