Source Code Phone Labels China

Dari Universitas Bhayangkara

Nama : Achmad Ifandi Yazid

Gis dengan D3js

1. Source code teta tentang pencarian data phone dari China

    Yang pertama Index html dan tampilan

2. Data selanjutnya adalah main progamnya yang terdapat input Json   

   var width  = 1024;

var height = 768;

var svg = d3.select("#china-map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,0)");

var projection = d3.geo.mercator()
    .center([107, 31])
    .scale(700)
    .translate([width/2, height/2]);

var path = d3.geo.path()
    .projection(projection);

d3.json("china_map.json", function(error, root) {
  if (error) return console.error(error);

  var tooltip = d3.select("body")
    .append("div")
    .attr("class","tooltip")
    .style("opacity", 0);

  svg.selectAll("path")
    .data(root.features)
    .enter()
    .append("path")
    .attr("stroke","#000")
    .attr("stroke-width",1)
    .attr("fill", function(d,i){
      return "gray";
    })
    .attr("d", path )
    .on("mouseover",function(d,i){
      d3.select(this).attr("fill","#E9A825");
      tooltip.transition()
        .duration(200)
        .style("opacity", .9);

      tooltip.html(d.properties.name)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout",function(d,i){
      d3.select(this).attr("fill","gray");
      tooltip.transition()
             .duration(500)
             .style("opacity", 0);
    });


d3.json("data.json", function(events1){
  console.log(events1)
svg.selectAll(".city-label")
    .data(events1)
    .enter().append("text")
    .attr("class","city-label")
    .attr("x",function (d) {
  
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[0];
})

  .attr("y",function(d){
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[1];
})

  .text(function(d){
  console.log(d)

})

svg.selectAll("city-circle")
  .data(events1)
  .enter().append("circle")
  .attr("r",2)
  .attr("cx",function (d) {
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[0];
})

  .attr("cy",function(d){
  var kordinat = projection ([d.longitude, d.latitude])
  console.log(kordinat)
  return kordinat[1];
})

  .on("mouseover", function(d) {    
            div.transition()    
                .duration(200)    
                .style("opacity", .9);    
            div .html(d.device_model) 
                .style("left", (d3.event.pageX) + "px")   
                .style("top", (d3.event.pageY - 28) + "px");  
            })          
        .on("mouseout", function(d) {   
            div.transition()    
                .duration(500)    
                .style("opacity", 0); 
        });


  });

});    

ink untuk Json bisa di lihat di sene
https://www.kaggle.com/beyondbeneath/geolocation-visualisations/data

  

web gl globe

Mengenal WebGL

Dari Universitas Bhayangkara

WebGL adalah teknologi web yang menyuguhkan akselerasi grafis 3D ke dalam browser tanpa memasang perangkat lunak tambahan. WebGL merupakkan kependekan dari Web Graphics Library. Untuk API, WebGL biasanya dipanggil melalui API Javascript dan penggunaannya selalu melibatkan elemen HTML5 <


WebGL biasanya digunakan untuk desain web dan game 3D yang berbasis web. WebGL juga juga digunakan oleh beberapa peneliti untuk tujuan sains. Sebagai contoh, dalam buku yang berjudul "Cellular Automata", peneliti menggunakan WebGL untuk mensimulasikan alur Debris. Sedangkan pada paper "Visualization of molecular structures using state-of-the-art techniques in WebGL", peneliti mensimulasikan molekul didalamnya. NASA juga membangun aplikasi web yang interaktif yang disebut Experience Curiosity untuk merayakan ulang tahun ketiga dimana Curiosity Rover mendarat di Mars.


WebGL (Web Graphics Library) adalah JavaScript API untuk rendering grafis 3D interaktif dan grafis 2D dalam browser web yang kompatibel tanpa menggunakan plug-in. WebGL terintegrasi sepenuhnya ke semua standar web browser yang memungkinkan penggunaan percepatan GPU fisika dan pengolahan gambar dan efek sebagai bagian dari kanvas halaman web. Elemen WebGL dapat dicampur dengan elemen HTML lainnya dan composited dengan bagian-bagian lain dari latar belakang halaman atau halaman. WebGL program terdiri dari kode kontrol ditulis dalam JavaScript dan kode shader yang dijalankan pada komputer Graphics Processing Unit (GPU). WebGL dirancang dan dipelihara oleh Kelompok Khronos non-profit.


Sejarah


WebGL tumbuh dari eksperimen Canvas 3D dimulai oleh Vladimir Vukićević di Mozilla. Vukićević pertama menunjukkan prototipe 3D kanvas pada tahun 2006. Pada akhir tahun 2007, baik Mozilla dan Opera telah membuat implementasi sendiri terpisah. Pada awal 2009, non-profit teknologi konsorsium Grup Khronos memulai Kelompok Kerja WebGL, dengan partisipasi awal dari Apple, Google, Mozilla, Opera, dan lain-lain. Versi 1.0 dari spesifikasi WebGL dirilis Maret 2011. Pada Maret 2012, ketua kelompok kerja adalah Ken Russell. Aplikasi awal Terkemuka dari WebGL termasuk Google Maps dan Zygote Body.


Bagaimana sih desain WebGL?


WebGL didesain berdasarkan fungsi-fungsi yang ada pada OpenGL ES 2.0, kemudian dibangun dengan elemen HTML5 <canvas> dan diakses dengan menggunakan Document Object Model (DOM).


Bagaimana sih awal mula WebGL?



WebGL berawal dari percobaan yang dilakukan oleh Vladimir Vukićevic ketika berada di Mozilla. Vukićevic pertama kali mendemonstrasikan prototipe Canvas 3D pada tahun 2006. Dipenghujung tahun 2007, Mozilla dan Opera mulai membangunnya secara terpisah. Baru pada awal 2009, Khoronos Group mulai serius dalam membangun project WebGL dengan kerjasama dengan berbagai perusahaan seperti Apple, Google, Mozilla, Opera dan lain-lain.


Pada bulan Maret 2011, WebGL 1.0 akhirnya dirilis dengan kerja keras selama bertahun-tahun. Dengan dirilisnya WebGL, mulai banyak vendor aplikasi multimedia seperti Autodesk, Fusion 360, AutoCAD 360 antusias membangun porting aplikasinya agar WebGL semakin canggih.


WebGL kini sudah mencapai versi 2.0, sudah banyak browser desktop maupun mobile sudah mendukung WebGL. Untuk daftar browser yang mendukung WebGL diantaranya:



Desktop


Google Chrome (semua versi)
Mozilla Firefox 4.x keatas
Safari 6.x keatas
Opera 11.x keatas
IE 11.x keatas
Edge 0.95 keatas


Mobile
Firefox versi mobile
Google Chrome versi mobile
Tizen
Ubuntu Touch
Safari versi mobile pada iOS 8 keatas
dan masih banyak lagi


Itulah dia, sekilas penjelasan tentang WebGL. WebGL menjadi salah satu teknologi web yang sangat berguna bagi banyak orang khususnya desain web 3D dan game 3D berbasis web, begitu juga para peneliti. Selain WebGL 2.0, versi yang saat ini masih stabil adalah WebGL 1.0.2.

python

Pengertian bahasa pemrograman PHYTON

Dari Universitas Bhayangkara

Python adalah bahasa pemrograman model skrip (scripting language) yang berorientasi obyek. Python dapat digunakan untuk berbagai keperluan pengembangan perangkat lunak dan dapat berjalan di berbagai platform sistem operasi. Saat ini script python dapat dijalankan di sistem:

* Linux/Unix
* Windows
* Mac OS X
* OS/2
* Amiga
* Palm
* Symbian (untuk produk-produk Nokia)

Python didistribusikan dengan beberapa lisensi yang berbeda dari beberapa versi. Lihat sejarahnya di Python Copyright. Namun pada prinsipnya Python dapat diperoleh dan dipergunakan secara bebas, bahkan untuk kepentingan komersial. Lisensi Python tidak bertentangan baik menurut definisi Open Source maupun General Public License (GPL)

Sejarah

Python dikembangkan oleh Guido van Rossum pada tahun 1990 di CWI, Amsterdam sebagai kelanjutan dari bahasa pemrograman ABC. Versi terakhir yang dikeluarkan CWI adalah 1.2.

Tahun 1995, Guido pindah ke CNRI sambil terus melanjutkan pengembangan Python. Versi terakhir yang dikeluarkan adalah 1.6. Tahun 2000, Guido dan para pengembang inti Python pindah ke BeOpen.com yang merupakan sebuah perusahaan komersial dan membentuk BeOpen PythonLabs. Python 2.0 dikeluarkan oleh BeOpen. Setelah mengeluarkan Python 2.0, Guido dan beberapa anggota tim PythonLabs pindah ke DigitalCreations.

Saat ini pengembangan Python terus dilakukan oleh sekumpulan pemrogram yang dikoordinir Guido dan Python Software Foundation. Python Software Foundation adalah sebuah organisasi non-profit yang dibentuk sebagai pemegang hak cipta intelektual Python sejak versi 2.1 dan dengan demikian mencegah Python dimiliki oleh perusahaan komersial. Saat ini distribusi Python sudah mencapai versi 2.6.1 dan versi 3.0.

Nama Python dipilih oleh Guido sebagai nama bahasa ciptaannya sebab Guido adalah penggemar berat acara televisi Monty Python's Flying Circus. Oleh karena itu seringkali ungkapan-ungkapan khas dari acara tersebut seringkali muncul dalam korespondensi antar pengguna Python.

Beberapa fitur yang dimiliki Python adalah:

memiliki kepustakaan yang luas; dalam distribusi Python telah disediakan modul-modul 'siap pakai' untuk berbagai keperluan.

memiliki tata bahasa yang jernih dan mudah dipelajari.

memiliki aturan layout kode sumber yang memudahkan pengecekan, pembacaan kembali dan penulisan ulang kode sumber.

berorientasi obyek.

memiliki sistem pengelolaan memori otomatis (garbage collection, seperti java)

modular, mudah dikembangkan dengan menciptakan modul-modul baru; modul-modul tersebut dapat dibangun dengan bahasa Python maupun C/C++.

 Instalasi Phyton

Sebelum Anda menggunakan Python, Anda harus menginstalnya terlebih dahulu sistem operasi komputer Anda

Windows

Buka browser, kunjungi http://www.python.org/downloads/windows/

 ATAU,klikdirect link Python 3.6.1

 Buka (klik 2x) file installer python yang baru saja di download

Ikuti langkah instalasi sampai selesai

Jika Anda belum ingin menginstal Python di komputer, Anda bisa menggunakan online console yang sudah disediakan PythonAnywhere dibawah ini. Dengan console Python ini Anda bisa mempelajari bahasa pemrograman Python dengan praktis.

Console pada pyhton online

IDE adalah sebuah software aplikasi yang memberikan Anda fasilitas bermanfaat ketika membuat program. Biasanya sebuah IDE terdiri dari source code editor build automation tools dandebugger.

Untuk menulis sebuah program, bisa menggunakan text editor atau IDE nya. Bagi yang sudah mahir, menulis program deng  an text editor bukanlah menjadi masalah. Tetapi untuk pemula akan lebih mudah menggunakan IDE  

IDE untuk Python sangatlah banyak, tersedia bermacam-macam IDE dengan kelebihan dan kekurangan masing-masing.
Beberapa IDE untuk Python yang cukup populer adalah :
- Komodo
- LiClipse
- NetBeans
- PyCharm
- KDevelop
- PyDev
- Wing IDE

dan masih banyak lainnya (http://wiki.python.org/moin/IntegratedDevelopmentEnvironments).

Beberapa IDE untuk Python yang cukup populer adalah :

Syntax Dasar

Dibawah ini adalah contoh fungsi Python yang digunakan untuk mencetak. Di Python untuk mencetak cukup gunakan fungsi print() , dimana sesuatu yang akan dicetak harus diletakkan diantara kurung buka dan kurung tutup, bahkan di Python versi 2.x Anda tidak harus menggunakan tanda kurung kurawal, cukup pisahkan dengan spasi.

Jika ingin mencetak tipe data String langsung, Anda harus memasukanya ke dalam tanda kutip terlebih dahulu.

Komentar (comment) adalah kode di dalam script Python yang tidak dieksekusi atau tidak dijalankan mesin. Komentar hanya digunakan untuk menandai ataumemberikan keterangan tertulis  pada script.

Komentar biasa digunakan untuk membiarkan orang lain memahami apa yang dilakukan script. atau untuk mengingatkan kepada programmer sendiri jika suatu saat kembali mengedit scripttersebut.
Untuk menggunakan komentar anda cukup menulis tanda pagar #, diikuti dengan komentar Anda.
Dibawah ini adalah contoh penggunaan komentar pada Python

Variabel adalah lokasi memori yang dicadangkan untuk menyimpan nilai-nilai. Ini berarti bahwa ketika Anda membuat sebuah variabel Anda memesan beberapa ruang di memori. Variabel menyimpan data yang dilakukan selama program dieksekusi, yang natinya isi dari variabel tersebut dapat diubah oleh operasi - operasi tertentu pada program yang menggunakan variabel.

Variabel dapat menyimpan berbagai macam tipe data. Di dalam pemrograman Python, variabel mempunyai sifat yang dinamis, artinya variabel Python tidak perlu didekralasikan tipe data tertentu

Penulisan variabel Python sendiri juga memiliki aturan tertentu, yaitu :

1. Karakter pertama harus berupa huruf atau garis bawah/underscore _
2. Karakter selanjutnya dapat berupa huruf, garis bawah/underscore _ atau angka
3. Karakter pada nama variabel bersifat sensitif (case-sensitif). Artinya huruf kecil dan huruf besar dibedakan. Sebagai contoh, variabel namaDepan dan namadepan adalah variabel yang berbeda.

Untuk mulai membuat variabel di Python caranya sangat mudah, Anda cukup menuliskan variabel lalu mengisinya dengan suatu nilai dengan cara menambahkan tanda sama dengan = diikuti dengan nilai yang ingin dimasukan.

 Pengulangan Phyton

Pengambilan keputusan (kondisi if elif) merupakan lanjutan/percabangan logika dari "kondisi if". Dengan elif kita bisa membuat kode program yang akan menyeleksi beberapa kemungkinan yang bisa terjadi. Hampir sama dengan kondisi "else", bedanya kondisi "elif" bisa banyak dan tidak hanya satu.

Tipe Data Phyton bagian

            Single Quote atau Double Quotes?

String merupakan salah satu tipe data yang sering digunakan dalam pemrograman Python. Sebuah string dapat dinyatakan sebagai kumpulan karakter yang dibatasi oleh satu atau dua tanda petik. Inilah contohnya,

>>> nama = "Klinik Python Indonesia"
>>> nama
'Klinik Python Indonesia'
>>> slm = 'Salam Python Dahsyat!'
>>> slm
'Salam Python Dahsyat!'
>>> print slm
Salam Python Dahsyat!

Dari contoh di atas, ketika kita memanggil variabel secara langsung maka akan ditampilkan isi dari variabel tersebut dengan sebuah tanda petik. Namun jika kita menggunakan pernyataan print, maka tanda petik tersebut akan dihilangkan.

Menampilkan Tanda Petik Sebagai String

Di dalam sebuah string tidak dapat berisi tanda petik yang sama dengan tanda petik yang digunakan oleh string tersebut. Misalkan, ketika kita menuliskan 'Py'thon' maka akan muncul pesan kesalahan (syntax error). Agar tidak muncul pesan kesalahan, kita bisa mengganti tanda petik luarnya dengan tanda petik ganda, misalnya "Py'thon". Tanda petik juga dapat ditulis setelah tanda backslash (\) agar dapat ditampilkan sebagai string.

>>> str = "Py'thon"
>>> str
"Py'thon"
>>> str2 = 'Py"thon'
>>> str2
'Py"thon'
>>> "\"OK, \" sampai ketemu lagi."
'"OK, " sampai ketemu lagi.'

Kode \n atau Triple Quotes Juga Boleh!

Jika kita ingin menuliskan string yang panjang dalam beberapa baris, maka kita perlu menambahkan tanda backslash diikuti huruf n (\n) sebagai tanda baris baru.

>>> teks = "Python adalah bahasa pemrograman yang powerfull.\nTerbukti Python bisa dijalankan di segala platform OS.\nJadi, saatnya kita menggunakan Python sebagai bahasa permrograman \nsehari-hari. Salam Python Dahsyat!"

Tanda \n akan memberikan perintah membuat baris baru jika kita memanggil teks dengan pernyataan print.

>>> print teks
Python adalah bahasa pemrograman yang powerfull.
Terbukti Python bisa dijalankan di segala platform OS.
Jadi, saatnya kita menggunakan Python sebagai bahasa permrograman
sehari-hari. Salam Python Dahsyat!

Kita juga dapat menggunakan tanda petik tiga (triple quotes), """ atau ''', untuk menuliskan sebuah string yang panjang dalam beberapa baris.

>>> teks = """Python adalah bahasa pemrograman yang powerfull.
... Terbukti Python bisa dijalankan di segala platform OS.
... Jadi, saatnya kita menggunakan Python sebagai bahasa pemrograman
... sehari-hari. Salam Python Dahsyat!"""

Tampilan teks dengan pernyataan print seperti di bawah ini,

>>> print teks
Python adalah bahasa pemrograman yang powerfull.
Terbukti Python bisa dijalankan di segala platform OS.
Jadi, saatnya kita menggunakan Python sebagai bahasa pemrograman
sehari-hari. Salam Python Dahsyat!

Menggabungkan String

Untuk menggabungkan dua buah string atau lebih, kita dapat menggunakan operator +.Sedangkan untuk menggandakan string, kita gunakan operator *.

>>> blog = 'Klinik' + 'Python'
>>> blog
'KlinikPython'
>>> newblog = blog*5
>>> newblog
'KlinikPythonKlinikPythonKlinikPythonKlinikPythonKlinikPython'
>>> blog *= 4
>>> print blog
KlinikPythonKlinikPythonKlinikPythonKlinikPython

Jika dua string ditulis secara berurutan, maka secara langsung kedua string tersebut akan digabungkan.

>>> blog = 'Klinik''Python'
>>> blog
'KlinikPython'

Menentukan Panjang String

Panjang dari sebuah string dapat kita temukan dengan menggunakan fungsi len().

>>> len(blog)
12

Memecah String

Tidak seperti bahasa lainnya, Python tidak mendukung tipe Karakter. Untuk mengambil satu karakter atau lebih dari sebuah string, kita dapat memecah string tersebut menggunakan indeks (disebut Metode Irisan). Irisan terdiri dari dua indeks yang dipisahkan tanda koma.

>>> buah = 'Nanas'
>>> buah[0]
'N'
>>> buah[0:2]
'Na'
>>> buah[0:4]
'Nana'
>>> buah[0:5]
'Nanas'

Dari contoh di atas, panjang string buah adalah 5. Ketika kita menghitung maju, indeks bernilai 0 sampai (panjang-string – 1) dimulai dari kiri ke kanan. Maka dari itu, kita dapat mengakses setiap karakter dalam range 0 sampai 4.

Sebuah string juga dapat dihitung mundur, dengan indeks -1 sampai (negatif panjang-string) dimulai dari kanan ke kiri. Berikut gambaran lengkapnya, baik itu penghitungan maju atau mundur.

0	1	2	3	4
N	A	n	a	s
-5	-4	-3	-2	-1

Contoh penggunaan penghitungan mundur,

>>> buah[-1]
‘s’
>>> buah[-5]
‘N’
>>> buah[-5:-1]
‘Nana’
>>> buah[1:-1]
‘ana’

Jika kita lupa berapa nilai indeks awala atau indeks akhir, kita dapat kosongkan indeks tersebut.

>>> buah[:3]
‘Nan’
>>> buah[2:]
‘nas’

Pengosongan indeks akan menyebabkan semua string ditampilkan.

>>> buah[:]
‘Nanas’

String Bersifat Immutable

Tipe data String pada Python bersifat immutable, yang artinya sekali dibuat maka tidak dapat diubah kembali. Ada pertanyaan bagus, jika string bersifat immutable, mengapa kita bisa mengubah nilai dari variabel string tersebut? Jawabannya sangat sederhana. Ketika kita memberikan nilai yang berbeda pada variabel string, sebuah obyek baru berhasil kita buat. Lihat contoh berikut,

>>> nama = "Klinik"
>>> nama
'Klinik'
>>> id(nama)
3076962016L
>>> nama = "Python"
>>> id(nama)
3077289888L

Catat bahwa ketika string nama telah kita buat, maka identitas dari variabel ini dapat kita ketahui dengan menggunakan fungsi id(). Jika kita ubah nilai dari variabel nama tersebut, maka identitasnya juga berubah. Hal ini menandakan bahwa obyek baru telah dibuat. Penggantian nilai pada string pada posisi indeks tertentu akan menghasilkan pesan kesalahan.

>>> nama[0] = 'K'
Traceback (most recent call last):
File "", line 1, in
TypeError: 'str' object does not support item assignment

Kita juga dapat menambahkan sebuah string baru pada string lama.

>>> 'Si' + nama[0]
'SiP'
>>> 'J' + nama[1:]
'Python'

PENJABARAB D3JS

PENJABARAB D3JS

Dari Universitas Bhayangkara

Memahami D3.js

D3.js adalah perpustakaan JavaScript yang banyak digunakan dalam visualisasi data dan animasi. Kekuatan d3.js dan fleksibilitasnya, datang dengan mengorbankan kurva belajar yang curam. Ada beberapa perpustakaan yang dibangun di atasnya yang menyediakan banyak bagan di luar rak untuk membuat hidup pengguna lebih mudah, namun, belajar untuk bekerja dengan d3.js kadang-kadang sangat penting, terutama ketika Anda harus membuat yang canggih dan khusus visualisasi.

Jika Anda tidak terbiasa dengan d3.js, Anda dapat membaca pengantar ini. Secara singkat, seperti halnya jQuery dan kerangka kerja manipulasi DOM lainnya, ini memungkinkan Anda untuk secara dinamis memanipulasi properti dan atribut elemen dokumen HTML Anda. Namun demikian, itu tidak berhenti di sini. Kekuatannya berasal dari dua fungsi tambahan. Itu juga dapat membuat dan memanipulasi elemen SVG, dan itu juga dapat mengikat elemen DOM atau SVG ke array data, sehingga setiap perubahan dalam data itu akan tercermin pada elemen-elemen yang mereka terikat.

 Ada banyak bentuk SVG, seperti lingkaran, persegi panjang, jalur, dan teks. Bentuk-bentuk itu berfungsi sebagai blok bangunan visualisasi Anda. Misalnya, bagan batang terdiri dari beberapa persegi panjang. sedangkan sebaran plot dibuat dari lingkaran yang tersebar di berbagai bagian area gambar Anda. Anda mungkin juga ingin melihat tutorial interaktif ini tentang membuat dan memanipulasi elemen SVG, serta mengikat mereka ke array data.

Mengapa Kita Membutuhkan D3.js?

D3.js adalah salah satu kerangka kerja utama bila dibandingkan dengan perpustakaan lain. Ini karena ia bekerja di web dan visualisasi datanya adalah par excellence. Alasan lain mengapa ia bekerja sangat baik adalah karena fleksibilitasnya. Karena ini bekerja secara mulus dengan teknologi web yang ada dan dapat memanipulasi bagian mana pun dari model objek dokumen, itu sama fleksibelnya dengan Stack Teknologi Sisi Web Klien (HTML, CSS, dan SVG). Ini memiliki dukungan komunitas yang hebat dan lebih mudah dipelajari.

Fitur D3.js

D3.js adalah salah satu kerangka visualisasi data terbaik dan dapat digunakan untuk menghasilkan visualisasi sederhana maupun kompleks bersama dengan interaksi pengguna dan efek transisi. Beberapa fitur yang menonjol tercantum di bawah ini :

·         Sangat fleksibel.

·         Mudah digunakan dan cepat.

·         Mendukung dataset besar.

·         Pemrograman deklaratif.

·         Penggunaan kembali kode.

·         Memiliki berbagai fungsi penghasil kurva.

·         Mengaitkan data ke elemen atau grup elemen di halaman html.

Manfaat D3.js

D3.js adalah proyek sumber terbuka dan bekerja tanpa plugin apa pun. Ini membutuhkan kode yang sangat sedikit dan menghasilkan manfaat berikut :

·         Visualisasi data yang hebat.Itu modular. Anda dapat mengunduh sepotong kecil D3.js, yang ingin Anda gunakan. Tidak perlu memuat seluruh perpustakaan setiap saat.

·         Mudah untuk membangun komponen pembuatan bagan.

·         Manipulasi DOM.
Orang dapat dengan cepat mulai mengkode bagan D3 dengan HTML dengan memasukkan sumber skrip di antara tag. Versi terbaru pada saat penulisan blog ini adalah V4.

Memilih dan Menambahkan Dengan D3

Jika Anda pernah menggunakan perpustakaan seperti jQuery, maka memilih elemen akan mudah bagi Anda. Jika Anda hanya seorang pemula di dunia JS, maka rileks - ini akan sangat mudah bagi Anda. Anda tidak perlu tahu banyak tentang JS, dan pada akhir perjalanan Anda melalui D3, pemahaman Anda tentang JS akan meningkat secara drastis.

Kode di atas adalah yang paling sederhana. Di sini, hal terpenting dalam keseluruhan kode ini adalah objek d3. Objek d3 adalah objek besar dan kompleks yang memiliki semua fungsi perpustakaan d3.js. Jika Anda ingin melihat ke dalamnya, maka setelah memuat kode HTML Anda di browser, buka konsol browser dengan menekan Ctrl + Shift + i. Ketik "d3" di konsol dan tekan Enter. Anda akan melihat semua komponen d3.

Sekarang kembali ke contoh kita. Dengan metode select () objek thed3, elemen DOM apa pun dapat dipilih. Setelah melakukan itu, beberapa operasi dapat dilakukan di atasnya. Di sini, elemen <p>> dipilih dan warnanya berubah menjadi biru.

Menggambar Bentuk Dasar Dengan D3

Mari kita mulai dengan membuat bentuk dasar di D3. Tapi kita tidak bisa melakukan itu hanya dengan menambahkan bentuk SVG langsung ke halaman HTML, bentuk SVG memerlukan wadah SVG. Semua bentuk di dalam wadah itu dapat relatif disesuaikan untuk selanjutnya - misalnya, perubahan dalam satu kurva yang mempengaruhi kurva lain atau perubahan dalam koordinat yang mengubah bentuk kurva atau posisi titik di dalam wadah itu.

Kita bisa menambahkan wadah ke badan halaman HTML dengan metode append () dan kemudian menambahkan bentuk ke wadah itu. Di sini, wadahnya 600px lebar dan tinggi.

SAGA GIS

SAGA GIS

Dari Universitas Bhayangkara

Bagaimana Mendownload Installer SAGA GIS

u  Pertama buka website SAGA GIS (www.saga-gis.org) pada tab browser anda. Tampilan website SAGA GIS seperti ditunjukkan pada gambar di bawah ini.

    Kemudian pilih menu “Downloads” yang tersedia pada kolom sebelah kiri halaman depan

Secara otomatis anda akan diarahkan pada tab baru yaitu sourceforge.net dengan kemudian langkah beriikut ini adalah selanjutnya.

SAGA GIS

merupakan salah satu software Free Open Source yang cukup berkembang dan merilis banyak versi, kita dapat mendownload versi yang kita inginkan yang telah dipertimbangkan dengan spesifikasi desktop atau computer yang kita pakai.Pada panduan kali ini kita akan mendownload SAGA GIS Versi terbaru yaitu SAGA GIS 2.2.2.

                Pilih SAGA GIS yang sesuai dengan system operasi yang digunakan pada Laptop anda. Pada contoh ini kita akan mendownload SAGA GIS untuk laptop dengan system operasi 64 bit. Pilih menu yang tertera seperti gambar dibawah ini.

Menginstall SAGA GIS

u  Setelah proses download selesai ekstrak file software SAGA GIS yang tersimpan dalam format zip. Kemudian buka file tersebut. Di dalam File Software SAGA GIS terdapat banyak jenis folder dengan tipe yang berbeda – beda.Untuk menjalankan software SAGA, klik icon SAGA GIS (Type Application).

Cara Membersihkan Data

u  Untuk mengendit lokasi dan jumlah titik destinasi dapat dilakukan dengan memilih select lapisan

u  data titik (point) pada tab data kemudian gunakan alat pointer untuk memilih suatu titik pada jendela peta (map window), klik kanan dan pilih Edit Selected Shape. Anda kemudian dapat memindahkan atau menghapus titik. Untuk menambahkan suatu titik, pada lapisan data titik pada tab data yang dipilih, kemudian klik kanan pada jendala peta dan pilih “Add Shape” kemudian pilih lokasi pada peta dimana anda ingin untuk menambahkan suatu titik dan setelah itu klik Enter.

Contoh Menginput Data Citra Pada Saga gis

Salah satu keuntungan lain menggunakan SAGA adalah kemudahannya dalam menampilkan citra Open Streertmap atau citra satelit google sebagai peta dasar. Hal ini dapat dilakukan dengan hanya beberapa langkah secara online (dalam jaringan) dengan menggunakan data vektor pada tutorial sebelumnya. Satu hal yang perlu diperhatikan adalah data vektor yang digunakan harus memiliki sistem koordinat yang tepat

Pilih citra dasar

• (a) dalam contoh ini kita akan menggunakan citra google (atau bisa dipilih beberapa citra lainnya) sehingga pada Server diubah menjadi Google Satellite; dan
• (b) pada Position diubah menjadi Top yang berarti posisi peta dasar akan berada paling depan pada layer peta. Jika sudah, klik Okay.

Fitur apa saja yang dimiliki SAGA GIS

u  Seperti aplikasi GIS pada umumnya, SAGA GIS juga didukung berbagai macam format data. Software ini dapat memudahkan kita mengimport  data lapangan dari format Excel (csv.) maupun data dari GPS (gpx.). Selain itu data raster yang dapat dieksport oleh SAGA GIS tersimpan dalam format sgrd. Salah satu kelebihan fitur export dari SAGA GIS adalah dapat mengexport data ke aplikasi pdf  maps,yaitu sebuah aplikasi berbasis android yang sangat berguna untuk pengumpulan data lapangan.

u  Konsep advanced merupakan tingkatan lanjutan setelah kita membahas mengenai pengolahan citra Landsat maupun Terrain Analisis pada SAGA GIS. Pada bagian ini, akan dijelaskan mengenai fungsi aplikasi SAGA GIS lainnya seperti Geostatistic, Tool Chains Sedimen Modelling, Travel Time Analisis. Dengan berbagai macam kemampuan analisis dan modelling menunjukkan bahwa SAGA GIS merupakan salah satu Free Open Source Software yang sangat powerful di bidang Remote Sensing.

u  Fungsi import di open source software SAGA-GIS gratis membuat melihat data Landsat pada desktop dengan proses satu langkah sederhana. Tidak ada alat lain, gratis atau komersial lain yang menyediakan cara yang lebih mudah untuk mengimpor dan memvisualisasikan data Landsat. Selain fungis import yang mudah, pada panduan ini juga akan menyajikan tutorial bekerja dengan data landsat pada SAGA GIS seperti klasifikasi tutupan lahan, memotong citra landsat, monitoring perubahan lahan.

u  Selain citra Landsat, SAGA GIS juga dengan mudah mengolah data yang bersumber dari SRTM untuk untuk menghasilkan beragam informasi terrain rupa bumi. Pada panduan ini  dijelaskan tentang kelebihan SAGA GIS dapat menghasilkan informasi yang bermanfaat mengenai Watershed Basins, Panjang kemiringan lereng, prediksi aliran sedimen serta kontur yang bersumber dari data Digital Elevation Model (DEM).

Analisis Terrain

Bagian ini bekerja melalui dasar-dasar preprocessing data DEM yang berasal dari SRTM   dan beberapa analisis lain untuk :

Visualisasi 3D

Delineasi Batas DAS

Basic Terrain Analysis

Modelling Aliran Hidrologi

Measurement Gis

Measurement (Pengukuran)

Pengukuran merupakan metode yang digunakan untuk menghitung jumlah dari point, panjang dari line, dan luas (area) atau keliling (perimeter) dari polygon. 

Jenis Measurement (Pengukuran)

• Raster GIS Measurement
• Vector GIS Measurement

Raster GIS Measurement

1. Pythagorean Distance / Euclidean Distance

Menghitung panjang atau jarak antara dua titik menggunakan rumus pythagoras.

2. Manhattan Distance

Menghitung panjang atau jarak antara dua titik dengan menghitung jumlab sel yang dilalui oleh garis tersebut.

3. Proximity Distance

Menghitung panjang atau jarak antara dua titik dengan perkiraan. Proximity mirip dengan pythagorean, tetapi diterapkan pada setiap pixel. 

4. Perimeter and Area

Menghitung keliling (perimeter) dan luas (area) dari sebuah polygon dengan menggunakan rumus geometri dengan satuan cell unit.

contoh dari masing-masing pengukuran:

(a) Pythagorean Distance, (b) Manhattan Distance, (c) Proximity Distance, (d) Perimeter and Area

Vector GIS Measurement

Pada pengukuran vektor, pengukuran panjang atau jarak menggunakan rumus pythagoras, dan pengukuran luas dan keliling menggunakan rumus geometri.

contoh pengukuran vektor:

Query

Query merupakan cara untuk mengambil data pada database. Beberapa operator boolean yang sering digunakan untuk menggabungkan beberapa query dengan kondisi yang diperlukan.

Reclassification (Reklasifikasi)

Reklasifikasi merupakan suatu metode yang digunakan untuk mengklasifikasi ulang data spasial dari yang detail dan kelasnya banyak menjadi semi detail dan kelasnya lebih sedikit.

Contoh reklasifikasi:

Buffering and Neighborhood Function

Buffering merupakan metode penentuan area interest atau berkepentingan yang ada di sekitar entitas geografis. Biasanya buffering digunakan pada data vektor, sedangkan Neighborhood function merupakan metode buffer yang digunakan pada data raster. 

Pada data raster, zona interest dibuat menggunakan proximity approach, dimana pendekatan ini akan menghasilkan lapisan data raster baru yang atribut setiap selnya merupakan pengukuran jarak.

Buffering Data Vektor

Proximity Approach 

Contoh Buffering:

Integrating Data / Map Overlay

Integrasi Data merupakan suatu metode yang digunakan untuk menggabungkan 2 variabel atau lebih untuk menghasilkan satu variabel baru. 

Integrasi Pada Data Vektor

Integrasi Pada Data Raster

Contoh Integrasi Data:

Interpolasi Spasial

Interpolasi spasial merupakan suatu prosedur untuk memperkirakan nilai properti dalam area yang tertutup pada pengamatan yang ada.

Metode Interpolasi

• Local or Global Interpolation, Menggunakan Sample dari titik kontrol (Local) atau Menggunakan semua titik pada daerah titik kontrol (Global).
• Exact or Approximate, Memprediksi nilai titik kontrol yang nilainya sama dengan pada saat observasi (Exact) atau yang nilainya tidak sama (Approximate).
• Gradual or Abrupt, Interpolasi yang menghasilkan perubahan bertahap (Gradual) atau mendadak/tiba-tiba (Abrupt).
• Deterministic or Stochastic, Interpolasi tidak memiliki nilai error (Deterministic) atau memiliki nilai error (Stochastic) pada nilai prediksi yang dilakukan

Thiessen Polygon (Voronoi Polygon)

Thiessen polygon merupakan metode interpolasi yang tepat untuk mengasumsikan bahwa nilai lokasi yang bukan sample sama dengan nilai titik sample terdekat. Dibuat dengan membagi garus yang menghubungkan titik neighborhood, kemudian menggambar bisektor tegak lurus, lalu menggunakan bisektor tersebut untuk merakit tepi polygon.

Triangulated Irregular Network (TIN)

TIN merupakan cara yang elegan untuk membangun permukaan dari satu set spaced data point.

Analisa Permukaan (Surface)

Analisa permukaan dapat dilakukan dengan 2 langkah, yaitu:

1. Menghitung Slope dan Aspect

Slope merupakan kecuraman atau gradien dari unit yang biasanya diukur sebagai sudut dalam ukuran derajat sebagai presentasi. Sedangkan Aspect merupakan arah yang dihitung dari derajat utara.

Perhitungan Slope dan Aspect:

• Raster

• Vector, menggunakan persamaan linear ketika TIN dihasilkan. persamaan tersebut menghitung slope dan aspect dari segitiga individu yang dibentuk TIN.

2. Analisa Visibilitas, yaitu identifikasi area yang dapat dilihat dari titik tertentu permukaan.