dak ブログ

python、rubyなどのプログラミング、MySQL、サーバーの設定などの備忘録。レゴの写真も。

d3.js で折れ線グラフを描画

2022-01-27 20:45:17 | javascript
d3.js で折れ線グラフを描画する方法のメモ。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;utf-8">
<title>graph</title>
</head>
<body>
<div id="graph"></div>
<script type="text/javascript" src="../d3.min.js"></script>
<script type="text/javascript">
const org_dataset = [
    ['01/01', 4],
    ['01/02', 5],
    ['01/03', 8],
    ['01/04', 10],
    ['01/05', 9],
    ['01/06', 12],
    ['01/07', 8],
    ['01/08', 7],
    ['01/09', 6],
    ['01/10', 8],
  ];

const dataset = [];
for (let i = 0; i < org_dataset.length; i++) {
  let d = org_dataset[i];
  dataset.push({date: d[0], x: i, y: d[1]});
}

const width = 600;
const height = 400;
const margin = { "top": 40, "bottom": 40, "right": 40, "left": 40 };
 
const svg =
	d3.select("body")
	.append("svg")
	.attr("width", margin.left+width+margin.right)
	.attr("height", margin.top+height+margin.bottom)
;

var xScale =
        d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d.x; })])
	.range([margin.left, margin.left+width])
;

var yScale =
        d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d.y; })])
        .range([margin.top+height, margin.top])
;

var xAxis =
        d3.axisBottom(xScale)
        .ticks(5)
        .tickFormat((d) => { return dataset[d].date; })
;

var yAxis =
        d3.axisLeft(yScale)
        .ticks(5);
 
svg.append("g")
    .attr("transform",
          "translate(" +
          [0, margin.top+height].join(",")
          + ")")
    .call(xAxis)
    .append("text")
    .attr("fill", "black")
    .attr("x", (margin.left+width+margin.right)/2)
    .attr("y", margin.bottom/2)
    .attr("text-anchor", "middle")
    .attr("font-size", "10pt")
    .text("日付");
 
svg.append("g")
    .attr("transform",
          "translate(" +
          [margin.left, 0].join(",")
          + ")")
    .call(yAxis)
    .append("text")
    .attr("fill", "black")
    .attr("text-anchor", "middle")
    .attr("x", -(height+margin.top+margin.bottom)/2)
    .attr("y", -margin.left/2)
    .attr("transform", "rotate(-90)")
    .attr("font-size", "10pt")
    .text("値");
 
svg.append("path")
	.datum(dataset)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 1.5)
	.attr("d", d3.line()
		.x(function(d) { return xScale(d.x); })
		.y(function(d) { return yScale(d.y); })
	);
</script>
</body>
</html>


 
 
 
 

d3.js で折れ線グラフを描画

2022-01-27 20:35:28 | javascript
d3.js で折れ線グラフを描画する方法のメモ。
<html>
<head>

<title>graph</title>
</head>
<body>


<script type="text/javascript" src="../d3.min.js"></script>
<script type="text/javascript">
const org_dataset = [
    ['01/01', 4],
    ['01/02', 5],
    ['01/03', 8],
    ['01/04', 10],
    ['01/05', 9],
    ['01/06', 12],
    ['01/07', 8],
    ['01/08', 7],
    ['01/09', 6],
    ['01/10', 8],
  ];

const dataset = [];
for (let i = 0; i < org_dataset.length; i++) {
  let d = org_dataset[i];
  dataset.push({date: d[0], x: i, y: d[1]});
}

const width = 600;
const height = 400;
const margin = { "top": 40, "bottom": 40, "right": 40, "left": 40 };
 
const svg =
	d3.select("body")
	.append("svg")
	.attr("width", margin.left+width+margin.right)
	.attr("height", margin.top+height+margin.bottom)
;

var xScale =
        d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d) { return d.x; })])
	.range([margin.left, margin.left+width])
;

var yScale =
        d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d.y; })])
        .range([margin.top+height, margin.top])
;

var xAxis =
        d3.axisBottom(xScale)
        .ticks(5)
        .tickFormat((d) => { return dataset[d].date; })
;

var yAxis =
        d3.axisLeft(yScale)
        .ticks(5);
 
svg.append("g")
    .attr("transform",
          "translate(" +
          [0, margin.top+height].join(",")
          + ")")
    .call(xAxis)
    .append("text")
    .attr("fill", "black")
    .attr("x", (margin.left+width+margin.right)/2)
    .attr("y", margin.bottom/2)
    .attr("text-anchor", "middle")
    .attr("font-size", "10pt")
    .text("日付");
 
svg.append("g")
    .attr("transform",
          "translate(" +
          [margin.left, 0].join(",")
          + ")")
    .call(yAxis)
    .append("text")
    .attr("fill", "black")
    .attr("text-anchor", "middle")
    .attr("x", -(height+margin.top+margin.bottom)/2)
    .attr("y", -margin.left/2)
    .attr("transform", "rotate(-90)")
    .attr("font-size", "10pt")
    .text("値");
 
svg.append("path")
	.datum(dataset)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 1.5)
	.attr("d", d3.line()
		.x(function(d) { return xScale(d.x); })
		.y(function(d) { return yScale(d.y); })
	);
</script>

</body>
</html>


 
 
 
 

Typescript で pdf ファイルのテキストを抽出

2022-01-20 23:30:02 | Node.js
Typescript で pdf ファイルのテキストを抽出する方法のメモ。
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf';

function main() {
  const pdf_file: string = process.argv[2];

  pdfjs.getDocument(pdf_file).promise.then((pdf: pdfjs.PDFDocumentProxy) => {
    console.log('pages: ' + pdf.numPages);

    for (let p = 1; p <= pdf.numPages; p++) {
      pdf.getPage(p).then((page) => {
        page.getTextContent().then((text_content) => {
          for (let i = 0; i < text_content.items.length; i++) {
            let item: any = text_content.items[i];
            let str = item.str;
            str = str.replace(/[\r\n]+/g, '');
            if (str.match(/^\s*$/)) continue;
            console.log(item.str);
          }
        });
      });
    }
  });
}

main();


 
 
 
 

Typescript で pdf ファイルのページ数を取得

2022-01-16 23:23:19 | Node.js
Typescript で pdf.js で pdf ファイルのページ数を取得する方法のメモ。
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf';

function main() {
  const pdf_file = process.argv[2];

  pdfjs.getDocument(pdf_file).promise.then((pdf: pdfjs.PDFDocumentProxy) => {
    console.log('pages: ' + pdf.numPages);
  });
}

main();

ts-node での実行例
ts-node {プログラム.ts} {pdfファイル.pdf}


 
 
 
 

Typescript で MeCab で形態素解析

2022-01-13 21:04:58 | Node.js
Typescript で MeCab で形態素解析する方法のメモ。
TypeScript で MeCab を実行するのに mecab-client を使用します。

■MeCab のインストール
yum install mecab mecab-ipadic

■mecab-client のインストール
npm install mecab-client

■mecab-client を利用したサンプルプログラム
import { MeCab } from 'mecab-client';

async function main() {
  const tknzr = new MeCab();
  const str = '私は人間です。';

  const tkns = await tknzr.parse(str);
  for (let tkn of tkns) {
    console.log(tkn);
  }
}

main();

■実行結果
解析結果は token のリストで返却されます。
{ surface: '私',
  lexical: '名詞',
  compound1: '代名詞',
  compound2: '一般',
  compound3: '*',
  conjugation: '*',
  inflection: '*',
  original: '私',
  reading: 'ワタシ',
  pronunciation: 'ワタシ' }
{ surface: 'は',
  lexical: '助詞',
  compound1: '係助詞',
  compound2: '*',
  compound3: '*',
  conjugation: '*',
  inflection: '*',
  original: 'は',
  reading: 'ハ',
  pronunciation: 'ワ' }
{ surface: '人間',
  lexical: '名詞',
  compound1: '一般',
  compound2: '*',
  compound3: '*',
  conjugation: '*',
  inflection: '*',
  original: '人間',
  reading: 'ニンゲン',
  pronunciation: 'ニンゲン' }
{ surface: 'です',
  lexical: '助動詞',
  compound1: '*',
  compound2: '*',
  compound3: '*',
  conjugation: '特殊・デス',
  inflection: '基本形',
  original: 'です',
  reading: 'デス',
  pronunciation: 'デス' }
{ surface: '。',
  lexical: '記号',
  compound1: '句点',
  compound2: '*',
  compound3: '*',
  conjugation: '*',
  inflection: '*',
  original: '。',
  reading: '。',
  pronunciation: '。' }


 
 
 
 

d3.js の散布図でのクリックイベントの設定方法

2022-01-04 21:08:42 | javascript
d3.js の散布図でクリックイベントを設定する方法のメモ。

「d3.js の散布図でマウスオーバーでメッセージを表示」の例で、以下のように .on("click", function (e) {}) を指定するとクリックイベントを処理することができます。
svg.append("g")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) { return xScale(d[0]); })
.attr("cy", function (d) { return yScale(d[1]); })
.attr("r", 10)
.attr("fill", function (d) {
   return "rgba(0, 0, " + Math.round(colorScale(d[2])) + ", 0.8)";
})
.on("mouseover", function (e) {
    const d = e.target.__data__;
    console.log(e);
    tooltip
    .style("left", e.x + 30 + 'px')
    .style("top", e.y + 'px')
    .html(
        "id: " + d[3] + ""
        + "[" + d[0] + ", " + d[1] + "]" + ""
        + "value: " + d[2]
    )
    .style("opacity", 1)
    ;
})
.on("mouseout", function (e) {
    tooltip
    .style("opacity", 0)
    ;
})
.on("click", function (e) {
    const d = e.target.__data__;
    console.log(e);
})
;


 
 
 
 

wget でのタイムアウト指定

2022-01-04 20:37:25 | linux
wget でタイムアウトを指定する方法のメモ。

wget でタイムアウトさせるには、--timeout {秒数} オプションを指定します。
デフォルトでは、タイムアウトするとリトライするため、リトライさせないようにするには、
初回アクセスを含む最大試行回数を -t オプションで指定します。
wget --timeout 3 -t 1 https://www.goo.ne.jp/

上記のコマンドの例では、3秒でタイムアウトするとリトライせずに終了します。

 
 
 
 

flask でのパラメータの取得方法

2022-01-04 20:33:40 | python
flask でパラメータを取得する方法のメモ。

POST パラメータを取得する場合は、request.form.get(パラメータ名) で参照します。
@app.route(..., methods=["POST"])
def view():
  val = request.form.get('var')

ファイルを受信する場合は、request.files.get(ファイル名) で参照します。
@app.route(..., methods=["POST"])
def view():
  bytes = request.form.files.get(ファイル名).stream.read()

ファイルを送信するための form は以下のように記述します。
<form name="upload_form" method="post" action="upload" enctype="multipart/form-data">
<input type="file" name="upload_file"><br>
<input type="button" value="アップロード" onclick="upload_form.submit();">
</form>


GET パラメータを取得する場合は、request.args.get(パラメータ名) で参照します。
@app.route(...):
def view():
  val = request.args.get('var')



 
 
 
 

実行中の script タグの要素を取得する方法

2022-01-01 23:23:58 | javascript
実行中の script タグの要素を取得する方法のメモ。

実行中の script タグの要素は document.currentScript で取得できます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>script</title>
</head>
<body>
<div>123</div>
<script type="text/javascript">
var e = document.currentScript;
var c = document.createElement('div')
c.innerText = 'def';
e.parentNode.append(c);
</script>

456

</body>
</html>



 
 
 
 

カテゴリー

カレンダー

2022年1月
日 月 火 水 木 金 土
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
  • RSS2.0