Examples with StyleChart org.deeplearning4j.ui.components.chart.style.StyleChart used on opensource projects

Example 1 with StyleChart

use of org.deeplearning4j.ui.components.chart.style.StyleChart in project deeplearning4j by deeplearning4j.

the class StatsUtils method exportStatsAsHTML.

/**
     * Generate and export a HTML representation (including charts, etc) of the Spark training statistics<br>
     * This overload is for writing to an output stream
     *
     * @param sparkTrainingStats Stats to generate HTML page for
     * @param maxTimelineSizeMs  maximum amount of activity to show in a single timeline plot (multiple plots will be used if training exceeds this amount of time)
     * @throws Exception IO errors or error generating HTML file
     */
public static void exportStatsAsHTML(SparkTrainingStats sparkTrainingStats, long maxTimelineSizeMs, OutputStream outputStream) throws Exception {
    Set<String> keySet = sparkTrainingStats.getKeySet();
    List<Component> components = new ArrayList<>();
    StyleChart styleChart = new StyleChart.Builder().backgroundColor(Color.WHITE).width(700, LengthUnit.Px).height(400, LengthUnit.Px).build();
    StyleText styleText = new StyleText.Builder().color(Color.BLACK).fontSize(20).build();
    Component headerText = new ComponentText("Deeplearning4j - Spark Training Analysis", styleText);
    Component header = new ComponentDiv(new StyleDiv.Builder().height(40, LengthUnit.Px).width(100, LengthUnit.Percent).build(), headerText);
    components.add(header);
    Set<String> keySetInclude = new HashSet<>();
    for (String s : keySet) if (sparkTrainingStats.defaultIncludeInPlots(s))
        keySetInclude.add(s);
    Collections.addAll(components, getTrainingStatsTimelineChart(sparkTrainingStats, keySetInclude, maxTimelineSizeMs));
    for (String s : keySet) {
        List<EventStats> list = new ArrayList<>(sparkTrainingStats.getValue(s));
        Collections.sort(list, new StartTimeComparator());
        double[] x = new double[list.size()];
        double[] duration = new double[list.size()];
        double minDur = Double.MAX_VALUE;
        double maxDur = -Double.MAX_VALUE;
        for (int i = 0; i < duration.length; i++) {
            x[i] = i;
            duration[i] = list.get(i).getDurationMs();
            minDur = Math.min(minDur, duration[i]);
            maxDur = Math.max(maxDur, duration[i]);
        }
        Component line = new ChartLine.Builder(s, styleChart).addSeries("Duration", x, duration).setYMin(minDur == maxDur ? minDur - 1 : null).setYMax(minDur == maxDur ? minDur + 1 : null).build();
        //Also build a histogram...
        Component hist = null;
        if (minDur != maxDur && !list.isEmpty())
            hist = getHistogram(duration, 20, s, styleChart);
        Component[] temp;
        if (hist != null) {
            temp = new Component[] { line, hist };
        } else {
            temp = new Component[] { line };
        }
        components.add(new ComponentDiv(new StyleDiv.Builder().width(100, LengthUnit.Percent).build(), temp));
        //TODO this is really ugly
        if (!list.isEmpty() && (list.get(0) instanceof ExampleCountEventStats || list.get(0) instanceof PartitionCountEventStats)) {
            boolean exCount = list.get(0) instanceof ExampleCountEventStats;
            double[] y = new double[list.size()];
            double miny = Double.MAX_VALUE;
            double maxy = -Double.MAX_VALUE;
            for (int i = 0; i < y.length; i++) {
                y[i] = (exCount ? ((ExampleCountEventStats) list.get(i)).getTotalExampleCount() : ((PartitionCountEventStats) list.get(i)).getNumPartitions());
                miny = Math.min(miny, y[i]);
                maxy = Math.max(maxy, y[i]);
            }
            String title = s + " / " + (exCount ? "Number of Examples" : "Number of Partitions");
            Component line2 = new ChartLine.Builder(title, styleChart).addSeries((exCount ? "Examples" : "Partitions"), x, y).setYMin(miny == maxy ? miny - 1 : null).setYMax(miny == maxy ? miny + 1 : null).build();
            //Also build a histogram...
            Component hist2 = null;
            if (miny != maxy)
                hist2 = getHistogram(y, 20, title, styleChart);
            Component[] temp2;
            if (hist2 != null) {
                temp2 = new Component[] { line2, hist2 };
            } else {
                temp2 = new Component[] { line2 };
            }
            components.add(new ComponentDiv(new StyleDiv.Builder().width(100, LengthUnit.Percent).build(), temp2));
        }
    }
    String html = StaticPageUtil.renderHTML(components);
    outputStream.write(html.getBytes("UTF-8"));
}

Example 2 with StyleChart

use of org.deeplearning4j.ui.components.chart.style.StyleChart in project deeplearning4j by deeplearning4j.

the class StatsUtils method getTrainingStatsTimelineChart.

private static Component[] getTrainingStatsTimelineChart(SparkTrainingStats stats, Set<String> includeSet, long maxDurationMs) {
    Set<Tuple3<String, String, Long>> uniqueTuples = new HashSet<>();
    Set<String> machineIDs = new HashSet<>();
    Set<String> jvmIDs = new HashSet<>();
    Map<String, String> machineShortNames = new HashMap<>();
    Map<String, String> jvmShortNames = new HashMap<>();
    long earliestStart = Long.MAX_VALUE;
    long latestEnd = Long.MIN_VALUE;
    for (String s : includeSet) {
        List<EventStats> list = stats.getValue(s);
        for (EventStats e : list) {
            machineIDs.add(e.getMachineID());
            jvmIDs.add(e.getJvmID());
            uniqueTuples.add(new Tuple3<String, String, Long>(e.getMachineID(), e.getJvmID(), e.getThreadID()));
            earliestStart = Math.min(earliestStart, e.getStartTime());
            latestEnd = Math.max(latestEnd, e.getStartTime() + e.getDurationMs());
        }
    }
    int count = 0;
    for (String s : machineIDs) {
        machineShortNames.put(s, "PC " + count++);
    }
    count = 0;
    for (String s : jvmIDs) {
        jvmShortNames.put(s, "JVM " + count++);
    }
    int nLanes = uniqueTuples.size();
    List<Tuple3<String, String, Long>> outputOrder = new ArrayList<>(uniqueTuples);
    Collections.sort(outputOrder, new TupleComparator());
    Color[] colors = getColors(includeSet.size());
    Map<String, Color> colorMap = new HashMap<>();
    count = 0;
    for (String s : includeSet) {
        colorMap.put(s, colors[count++]);
    }
    //Create key for charts:
    List<Component> tempList = new ArrayList<>();
    for (String s : includeSet) {
        String key = stats.getShortNameForKey(s) + " - " + s;
        tempList.add(new ComponentDiv(new StyleDiv.Builder().backgroundColor(colorMap.get(s)).width(33.3, LengthUnit.Percent).height(25, LengthUnit.Px).floatValue(StyleDiv.FloatValue.left).build(), new ComponentText(key, new StyleText.Builder().fontSize(11).build())));
    }
    Component key = new ComponentDiv(new StyleDiv.Builder().width(100, LengthUnit.Percent).build(), tempList);
    //How many charts?
    int nCharts = (int) ((latestEnd - earliestStart) / maxDurationMs);
    if (nCharts < 1)
        nCharts = 1;
    long[] chartStartTimes = new long[nCharts];
    long[] chartEndTimes = new long[nCharts];
    for (int i = 0; i < nCharts; i++) {
        chartStartTimes[i] = earliestStart + i * maxDurationMs;
        chartEndTimes[i] = earliestStart + (i + 1) * maxDurationMs;
    }
    List<List<List<ChartTimeline.TimelineEntry>>> entriesByLane = new ArrayList<>();
    for (int c = 0; c < nCharts; c++) {
        entriesByLane.add(new ArrayList<List<ChartTimeline.TimelineEntry>>());
        for (int i = 0; i < nLanes; i++) {
            entriesByLane.get(c).add(new ArrayList<ChartTimeline.TimelineEntry>());
        }
    }
    for (String s : includeSet) {
        List<EventStats> list = stats.getValue(s);
        for (EventStats e : list) {
            if (e.getDurationMs() == 0)
                continue;
            long start = e.getStartTime();
            long end = start + e.getDurationMs();
            int chartIdx = -1;
            for (int j = 0; j < nCharts; j++) {
                if (start >= chartStartTimes[j] && start < chartEndTimes[j]) {
                    chartIdx = j;
                }
            }
            if (chartIdx == -1)
                chartIdx = nCharts - 1;
            Tuple3<String, String, Long> tuple = new Tuple3<>(e.getMachineID(), e.getJvmID(), e.getThreadID());
            int idx = outputOrder.indexOf(tuple);
            Color c = colorMap.get(s);
            //                ChartTimeline.TimelineEntry entry = new ChartTimeline.TimelineEntry(null, start, end, c);
            ChartTimeline.TimelineEntry entry = new ChartTimeline.TimelineEntry(stats.getShortNameForKey(s), start, end, c);
            entriesByLane.get(chartIdx).get(idx).add(entry);
        }
    }
    //Sort each lane by start time:
    for (int i = 0; i < nCharts; i++) {
        for (List<ChartTimeline.TimelineEntry> l : entriesByLane.get(i)) {
            Collections.sort(l, new Comparator<ChartTimeline.TimelineEntry>() {

                @Override
                public int compare(ChartTimeline.TimelineEntry o1, ChartTimeline.TimelineEntry o2) {
                    return Long.compare(o1.getStartTimeMs(), o2.getStartTimeMs());
                }
            });
        }
    }
    StyleChart sc = new StyleChart.Builder().width(1280, LengthUnit.Px).height(35 * nLanes + (60 + 20 + 25), LengthUnit.Px).margin(LengthUnit.Px, 60, 20, 200, //top, bottom, left, right
    10).build();
    List<Component> list = new ArrayList<>(nCharts);
    for (int j = 0; j < nCharts; j++) {
        ChartTimeline.Builder b = new ChartTimeline.Builder("Timeline: Training Activities", sc);
        int i = 0;
        for (List<ChartTimeline.TimelineEntry> l : entriesByLane.get(j)) {
            Tuple3<String, String, Long> t3 = outputOrder.get(i);
            String name = machineShortNames.get(t3._1()) + ", " + jvmShortNames.get(t3._2()) + ", Thread " + t3._3();
            b.addLane(name, l);
            i++;
        }
        list.add(b.build());
    }
    list.add(key);
    return list.toArray(new Component[list.size()]);
}

Example 3 with StyleChart

use of org.deeplearning4j.ui.components.chart.style.StyleChart in project deeplearning4j by deeplearning4j.

the class TestComponentSerialization method testSerialization.

@Test
public void testSerialization() throws Exception {
    //Common style for all of the charts
    StyleChart s = new StyleChart.Builder().width(640, LengthUnit.Px).height(480, LengthUnit.Px).margin(LengthUnit.Px, 100, 40, 40, 20).strokeWidth(2).pointSize(4).seriesColors(Color.GREEN, Color.MAGENTA).titleStyle(new StyleText.Builder().font("courier").fontSize(16).underline(true).color(Color.GRAY).build()).build();
    assertSerializable(s);
    //Line chart with vertical grid
    Component c1 = new ChartLine.Builder("Line Chart!", s).addSeries("series0", new double[] { 0, 1, 2, 3 }, new double[] { 0, 2, 1, 4 }).addSeries("series1", new double[] { 0, 1, 2, 3 }, new double[] { 0, 1, 0.5, 2.5 }).setGridWidth(1.0, //Vertical grid lines, no horizontal grid
    null).build();
    assertSerializable(c1);
    //Scatter chart
    Component c2 = new ChartScatter.Builder("Scatter!", s).addSeries("series0", new double[] { 0, 1, 2, 3 }, new double[] { 0, 2, 1, 4 }).showLegend(true).setGridWidth(0, 0).build();
    assertSerializable(c2);
    //Histogram with variable sized bins
    Component c3 = new ChartHistogram.Builder("Histogram!", s).addBin(-1, -0.5, 0.2).addBin(-0.5, 0, 0.5).addBin(0, 1, 2.5).addBin(1, 2, 0.5).build();
    assertSerializable(c3);
    //Stacked area chart
    Component c4 = new ChartStackedArea.Builder("Area Chart!", s).setXValues(new double[] { 0, 1, 2, 3, 4, 5 }).addSeries("series0", new double[] { 0, 1, 0, 2, 0, 1 }).addSeries("series1", new double[] { 2, 1, 2, 0.5, 2, 1 }).build();
    assertSerializable(c4);
    //Table
    StyleTable ts = new StyleTable.Builder().backgroundColor(Color.LIGHT_GRAY).headerColor(Color.ORANGE).borderWidth(1).columnWidths(LengthUnit.Percent, 20, 40, 40).width(500, LengthUnit.Px).height(200, LengthUnit.Px).build();
    assertSerializable(ts);
    Component c5 = new ComponentTable.Builder(ts).header("H1", "H2", "H3").content(new String[][] { { "row0col0", "row0col1", "row0col2" }, { "row1col0", "row1col1", "row1col2" } }).build();
    assertSerializable(c5);
    //Accordion decorator, with the same chart
    StyleAccordion ac = new StyleAccordion.Builder().height(480, LengthUnit.Px).width(640, LengthUnit.Px).build();
    assertSerializable(ac);
    Component c6 = new DecoratorAccordion.Builder(ac).title("Accordion - Collapsed By Default!").setDefaultCollapsed(true).addComponents(c5).build();
    assertSerializable(c6);
    //Text with styling
    Component c7 = new ComponentText.Builder("Here's some blue text in a green div!", new StyleText.Builder().font("courier").fontSize(30).underline(true).color(Color.BLUE).build()).build();
    assertSerializable(c7);
    //Div, with a chart inside
    Style divStyle = new StyleDiv.Builder().width(30, LengthUnit.Percent).height(200, LengthUnit.Px).backgroundColor(Color.GREEN).floatValue(StyleDiv.FloatValue.right).build();
    assertSerializable(divStyle);
    Component c8 = new ComponentDiv(divStyle, c7, new ComponentText("(Also: it's float right, 30% width, 200 px high )", null));
    assertSerializable(c8);
    //Timeline chart:
    List<ChartTimeline.TimelineEntry> entries = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        entries.add(new ChartTimeline.TimelineEntry(String.valueOf(i), 10 * i, 10 * i + 5));
    }
    Component c9 = new ChartTimeline.Builder("Title", s).addLane("Lane0", entries).build();
    assertSerializable(c9);
}

Example 4 with StyleChart

use of org.deeplearning4j.ui.components.chart.style.StyleChart in project deeplearning4j by deeplearning4j.

the class TestRendering method test.

@Ignore
@Test
public void test() throws Exception {
    List<Component> list = new ArrayList<>();
    //Common style for all of the charts
    StyleChart s = new StyleChart.Builder().width(640, LengthUnit.Px).height(480, LengthUnit.Px).margin(LengthUnit.Px, 100, 40, 40, 20).strokeWidth(2).pointSize(4).seriesColors(Color.GREEN, Color.MAGENTA).titleStyle(new StyleText.Builder().font("courier").fontSize(16).underline(true).color(Color.GRAY).build()).build();
    //Line chart with vertical grid
    Component c1 = new ChartLine.Builder("Line Chart!", s).addSeries("series0", new double[] { 0, 1, 2, 3 }, new double[] { 0, 2, 1, 4 }).addSeries("series1", new double[] { 0, 1, 2, 3 }, new double[] { 0, 1, 0.5, 2.5 }).setGridWidth(1.0, //Vertical grid lines, no horizontal grid
    null).build();
    list.add(c1);
    //Scatter chart
    Component c2 = new ChartScatter.Builder("Scatter!", s).addSeries("series0", new double[] { 0, 1, 2, 3 }, new double[] { 0, 2, 1, 4 }).showLegend(true).setGridWidth(0, 0).build();
    list.add(c2);
    //Histogram with variable sized bins
    Component c3 = new ChartHistogram.Builder("Histogram!", s).addBin(-1, -0.5, 0.2).addBin(-0.5, 0, 0.5).addBin(0, 1, 2.5).addBin(1, 2, 0.5).build();
    list.add(c3);
    //Stacked area chart
    Component c4 = new ChartStackedArea.Builder("Area Chart!", s).setXValues(new double[] { 0, 1, 2, 3, 4, 5 }).addSeries("series0", new double[] { 0, 1, 0, 2, 0, 1 }).addSeries("series1", new double[] { 2, 1, 2, 0.5, 2, 1 }).build();
    list.add(c4);
    //Table
    StyleTable ts = new StyleTable.Builder().backgroundColor(Color.LIGHT_GRAY).headerColor(Color.ORANGE).borderWidth(1).columnWidths(LengthUnit.Percent, 20, 40, 40).width(500, LengthUnit.Px).height(200, LengthUnit.Px).build();
    Component c5 = new ComponentTable.Builder(ts).header("H1", "H2", "H3").content(new String[][] { { "row0col0", "row0col1", "row0col2" }, { "row1col0", "row1col1", "row1col2" } }).build();
    list.add(c5);
    //Accordion decorator, with the same chart
    StyleAccordion ac = new StyleAccordion.Builder().height(480, LengthUnit.Px).width(640, LengthUnit.Px).build();
    Component c6 = new DecoratorAccordion.Builder(ac).title("Accordion - Collapsed By Default!").setDefaultCollapsed(true).addComponents(c5).build();
    list.add(c6);
    //Text with styling
    Component c7 = new ComponentText.Builder("Here's some blue text in a green div!", new StyleText.Builder().font("courier").fontSize(30).underline(true).color(Color.BLUE).build()).build();
    //Div, with a chart inside
    Style divStyle = new StyleDiv.Builder().width(30, LengthUnit.Percent).height(200, LengthUnit.Px).backgroundColor(Color.GREEN).floatValue(StyleDiv.FloatValue.right).build();
    Component c8 = new ComponentDiv(divStyle, c7, new ComponentText("(Also: it's float right, 30% width, 200 px high )", null));
    list.add(c8);
    //Timeline chart:
    List<ChartTimeline.TimelineEntry> entries = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        entries.add(new ChartTimeline.TimelineEntry("e0-" + i, 10 * i, 10 * i + 5, Color.BLUE));
    }
    List<ChartTimeline.TimelineEntry> entries2 = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        entries2.add(new ChartTimeline.TimelineEntry("e1-" + i, (int) (5 * i + 0.2 * i * i), (int) (5 * i + 0.2 * i * i) + 3, Color.ORANGE));
    }
    List<ChartTimeline.TimelineEntry> entries3 = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        entries3.add(new ChartTimeline.TimelineEntry("e2-" + i, (int) (2 * i + 0.6 * i * i + 3), (int) (2 * i + 0.6 * i * i + 3) + 2 * i + 1));
    }
    Color[] c = new Color[] { Color.CYAN, Color.YELLOW, Color.GREEN, Color.PINK };
    List<ChartTimeline.TimelineEntry> entries4 = new ArrayList<>();
    Random r = new Random(12345);
    for (int i = 0; i < 10; i++) {
        entries4.add(new ChartTimeline.TimelineEntry("e3-" + i, (int) (2 * i + 0.6 * i * i + 3), (int) (2 * i + 0.6 * i * i + 3) + i + 1, c[r.nextInt(c.length)]));
    }
    Component c9 = new ChartTimeline.Builder("Title", s).addLane("Lane 0", entries).addLane("Lane 1", entries2).addLane("Lane 2", entries3).addLane("Lane 3", entries4).build();
    list.add(c9);
    //Generate HTML
    StringBuilder sb = new StringBuilder();
    sb.append("<!DOCTYPE html>\n" + "<html lang=\"en\">\n" + "<head>\n" + "    <meta charset=\"UTF-8\">\n" + "    <title>Title</title>\n" + "</head>\n" + "<body>\n" + "\n" + "    <div id=\"maindiv\">\n" + "\n" + "    </div>\n" + "\n" + "\n" + "    <script src=\"//code.jquery.com/jquery-1.10.2.js\"></script>\n" + "    <script src=\"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js\"></script>\n" + "    <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css\">\n" + "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\"></script>\n" + "    <script src=\"src/main/resources/assets/dl4j-ui.js\"></script>\n" + "\n" + "    <script>\n");
    ObjectMapper om = new ObjectMapper();
    for (int i = 0; i < list.size(); i++) {
        Component component = list.get(i);
        sb.append("        ").append("var str").append(i).append(" = '").append(om.writeValueAsString(component).replaceAll("'", "\\\\'")).append("';\n");
        sb.append("        ").append("var obj").append(i).append(" = Component.getComponent(str").append(i).append(");\n");
        sb.append("        ").append("obj").append(i).append(".render($('#maindiv'));\n");
        sb.append("\n\n");
    }
    sb.append("    </script>\n" + "\n" + "</body>\n" + "</html>");
    FileUtils.writeStringToFile(new File("TestRendering.html"), sb.toString());
}