Arquivo da tag: HTML5

D3js v4 map zoom, drag points, drag map, get lon x lat

Mapa mundial com zoom scroll, move mapa, adicionar pontos no json e mover, console.log mostrando a latitude e longitude, utilizando D3.js Versão 4 escrita em ES6

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

cities.json

[
    {
        "code": "OTT",
        "city": "OTTAWA",
        "country": "CANADA",
        "lat": "23.10",
        "lon": "120.34"
    },
    {
        "code": "BSB",
        "city": "BRASILIA",
        "country": "BRAZIL",
        "lat": "-32.85",
        "lon": "133.30"
    },
    {
        "code": "DEL",
        "city": "DELHI",
        "country": "INDIA",
        "lat": "4.71",
        "lon": "-127.57"
    },
    {
        "code": "CMX",
        "city": "CIDADE DO MÉXICO",
        "country": "MÉXICO",
        "lat": "0.42",
        "lon": "93.19"
    },
    {
        "code": "SID",
        "city": "SIDNEY",
        "country": "AUSTRALIA",
        "lat": "-48.38",
        "lon": "-71.71"
    },
    {
        "code": "TOK",
        "city": "TOQUIO",
        "country": "JAPÃO",
        "lat": "17.34",
        "lon": "-81.73"
    },
    {
        "code": "CCA",
        "city": "CIDADE DO CABO",
        "country": "AFRICA DO SUL",
        "lat": "-43.20",
        "lon": "-171.97"
    },
    {
        "code": "CMP",
        "city": "CAMPO GRANDE",
        "country": "BRASIL",
        "lat": "-36.15",
        "lon": "130.72"
    },
    {
        "code": "PAR",
        "city": "PARIS",
        "country": "FRANÇA",
        "lat": "22.19",
        "lon": "174.27"
    },
    {
        "code": "NOY",
        "city": "NOVA YORK",
        "country": "USA",
        "lat": "11.23",
        "lon": "112.96"
    }
]

script.js Javascript

const width = 960,
    height = 500,
    projection = d3.geoMercator()
        .center([0, 5])
        .scale(200)
        .rotate([-180, 0]),
    svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height),
    path = d3.geoPath()
        .projection(projection),
    g = svg.append('g')

g.append('image')
    .attr('xlink:href', 'https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg')
    .append('path')
    .attr('d', path)    

// Carregar cidades | load city
d3.json('cities.json', (error, data) => {
    const circles = g.selectAll('circle')
        .data(data)
        .enter()
        .append('a')
        .attr('xlink:href', d => `https://www.google.com/search?q=${d.city}`
        )
        .append('circle')
        .attr('cx', d => projection([d.lon, d.lat])[0])
        .attr('cy', d => projection([d.lon, d.lat])[1])
        .attr('r', 5)
        .style('fill', 'red'),
        drag_handler = d3.drag()
            .on('start', drag_start)
            .on('drag', drag_drag)

    function drag_start() {
        start_x = +d3.event.x
        start_y = +d3.event.y
    }

    function drag_drag(d) {
        //Get the current scale of the circle 
        //case where we haven't scaled the circle yet
        // get lon x lat
        console.log('lon x lat', projection.invert([d3.event.x, d3.event.y]))

        if (!this.getAttribute('transform'))
            current_scale = 1
        else {
            current_scale_string = this.getAttribute('transform').split(' ')[1]
            current_scale = +current_scale_string.substring(6, current_scale_string.length - 1)
        }
        d3.select(this)
            .attr('cx', d.x = start_x + ((d3.event.x - start_x) / current_scale))
            .attr('cy', d.y = start_y + ((d3.event.y - start_y) / current_scale))
    }

    drag_handler(circles)
})

// zoom and pan
const zoom = d3.zoom()
    .on('zoom', () => {
        g.style('stroke-width', `${1.5 / d3.event.transform.k}px`)
        g.attr('transform', d3.event.transform) // updated for d3 v4
    })

svg.call(zoom)

Demo: https://bl.ocks.org/sistemawebpro/8ef27771795b451d0589e95e5674aa41

Estrutura básica do HTML5

A estrutura básica do HTML5 é a mesma das versões anteriores da linguagem, com apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:

<!DOCTYPE HTML>
   <html lang="pt-br">
   <head>
   	<meta charset="UTF-8">
   	<link rel="stylesheet" type="text/css" href="style.css">
   	<title></title>
   </head>
   <body>
   	
  </body>
  </html>

Doctype

O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

<!DOCTYPE html!>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser.

O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

O elemento HTML

O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.

<html lang="pt-br">

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Para encontrar a listagem de códigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.

HEAD – Cabeçalho

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.

Metatag Charset

No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando. Sendo assim será lido toda acentuação e caracteres especiais do nosso idioma português.

<meta charset="utf-8">

Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Essa forma antiga será também suportada no HTML5. Contudo, é melhor que você utilize a nova forma.

A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.

O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.

Tag LINK

Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.

No nosso exemplo há uma tag LINK que importa o CSS para nossa página:

<link rel="stylesheet" type="text/css" href="style.css">

O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.

Há outros valores para o atributo REL, como por exemplo o ALTERNATE:

<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">

Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.

No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.