visualizations.hpp

Tools to build D3 visualizations.

namespace emp

namespace web

class D3Visualization : public internal::WidgetFacet<D3Visualization>

#include <visualizations.hpp>

Subclassed by emp::web::DotPlot, emp::web::HeatMap, emp::web::HistogramChart< DATA_TYPE, X_SCALE_TYPE, Y_SCALE_TYPE >, emp::web::LineGraph< DATA_TYPE, X_SCALE_TYPE, Y_SCALE_TYPE >, emp::web::TreeVisualization< NODE >, emp::web::TreeVisualization< SpatialGridTreeNode >, emp::web::TreeVisualization< TreeNode >

Public Types

using INFO_TYPE = D3VisualizationInfo 

Public Functions

inline D3Visualization(int w, int h, const std::string &in_id = "")

inline D3Visualization(const D3Visualization &in)

inline D3Visualization(const Widget &in)

inline virtual ~D3Visualization()

inline int GetWidth() const

inline int GetHeight() const

inline D3::Selection *GetSVG()

inline std::string GetID()

inline virtual void Setup()

inline void SetDrawCallback(std::string func): This callback function will be called every time data is done being drawn. Can be a string representing the name of a function in Javascript (can be in the current window, the emp namespace, or the d3 namespace)

inline void CallDrawCallback()

Public Members

vector<std::string> variables

FunctionSet<void()> pending_funcs

bool init = false

std::string draw_data_callback = "__default_draw_data_callback": Callback function for drawing data after rescale animation.

Protected Functions

inline D3VisualizationInfo *Info()

inline const D3VisualizationInfo *Info() const

inline D3Visualization(D3VisualizationInfo *in_info)

Protected Attributes

double axis_width = 60

double y_margin = 10

double x_margin = 30

Friends

friend class D3VisualizationInfo

class D3VisualizationInfo : public WidgetInfo

#include <visualizations.hpp>

Public Functions

inline virtual std::string GetType() override

Protected Functions

inline D3VisualizationInfo(D3Visualization *parent, const std::string &in_id = "")

D3VisualizationInfo(const D3VisualizationInfo&) = delete

D3VisualizationInfo &operator=(const D3VisualizationInfo&) = delete

inline virtual ~D3VisualizationInfo()

inline virtual void GetHTML(std::stringstream &HTML) override

inline void TriggerJS() override

Protected Attributes

int width

int height

D3Visualization *parent

D3::Selection svg

Private Members

friend D3Visualization

class DotPlot : public emp::web::D3Visualization 

#include <visualizations.hpp>

Public Functions

inline DotPlot(int w = 500, int h = 500)

inline virtual void Setup()

inline virtual void AddDataPoint(int update, vector<double> &values)

Public Members

D3::LinearScale *x_scale

D3::LinearScale *y_scale

D3::Axis<D3::LinearScale> *ax

D3::Selection circles

D3::ToolTip *tip

Private Members

double margin = 10

double axis_width = 40

double value_growth_margin = 1.5

double value_loss_margin = .8

class HeatMap : public emp::web::D3Visualization 

#include <visualizations.hpp>

Public Functions

inline virtual void Setup()

Public Members

int grid_width = 10

int grid_height = 10

int cell_size = 15

D3::TileGrid grid

template<typename DATA_TYPE = int, typename X_SCALE_TYPE = D3::LinearScale, typename Y_SCALE_TYPE = D3::LinearScale> class HistogramChart : public emp::web::D3Visualization 

#include <visualizations.hpp>

Public Functions

inline HistogramChart(std::string x_var, int w = 800, int h = 400)

inline virtual void Setup()

inline void DrawData(vector<DATA_TYPE> &data)

Protected Attributes

D3::Axis<X_SCALE_TYPE> x_ax

D3::Axis<Y_SCALE_TYPE> y_ax

D3::Histogram h

DATA_TYPE x_min = 100

DATA_TYPE x_max = 0

DATA_TYPE y_max = 10

template<typename DATA_TYPE = array<double, 2>, typename X_SCALE_TYPE = D3::LinearScale, typename Y_SCALE_TYPE = D3::LinearScale> class LineGraph : public emp::web::D3Visualization 

#include <visualizations.hpp>

Public Functions

inline LineGraph(std::string x_var = "", std::string y_var = "", int w = 800, int h = 400)

inline ~LineGraph()

inline virtual void Setup(): Initializes the graph. This function is called automatically when the Document this has been added to is ready.

inline X_SCALE_TYPE *GetXScale()

inline Y_SCALE_TYPE *GetYScale()

inline D3::Axis<X_SCALE_TYPE> *GetXAxis()

inline D3::Axis<Y_SCALE_TYPE> *GetYAxis()

inline D3::LineGenerator *GetLineGenerator()

inline D3::CSVDataset *GetDataset()

inline D3::ToolTip *GetToolTip()

inline std::function<double(DATA_TYPE)> GetXAccessor()

inline std::function<double(DATA_TYPE)> GetYAccessor()

inline std::function<double(DATA_TYPE)> GetScaledX()

inline std::function<double(DATA_TYPE)> GetScaledY()

inline void SetXScale(X_SCALE_TYPE *scale)

inline void SetYScale(Y_SCALE_TYPE *scale)

inline void SetXAxis(D3::Axis<X_SCALE_TYPE> *ax)

inline void SetYAxis(D3::Axis<Y_SCALE_TYPE> *ax)

inline void SetLineGenerator(D3::LineGenerator *line)

inline void SetDataset(D3::CSVDataset *d)

inline void SetTooltipFunction(std::string func)

inline void SetXAccessor(std::string func): Set the function that is used to get the x variable from within a DATA_TYPE object. For instance, the default accessor assumes that DATA_TYPE is an array with two elements (x, y): [](DATA_TYPE d) {return d[0];} This accessor will be fed into the x_scale to get x values scaled to the plotting area. Can be a string representing the name of a function in Javascript (can be in the current window, the emp namespace, or the d3 namespace)

inline void SetYAccessor(std::string func): Set the function that is used to get the y variable from within a DATA_TYPE object. For instance, the default accessor assumes that DATA_TYPE is an array with two elements (x, y): [](DATA_TYPE d) {return d[1];} This accessor will be fed into the y_scale to get y values scaled to the plotting area. Can be a string representing the name of a function in Javascript (can be in the current window, the emp namespace, or the d3 namespace)

inline void DrawPointsFromDataset(): Draw points and lines for data in this object’s dataset object.

inline void LoadDataFromFile(std::string filename): Load data from the file at [filename]. Expected to be a CSV dataset.

inline void AddDataPoint(DATA_TYPE data_point): Smoothly (i.e. with animation) add data_point to the graph.

template<typename T> inline void Redraw(D3::SelectionOrTransition<T> &s): Redraws all data on the given selection or transition, which should contain an SVG canvas. Useful if you’ve adjusted scales.

inline void DrawData(bool backlog = false)

inline void Clear()

Public Members

D3::Selection exit

Protected Attributes

double y_min = 1000

double y_max = 0

double x_min = 1000

double x_max = 0

X_SCALE_TYPE *x_scale

Y_SCALE_TYPE *y_scale

D3::Axis<X_SCALE_TYPE> *x_axis

D3::Axis<Y_SCALE_TYPE> *y_axis

D3::LineGenerator *line_gen

D3::ToolTip *tip

D3::CSVDataset *dataset

std::deque<DATA_TYPE> data

DATA_TYPE prev_data = {{-1, -1}}

struct SpatialGridTreeNode: #include <visualizations.hpp>

template<typename NODE = SpatialGridTreeNode, template<typename> class TREE_TYPE = TreeVisualization> class SpatialGridTreeVisualization : public emp::web::TreeVisualization<SpatialGridTreeNode>

#include <visualizations.hpp>

Public Functions

inline vector<int> GetLocHistory(int id)

inline SpatialGridTreeVisualization(int width, int height)

inline virtual void Setup()

Public Members

int grid_width = 10

int grid_height = 10

int legend_cell_size = 15

D3::Selection legend

std::function<void(NODE, int)> node_mouseover

std::function<std::string(NODE, int)> color_fun_node = [this](NODE d, int i){if (d.loc() < 0) {return std::string("black");}double x = (d.loc() %grid_width) - grid_width/2;double y = (d.loc() /grid_width) - grid_height/2;double r = sqrt(std::pow((int)x,2)+std::pow((int)y,2)) / sqrt(std::pow(grid_width,2)+std::pow(grid_height,2));(void) r;double theta = atan2(y, x)*(180/PI);(void) theta;char * color = (char *) MAIN_THREAD_EM_ASM_INT({var text = d3.hcl($1, 150, $0*175).toString();var buffer = Module._malloc(text.length+1);Module.stringToUTF8(text, buffer, lengthBytesUTF8(text)+1);return buffer;}, r, theta);std::string result = std::string(color);free(color);return result;}

std::function<std::string(NODE, int)> dark_color_fun = [this](NODE d, int i){if (d.loc() < 0) {return std::string("black");}double x = (d.loc() %grid_width) - grid_width/2;double y = (d.loc() /grid_width) - grid_height/2;double r = sqrt(std::pow((int)x,2)+std::pow((int)y,2)) / sqrt(std::pow(grid_width,2)+std::pow(grid_height,2));(void) r;double theta = atan2(y, x)*(180/PI);(void) theta;char * color = (char *) MAIN_THREAD_EM_ASM_INT({var text = d3.hcl($1, 150, $0*175).darker().toString();var buffer = Module._malloc(text.length+1);Module.stringToUTF8(text, buffer, lengthBytesUTF8(text)+1);return buffer;}, r, theta);std::string result = std::string(color);free(color);return result;}

std::function<std::string(TreeEdge, int)> color_fun_link = [this](TreeEdged, int i){return this->color_fun_node(d.source(), i);}

std::function<void(LegendNode, int)> legend_mouseover = [this](LegendNoded, int il) {legend.SelectAll("rect").Filter([d](LegendNode in_data){return d.loc() != in_data.loc();}).SetClassed("faded", true); GetSVG()->SelectAll(".node").Filter([d](LegendNodein_data){return d.loc() != in_data.loc();}).SetClassed("faded", true);MAIN_THREAD_EM_ASM({emp.filter_fun = function(d){return d.source.loc != $0;}}, d.loc());GetSVG()->SelectAll(".link").Filter("filter_fun").SetClassed("faded", true);}

std::function<void(LegendNode, int)> legend_mouseout = [this](LegendNoded, int i) {legend.SelectAll("rect").Filter([d](LegendNodein_data){return d.loc() != in_data.loc();}).SetClassed("faded", false);GetSVG()->SelectAll(".node").Filter([d](LegendNodein_data){return d.loc() != in_data.loc();}).SetClassed("faded", false);MAIN_THREAD_EM_ASM({emp.filter_fun = function(d){return d.source.loc != $0;}}, d.loc());GetSVG()->SelectAll(".link").Filter("filter_fun").SetClassed("faded", false);}

struct LegendNode: #include <visualizations.hpp>

struct TreeEdge: #include <visualizations.hpp>

struct TreeDataNode: #include <visualizations.hpp>

struct TreeNode: #include <visualizations.hpp>

template<typename NODE = TreeNode> class TreeVisualization : public emp::web::D3Visualization 

#include <visualizations.hpp>

Public Functions

inline TreeVisualization(int width = 800, int height = 400)

inline virtual void Setup()

inline void SetTooltipFunction(std::string func)

inline D3::TreeLayout<NODE> *GetTreeLayout()

inline D3::JSONDataset *GetDataset()

inline D3::ToolTip *GetToolTip()

inline void SetDataset(D3::JSONDataset *d)

inline void LoadDataFromFile(std::string filename)

inline void AddDataPoint(int parent, int child)

inline void DrawTree()

inline void Clear()

Public Members

D3::TreeLayout<NODE> tree

D3::JSONDataset *data

Protected Functions

inline void InitializeVariables()

Protected Attributes

double y_margin = 10

double x_margin = 30

D3::ToolTip *tip

template<typename NODE = TreeNode> class TreeVisualizationReplacement : public emp::web::TreeVisualization<TreeNode>

#include <visualizations.hpp>

Public Functions

inline TreeVisualizationReplacement(int width, int height)

inline virtual void Setup()

inline void AddDataPoint(int parent, int child)

inline void RecordPlacement(int pos)

inline void RecordParent(int parent, int child)

Public Members

int next_pos

int next_parent = 0

int next_child

D3::JSObject possible_parents