1

I'm trying to use D3's Isoline graph to display a contour plot from a set of data where each pixel has X, Y and an Intensity. So far, what I gather from just sifting through the library, is that an Isolinegraph has a DataSource property that is a IDataSource2D(of Double). So I create one in code but I can't figure out how to fill it with any data. If anyone has successfully used D3's Isolinegraph under WPF, I would greatly appreciate a tip on this. I've been searching for hours now and all I could find was a post from 3 years ago from "CX Gamer" but it seems he doesn't have the code in question anymore. Thanks in advance for any help.

Francis.

Emmanuel DURIN
  • 4,803
  • 2
  • 28
  • 53
FrancisT
  • 11
  • 2

2 Answers2

0

Francis,

I had a look at Dynamic Data Display library and I took inspiration from samples to achieve this

enter image description here

1. Describe the graphics in XAML

<Grid>
    <d3:ChartPlotter Name="plotter">
        <!--to display the isolines-->
        <d3:IsolineGraph Name="isolineGraph"/>
        <!--to dynamically display the isocurve just under mouse cursor-->
        <d3:IsolineTrackingGraph Name="trackingGraph"/>
        <!--to show x and y coordinates-->
        <d3:CursorCoordinateGraph/>
    </d3:ChartPlotter>
</Grid>

2. Provide some data in C#

public MainWindow()
{
    InitializeComponent();
    const int width=100;
    const int height=100;
    double[,] data = new double[width, height];
    for (int row = 0; row < height; row++)
        for (int column = 0; column < width; column++)
            data[column, row] = Math.Cos(2.0*Math.PI*column /(width-1)  )*
                Math.Cos(2.0 * Math.PI * row / (height - 1));

    Point[,] gridData = new Point[width, height];
    for (int row = 0; row < height; row++)
        for (int column = 0; column < width; column++)
            gridData[column, row] = new Point(row, column);
    // Create data source
    WarpedDataSource2D<double> dataSource = new WarpedDataSource2D<double>(data, gridData);
    isolineGraph.DataSource = dataSource;
    trackingGraph.DataSource = dataSource;

    Rect visible = new Rect(dataSource.Grid.GetLowerBound(0), dataSource.Grid.GetLowerBound(1),
        dataSource.Grid.GetUpperBound(0), dataSource.Grid.GetUpperBound(1));
    plotter.Viewport.Visible = visible;
}

The code I provide calculates a function with values depending on x and y.

I put the computed (cosinus) values in the data variable

The gridData variable only holds the {x,y} points

Here is the full working project : http://1drv.ms/1P2TGmO

Regards

Emmanuel DURIN
  • 4,803
  • 2
  • 28
  • 53
0

I did try it and it worked great. I only had to modify your example to make it work on a rectangular case (width not equal to height) as there was an inversion in the gridData assignment:

gridData[column, row] = new Point(row, column)

was changed to

gridData[column, row] = new Point(column, row)

And that seemed to do it. Sadly, I don't think there is a way in D3 isoline to fill the map with colors, just like in a heat map or the contour plot of CHartDirector (that is the library I was using on WinForms but it doesn't work in WPF). So I am now looking at Oxyplot. Many thanks for your help.

Francis.

FrancisT
  • 11
  • 2