Search code examples
javascriptd3.jsdata-visualizationdimple.js

Create simple scatter plot with Dimple


Using dimple.js, I'm trying to create a simple scatter plot. However, the only result I'm getting is a bar graph, and I'm not sure how to switch it to a scatter. My data looks like this;

var data = [
    {"Month":new Date(1942, 8, 1, 1, 1, 1, 1), "Workers":0},
    {"Month":new Date(1942, 9, 1, 1, 1, 1, 1), "Workers":667}
    ...
]

I then create the graph like this

var svg = dimple.newSvg("body", 800, 600);
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");
chart.addMeasureAxis("y", "Workers");
chart.addSeries(null, dimple.plot.bar);
chart.draw();

I tried changing x to chart.addMeasureAxis("x", "Month"), but then the chart would not even render. Any solutions?


Solution

  • To render a scatter plot you need to change:

    chart.addSeries(null, dimple.plot.bar);
    

    to

    chart.addSeries(null, dimple.plot.bubble);
    

    The different axes allow you to change between the different types of scatter plot. With a category axis on x you will get equally spaced points which might look more suitable as a line chart (just change the above to dimple.plot.line). Two measure axes will make for a more standard scatter plot, in which case you will probably want to pass a dimension to the first parameter of addSeries, otherwise all the data will be aggregated to a single point. You can see all the basic types of scatter plot and how to create them in the examples on the website.