json – DECODE https://decode.red/blog data decode, decoder or decoded ... design of code Mon, 15 Dec 2025 06:15:00 +0000 ja hourly 1 https://wordpress.org/?v=4.7.29 JSON Database, lowdb ../../../202412081844/ Sat, 07 Dec 2024 23:30:23 +0000 ../../../?p=1844 SQLiteのような、ファイルのDBでJSON対応のものはないかと探していたらlowdbを見つけました。

https://github.com/typicode/lowdb

インストール

npm i lowdb

samp1.ts

import {JSONFilePreset} from 'lowdb/node'

async function main(){

    const db = await JSONFilePreset('db.json', { posts: [] })
    for(let i = 0; i < 3; i++ ){
        const post = { id: i, title: 'title ' + String(i), views: 300 - i * 100 }
        db.data.posts.push(post)
    }
    
    await db.write()

    const {posts} = db.data
   
    console.log(posts.at(0))
    console.log(posts.filter((post) => post.title.includes('title 1')))
    console.log(posts.find((post) => post.id == 2))
    console.log(posts.toSorted((a, b) => a.views - b.views))

    db.update(({posts})=>{
       posts[1]['views'] = 500 
    })

}

main()

実行結果


JSONファイルを作成して、検索やソート、更新をするサンプルです。
メモでした。

]]> Geo JSON ../../../20160503571/ Tue, 03 May 2016 05:47:23 +0000 ../../../?p=571 D3.jsが地形データを扱うときにとても便利なので、メモしておききたいと思います。

参考:
D3.jsとOpen Data〜その１地図を描画する
http://qiita.com/sawamur@github/items/ec32237bcbaaba94108d

環境: Mac OSX 10.10.5
使用データ:国土数値情報(愛知県平成27年)
http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html

上記サイトからダウンロードしたファイルをGeoJSONに変換

brew install gdal
ogr2ogr -f GeoJSON aichi.json N03-15_23_150101.shp

同じフォルダに下記プログラムをmap.htmlで保存してブラウザで起動

<html><body>
<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
(function() {
    var g, width = 700, height = 450;

    map = d3.select('#map').append('svg')
                           .attr('width', width)
                           .attr('height', height)
                           .append('g');

    d3.json("aichi.json", function(json) {
        var projection, path;

        projection = d3.geo.mercator()
                           .scale(20000)
                           .center(d3.geo.centroid(json))
                           .translate([width/2,height/2]);

        path = d3.geo.path().projection(projection);
        map.selectAll('path')
           .data(json.features)
           .enter()
           .append('path')
           .attr('d', path)
           .attr("fill", function(d){
               console.log(d.properties);

               if(d.properties.N03_004 == '東海市'){
                   return "rgb(255,0,0)";
               }
                return "hsl(0,0%,80%)";
            })
           .attr("stroke","hsl(80,100%,0%)" )
           .on('mouseover', function(d){
                console.log(d.properties.N03_004);
                d3.select(this).attr("fill", "rgb(0,255,0)");
            })
            .on('mouseout', function(d){
                d3.select(this).attr("fill","hsl(0,0%,80%)");
            })
            .on('click', function(d) {
                d3.select(this).attr("fill","rgb(255,0,0)");
            });
    });
})();
</script>
</body></html>

出力結果
geojson01
マウスオーバで、緑色になります。

またjqという便利なJSONデータのクエリーツールを使って特定の地域だけのデータを切り出してみました。

brew install jq
cat aichi.json | jq ‘.features[] | select(.properties.N03_004 == “東海市”)’ > t.json
cat head t.json tail > tokai.json

cat head
{
“type”: “FeatureCollection”,
“features”: [

cat tail
]}

このとき、読むこむjsonをtokai.jsonに変更します。

geojson02

以下のようにして地域を一覧表示できます。

cat aichi.json | jq ‘.features[].properties.N03_004’

リンク:
以前のD3.js関連の記事: http://crossframe.iiv.jp/tag/d3-js/
パイブとJSONについての記事:http://crossframe.iiv.jp/20140506742/

]]>