Skip to content

Home

Jump to bottom
sureshaks edited this page Oct 19, 2019 · 3 revisions

What is this?

D3-charts is a framework built around d3.js to easily add visualization charts to your web application without worrying about the underlying code.

API documentation

HTML code

<html>
     <body>
          <div class="my-viz">
          </div>
     </body>
</html>

Line chart

This is the basic usage of the Line function to plot a line chart.

options = {};
options.element = ".my-viz"; // where to place the chart
options.data = myData; // the data source
options.x = "columnX"; // the x-axis column name
options.y = "columnY"; // the y-axis column name

var line = Line(options);

Extra options

options.height = 300;  // height of the chart (default is 200)
options.width = 300;  // width of the chart (default is 200)
options.margin = {
   top: 30,
   bottom: 30,
   left: 50,
   right: 20
};                    // the margin specifications

options.font = "Times New Roman"; // font of the chart; default is "Segoe UI"
options.color = "black"; // color of the line; default is "steelblue" 
options.axisColor = "black" // color of the axes; default is "gray"
options.title = "My custom title"; // default is the name of the chart itself (i.e. "Line Chart")
options.xMin = 0;      // the minimum value on the x-scale
options.xMax = 1000;   // the maximum value on the x-scale
options.xLabel = "my x-axis-label"; // default is the name of the column
options.yMin = 0;      // the minimum value on the y-scale
options.yMax = 1000;   // the maximum value on the y-scale
options.yLabel = "my y-axis-label"; // default is the name of the column

Scatter plot

This is the basic usage of the Scatter function to plot a scatter plot.

options = {};
options.element = ".my-viz"; // where to place the chart
options.data = myData; // the data source
options.x = "columnX"; // the x-axis column name
options.y = "columnY"; // the y-axis column name

var scatter = Scatter(options);

Extra options

options.height = 300;  // height of the chart (default is 200)
options.width = 300;  // width of the chart (default is 200)
options.margin = {
   top: 30,
   bottom: 30,
   left: 50,
   right: 20
};                    // the margin specifications

options.font = "Times New Roman"; // font of the chart; default is "Segoe UI"
options.color = "black"; // color of the points; default is "steelblue" 
options.axisColor = "black" // color of the axes; default is "gray"
options.title = "My custom title"; // default is the name of the chart itself (i.e. "Scatter plot")
options.xMin = 0;      // the minimum value on the x-scale
options.xMax = 1000;   // the maximum value on the x-scale
options.xLabel = "my x-axis-label"; // default is the name of the column
options.yMin = 0;      // the minimum value on the y-scale
options.yMax = 1000;   // the maximum value on the y-scale
options.yLabel = "my y-axis-label"; // default is the name of the column

Histogram

This is the basic usage of the Histogram function to plot a histogram

options = {};
options.element = ".my-viz"; // where to place the chart
options.data = myData; // the data source
options.x = "columnX"; // the x-axis column name

var hist= Histogram(options);

Extra options

options.height = 300;  // height of the chart (default is 200)
options.width = 300;  // width of the chart (default is 200)
options.margin = {
   top: 30,
   bottom: 30,
   left: 50,
   right: 20
};                    // the margin specifications

options.font = "Times New Roman"; // font of the chart; default is "Segoe UI"
options.color = "black"; // color of the bars; default is "steelblue" 
options.axisColor = "black" // color of the axes; default is "gray"
options.title = "My custom title"; // default is the name of the chart itself (i.e. "Histogram")
options.xMin = 0;      // the minimum value on the x-scale
options.xMax = 1000;   // the maximum value on the x-scale
options.xLabel = "my x-axis-label"; // default is the name of the column
options.yLabel = "my y-axis-label"; // default is the name of the column

Bar plot

This is the basic usage of the Bar function to plot a bar plot.

options = {};
options.element = ".my-viz"; // where to place the chart
options.data = myData; // the data source
options.x = "columnX"; // the x-axis column name
options.y = "columnY"; // the y-axis column name

var bar = Bar(options);

Extra options

options.height = 300;  // height of the chart (default is 200)
options.width = 300;  // width of the chart (default is 200)
options.margin = {
   top: 30,
   bottom: 30,
   left: 50,
   right: 20
};                    // the margin specifications

options.font = "Times New Roman"; // font of the chart; default is "Segoe UI"
options.color = "black"; // color of the bars; default is "steelblue" 
options.axisColor = "black" // color of the axes; default is "gray"
options.title = "My custom title"; // default is the name of the chart itself (i.e. "Bar Chart")
options.xLabel = "my x-axis-label"; // default is the name of the column
options.yMin = 0;      // the minimum value on the y-scale
options.yMax = 1000;   // the maximum value on the y-scale
options.yLabel = "my y-axis-label"; // default is the name of the column
Clone this wiki locally