ja1200/stat/elgraph.html

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<script>
  var htmlns = 'http://www.w3.org/1999/xhtml';
  var svgns = 'http://www.w3.org/2000/svg';
  var param = {
    barAreaLeft: 12 * 10,
    barAreaWidth: 500,
    barTop: 5,
    barHeight: 12 / 2,
    barSpacing: 12,
    barColor: ['blue', 'orange', 'green'],
    labelRight: 12 * 9,
    labelFontSize: 12,
    valueSpacing: 12,
    valueFontSize: 12,
  };
  function showgraph (uri, num) {
    var req = new XMLHttpRequest ();
    req.open ('GET', uri, false);
    req.send (null);
    if (req.status < 300) {
      var obj = eval (req.responseText);
      drawGraph ([obj[0].start_tag], num, document.getElementById ('starttags'));
 
      var attrSection = document.getElementById ('attributes');
      var attr = obj[0].attr;
      for (var tagName in attr) {
        attrSection.appendChild (document.createElementNS (htmlns, 'h3'))
            .textContent = tagName;
        var el = {};
        el[tagName] = obj[0].start_tag[tagName];
        drawGraph ([el, attr[tagName]], num, attrSection);
      }

      var valueSection = document.getElementById ('values');
      var value = obj[0].value;
      var value2 = obj[0].value2;
      for (var tagName in value) {
        for (var attrName in value[tagName]) {
          valueSection.appendChild (document.createElementNS (htmlns, 'h3'))
              .textContent = tagName + ' ' + attrName;
          var el = {};
          el[tagName] = obj[0].start_tag[tagName];
          var attr = {};
          attr[attrName] = obj[0].attr[tagName] ? obj[0].attr[tagName][attrName] : 0;
          drawGraph ([el, attr, value[tagName][attrName]], num, valueSection);

          if (value2[tagName] && value2[tagName][attrName]) {
            valueSection.appendChild (document.createElementNS (htmlns, 'h3'))
                .textContent = tagName + ' ' + attrName + ' (case-insensitive)';
            drawGraph ([el, attr, value2[tagName][attrName]], num, valueSection);
          }
        }
      }
    }
  }

  function drawGraph (dataSource, maxValue, graphContainer) {
    var rareData = [];
    var graphData = [];
    var boundaryValue = maxValue / 10;

    for (var j = 0; j < dataSource.length; j++) {
      rareData[j] = [];
      graphData[j] = [];

      for (var labelText in dataSource[j]) {
        var value = dataSource[j][labelText];
        if (value < boundaryValue) {
          if (!rareData[j][value]) rareData[j][value] = [];
          rareData[j][value].push (labelText);
        } else {
          graphData[j].push ([labelText, value / maxValue, value]);
        }
      }
      graphData[j] = graphData[j].sort (function (a, b) { return b[2] - a[2] });
    }

    var graphCanvas = document.createElementNS (svgns, 'svg');
    graphCanvas.setAttributeNS ('http://www.w3.org/2000/xmlns/', 'xmlns', svgns);
    var y = param.barTop + param.barSpacing / 2;
    for (var j = 0; j < dataSource.length; j++) {
      for (var i = 0; i < graphData[j].length; i++) {
        var item = graphData[j][i];
  
        var g = document.createElementNS (svgns, 'g');

        var text = document.createElementNS (svgns, 'text');
        text.textContent = item[0];
        text.setAttributeNS (null, 'x', param.labelRight);
        text.setAttributeNS (null, 'y', y + param.barHeight);
        text.setAttributeNS (null, 'text-anchor', 'end');
        text.setAttributeNS (null, 'font-size', param.labelFontSize);
        g.appendChild (text);

        var barWidth = item[1] * param.barAreaWidth;
        var rect = document.createElementNS (svgns, 'rect');
        rect.setAttributeNS (null, 'x', param.barAreaLeft);
        rect.setAttributeNS (null, 'y', y);
        rect.setAttributeNS (null, 'width', barWidth);
        rect.setAttributeNS (null, 'height', param.barHeight);
        rect.setAttributeNS (null, 'fill', param.barColor[j]);
        g.appendChild (rect);

        var value = document.createElementNS (svgns, 'text');
        value.textContent = '(' + item[2] + ' = ' + Math.floor (item[1] * 100) + '%)';
        value.setAttributeNS (null, 'x', param.barAreaLeft + barWidth + param.valueSpacing);
        value.setAttributeNS (null, 'y', y + param.barHeight);
        value.setAttributeNS (null, 'text-anchor', 'start');
        value.setAttributeNS (null, 'font-size', param.valueFontSize);
        g.appendChild (value);

        graphCanvas.appendChild (g);

        y += param.barHeight + param.barSpacing;
      }
    }

    var graphWidth = param.barAreaLeft + param.barAreaWidth + param.valueSpacing + param.valueFontSize * 5;
    graphCanvas.setAttributeNS (null, 'viewBox', '0 0 ' + graphWidth + ' ' + y);
    graphCanvas.setAttributeNS (null, 'width', graphWidth);
    graphCanvas.setAttributeNS (null, 'height', y);
    graphContainer.appendChild (graphCanvas);

    for (var j = 0; j < dataSource.length; j++) {
      var rareList = document.createElementNS (htmlns, 'ul');
      var rareDataIndex = [];
      for (var i in rareData[j]) {
        rareDataIndex.push (i);
      }
      rareDataIndex = rareDataIndex.sort (function (a, b) { return b - a });
      for (var i = 0; i < rareDataIndex.length; i++) {
        var n = rareDataIndex[i];
        rareList.appendChild (document.createElementNS (htmlns, 'li'))
            .textContent = n + ': ' + rareData[j][n].join (', ');
      }
      graphContainer.appendChild (rareList);
    }
  } // drawGraph
</script>

<form>
<p><label>URI: <input name="sourceuri" type="text" value="htmlel5.json"></label></p>
<p><label># of samples: <input name="samplenumber" type="number" value="1188"></label></p>

<p><input type="button" value="draw"
    onclick="showgraph (sourceuri.value, parseInt (samplenumber.value))"></p>
</form>

<div id="starttags">
<h2>Start tags</h2>
</div>

<div id="attributes">
<h2>Attributes</h2>
</div>

<div id="values">
<h2>Attribute values</h2>
</div>

</body>
</html>
1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<title></title>
5	</head>
6	<body>
7	<script>
8	var htmlns = 'http://www.w3.org/1999/xhtml';
9	var svgns = 'http://www.w3.org/2000/svg';
10	var param = {
11	barAreaLeft: 12 * 10,
12	barAreaWidth: 500,
13	barTop: 5,
14	barHeight: 12 / 2,
15	barSpacing: 12,
16	barColor: ['blue', 'orange', 'green'],
17	labelRight: 12 * 9,
18	labelFontSize: 12,
19	valueSpacing: 12,
20	valueFontSize: 12,
21	};
22	function showgraph (uri, num) {
23	var req = new XMLHttpRequest ();
24	req.open ('GET', uri, false);
25	req.send (null);
26	if (req.status < 300) {
27	var obj = eval (req.responseText);
28	drawGraph ([obj[0].start_tag], num, document.getElementById ('starttags'));
29
30	var attrSection = document.getElementById ('attributes');
31	var attr = obj[0].attr;
32	for (var tagName in attr) {
33	attrSection.appendChild (document.createElementNS (htmlns, 'h3'))
34	.textContent = tagName;
35	var el = {};
36	el[tagName] = obj[0].start_tag[tagName];
37	drawGraph ([el, attr[tagName]], num, attrSection);
38	}
39
40	var valueSection = document.getElementById ('values');
41	var value = obj[0].value;
42	var value2 = obj[0].value2;
43	for (var tagName in value) {
44	for (var attrName in value[tagName]) {
45	valueSection.appendChild (document.createElementNS (htmlns, 'h3'))
46	.textContent = tagName + ' ' + attrName;
47	var el = {};
48	el[tagName] = obj[0].start_tag[tagName];
49	var attr = {};
50	attr[attrName] = obj[0].attr[tagName] ? obj[0].attr[tagName][attrName] : 0;
51	drawGraph ([el, attr, value[tagName][attrName]], num, valueSection);
52
53	if (value2[tagName] && value2[tagName][attrName]) {
54	valueSection.appendChild (document.createElementNS (htmlns, 'h3'))
55	.textContent = tagName + ' ' + attrName + ' (case-insensitive)';
56	drawGraph ([el, attr, value2[tagName][attrName]], num, valueSection);
57	}
58	}
59	}
60	}
61	}
62
63	function drawGraph (dataSource, maxValue, graphContainer) {
64	var rareData = [];
65	var graphData = [];
66	var boundaryValue = maxValue / 10;
67
68	for (var j = 0; j < dataSource.length; j++) {
69	rareData[j] = [];
70	graphData[j] = [];
71
72	for (var labelText in dataSource[j]) {
73	var value = dataSource[j][labelText];
74	if (value < boundaryValue) {
75	if (!rareData[j][value]) rareData[j][value] = [];
76	rareData[j][value].push (labelText);
77	} else {
78	graphData[j].push ([labelText, value / maxValue, value]);
79	}
80	}
81	graphData[j] = graphData[j].sort (function (a, b) { return b[2] - a[2] });
82	}
83
84	var graphCanvas = document.createElementNS (svgns, 'svg');
85	graphCanvas.setAttributeNS ('http://www.w3.org/2000/xmlns/', 'xmlns', svgns);
86	var y = param.barTop + param.barSpacing / 2;
87	for (var j = 0; j < dataSource.length; j++) {
88	for (var i = 0; i < graphData[j].length; i++) {
89	var item = graphData[j][i];
90
91	var g = document.createElementNS (svgns, 'g');
92
93	var text = document.createElementNS (svgns, 'text');
94	text.textContent = item[0];
95	text.setAttributeNS (null, 'x', param.labelRight);
96	text.setAttributeNS (null, 'y', y + param.barHeight);
97	text.setAttributeNS (null, 'text-anchor', 'end');
98	text.setAttributeNS (null, 'font-size', param.labelFontSize);
99	g.appendChild (text);
100
101	var barWidth = item[1] * param.barAreaWidth;
102	var rect = document.createElementNS (svgns, 'rect');
103	rect.setAttributeNS (null, 'x', param.barAreaLeft);
104	rect.setAttributeNS (null, 'y', y);
105	rect.setAttributeNS (null, 'width', barWidth);
106	rect.setAttributeNS (null, 'height', param.barHeight);
107	rect.setAttributeNS (null, 'fill', param.barColor[j]);
108	g.appendChild (rect);
109
110	var value = document.createElementNS (svgns, 'text');
111	value.textContent = '(' + item[2] + ' = ' + Math.floor (item[1] * 100) + '%)';
112	value.setAttributeNS (null, 'x', param.barAreaLeft + barWidth + param.valueSpacing);
113	value.setAttributeNS (null, 'y', y + param.barHeight);
114	value.setAttributeNS (null, 'text-anchor', 'start');
115	value.setAttributeNS (null, 'font-size', param.valueFontSize);
116	g.appendChild (value);
117
118	graphCanvas.appendChild (g);
119
120	y += param.barHeight + param.barSpacing;
121	}
122	}
123
124	var graphWidth = param.barAreaLeft + param.barAreaWidth + param.valueSpacing + param.valueFontSize * 5;
125	graphCanvas.setAttributeNS (null, 'viewBox', '0 0 ' + graphWidth + ' ' + y);
126	graphCanvas.setAttributeNS (null, 'width', graphWidth);
127	graphCanvas.setAttributeNS (null, 'height', y);
128	graphContainer.appendChild (graphCanvas);
129
130	for (var j = 0; j < dataSource.length; j++) {
131	var rareList = document.createElementNS (htmlns, 'ul');
132	var rareDataIndex = [];
133	for (var i in rareData[j]) {
134	rareDataIndex.push (i);
135	}
136	rareDataIndex = rareDataIndex.sort (function (a, b) { return b - a });
137	for (var i = 0; i < rareDataIndex.length; i++) {
138	var n = rareDataIndex[i];
139	rareList.appendChild (document.createElementNS (htmlns, 'li'))
140	.textContent = n + ': ' + rareData[j][n].join (', ');
141	}
142	graphContainer.appendChild (rareList);
143	}
144	} // drawGraph
145	</script>
146
147	<form>
148	<p><label>URI: <input name="sourceuri" type="text" value="htmlel5.json"></label></p>
149	<p><label># of samples: <input name="samplenumber" type="number" value="1188"></label></p>
150
151	<p><input type="button" value="draw"
152	onclick="showgraph (sourceuri.value, parseInt (samplenumber.value))"></p>
153	</form>
154
155	<div id="starttags">
156	<h2>Start tags</h2>
157	</div>
158
159	<div id="attributes">
160	<h2>Attributes</h2>
161	</div>
162
163	<div id="values">
164	<h2>Attribute values</h2>
165	</div>
166
167	</body>
168	</html>