D3.js Sankey Plugin – Lista de Presidentes por Mandato, Partido e Estado

Untitled-3

Demostração

Com o arquivo abaixo criei um gráfico listando todos os presidentes do Brasil, contabilizando os Mandatos, Partidos e Estados.

index.html

<!DOCTYPE html>
<html>
<head lang="pt-BR">
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chart"></div>
<script src="d3.v3.min.js"></script>
<script src="sankey.js"></script>
<script src="custom.js"></script>
</body>
</html>

custom.js

var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 1260 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var formatNumber = d3.format(""),
    format = function(d) { return formatNumber(d).replace('.', '!').replace(',', '.').replace('!', ','); },
    color = d3.scale.category20();
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(100)
    .nodePadding(10)
    .size([width, height]);

var path = sankey.link();

d3.json("arquivo.json", function(energy) {

    var nodeMap = {};
    energy.nodes.forEach(function(x) { nodeMap[x.node] = x; });
    energy.links = energy.links.map(function(x) {
        console.log(x);
        return {
            source: nodeMap[x.source],
            target: nodeMap[x.target],
            value: x.value
        };
    });

    sankey
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);

    var link = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("a")
        .append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("stroke-width", function(d) { return Math.max(1, d.dy); })

        .sort(function(a, b) { return b.dy - a.dy; });

    link.append("title")
        .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value).replace('.', '!').replace(',', '.').replace('!', ','); });

    var node = svg.append("g").selectAll(".node")
        .data(energy.nodes)
        .enter().append("g")
        .append("a")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

        .call(d3.behavior.drag()
            .origin(function(d) { return d; })
            .on("dragstart", function() { this.parentNode.appendChild(this); })
            .on("drag", dragmove))
        .on("mouseover", fade(0.2))
        .on("mouseout", fade(1));

    node.append("rect")
        .attr("height", function(d) { return d.dy; })


        .attr("width", sankey.nodeWidth())
        .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
        .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
        .append("title")
        .text(function (d) {
            var titleText = d.name + " - " +
                format(d.value) + " total" + "\n" + "\n";
            var sourcesText = "";
            d.targetLinks.forEach(function (dstLnk) {
                sourcesText += "a partir de " + dstLnk.source.name + " - " +
                    format(dstLnk.value) + "\n";
            });
            return titleText + sourcesText;
        });

    node.append("text")
        .attr("class","nodeValue")
        .text(function(d) { return d.name + "\n" + format(d.value).replace('.', '!').replace(',', '.').replace('!', ','); });

    ///align vertically???
    node.selectAll("text.nodeValue")
        .attr("x", sankey.nodeWidth() / 2)
        .attr("y", function (d) { return (d.dy / 2) })
        .text(function (d) { return formatNumber(d.value).replace('.', '!').replace(',', '.').replace('!', ','); })
        .attr("dy", 5)
        .attr("text-anchor", "middle");

    node.append("text")
        .attr("class","nodeLabel");

    node.selectAll("text.nodeLabel")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
        .attr("class", function (d) { if (d.categoria === 1) return "titulo"; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

    function dragmove(d) {
        d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
        sankey.relayout();
        link.attr("d", path);
    }
    function fade(opacity) {
        return function (g, i) {
            var elements = svg.selectAll(".node");
            elements = elements.filter(function (d) { return d.node != energy.nodes[i].node });
            elements.transition()
                .style("opacity", opacity);
            svg.selectAll(".link")
                .filter(function (d) { return d.source.node != energy.nodes[i].node && d.target.node != energy.nodes[i].node  })
                .transition()
                .style("opacity", opacity);
        };
    }
});

arquivo.json

{
  "nodes": [
    {
      "name": "Marechal Deodoro da Fonseca",
      "node": 0,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Floriano Peixoto",
      "node": 1,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Prudente de Morais",
      "node": 2,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Campos Sales",
      "node": 3,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Rodrigues Alves",
      "node": 4,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Afonso Pena",
      "node": 5,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Nilo Peçanha",
      "node": 6,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Hermes da Fonseca",
      "node": 7,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Venceslau Brás",
      "node": 8,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Delfim Moreira",
      "node": 9,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Epitácio Pessoa",
      "node": 10,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Artur Bernardes",
      "node": 11,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Washington Luís",
      "node": 12,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Getúlio Vargas",
      "node": 13,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "José Linhares",
      "node": 14,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Eurico Gaspar Dutra",
      "node": 15,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Café Filho",
      "node": 16,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Carlos Luz",
      "node": 17,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Nereu Ramos",
      "node": 18,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Juscelino Kubitschek",
      "node": 19,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Jânio Quadros",
      "node": 20,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Ranieri Mazzilli",
      "node": 21,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "João Goulart",
      "node": 22,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Castelo Branco",
      "node": 23,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Costa e Silva",
      "node": 24,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Emilio Medici",
      "node": 25,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Ernesto Geisel",
      "node": 26,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "João Figueiredo",
      "node": 27,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "José Sarney",
      "node": 28,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Fernando Collor",
      "node": 29,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Itamar Franco",
      "node": 30,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Fernando Henrique Cardoso",
      "node": 31,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Luís Inácio Lula da Silva",
      "node": 32,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "Dilma Rousseff",
      "node": 33,
      "categoria": 0,
      "xPos": 0
    },
    {
      "name": "militar",
      "node": 34,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Partido Republicano Federal",
      "node": 35,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Partido Republicano Paulista",
      "node": 36,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Partido Republicano Fluminense",
      "node": 37,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Partido Republicano Conservador",
      "node": 38,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Partido Republicano Mineiro",
      "node": 39,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Aliança Liberal",
      "node": 40,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "nenhum",
      "node": 41,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PSP",
      "node": 42,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PTN",
      "node": 43,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PTB",
      "node": 44,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PSD",
      "node": 45,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "ARENA (militar)",
      "node": 46,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PDS (militar)",
      "node": 47,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PRN",
      "node": 48,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PMDB",
      "node": 49,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PSDB",
      "node": 50,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "PT",
      "node": 51,
      "categoria": 0,
      "xPos": 1
    },
    {
      "name": "Alagoas",
      "node": 52,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Paraíba",
      "node": 53,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Mato Grosso",
      "node": 54,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Rio Grande do Norte",
      "node": 55,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Santa Catarina",
      "node": 56,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Mato Grosso do Sul",
      "node": 57,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "São Paulo",
      "node": 58,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Ceará",
      "node": 59,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Rio Grande do Sul",
      "node": 60,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Maranhão",
      "node": 61,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Rio de Janeiro",
      "node": 62,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Pernambuco",
      "node": 63,
      "categoria": 0,
      "xPos": 2
    },
    {
      "name": "Minas Gerais",
      "node": 64,
      "categoria": 0,
      "xPos": 2
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 34,
      "value": 1
    },
    {
      "source": 1,
      "target": 34,
      "value": 1
    },
    {
      "source": 2,
      "target": 35,
      "value": 1
    },
    {
      "source": 3,
      "target": 36,
      "value": 1
    },
    {
      "source": 4,
      "target": 36,
      "value": 1
    },
    {
      "source": 5,
      "target": 39,
      "value": 1
    },
    {
      "source": 6,
      "target": 37,
      "value": 1
    },
    {
      "source": 7,
      "target": 38,
      "value": 1
    },
    {
      "source": 8,
      "target": 39,
      "value": 1
    },
    {
      "source": 9,
      "target": 39,
      "value": 1
    },
    {
      "source": 10,
      "target": 39,
      "value": 1
    },
    {
      "source": 11,
      "target": 39,
      "value": 1
    },
    {
      "source": 12,
      "target": 36,
      "value": 1
    },
    {
      "source": 13,
      "target": 40,
      "value": 1
    },
    {
      "source": 14,
      "target": 41,
      "value": 1
    },
    {
      "source": 15,
      "target": 45,
      "value": 1
    },
    {
      "source": 13,
      "target": 44,
      "value": 1
    },
    {
      "source": 16,
      "target": 42,
      "value": 1
    },
    {
      "source": 17,
      "target": 45,
      "value": 1
    },
    {
      "source": 18,
      "target": 45,
      "value": 1
    },
    {
      "source": 19,
      "target": 45,
      "value": 1
    },
    {
      "source": 20,
      "target": 43,
      "value": 1
    },
    {
      "source": 21,
      "target": 45,
      "value": 1
    },
    {
      "source": 22,
      "target": 44,
      "value": 1
    },
    {
      "source": 21,
      "target": 45,
      "value": 1
    },
    {
      "source": 23,
      "target": 46,
      "value": 1
    },
    {
      "source": 24,
      "target": 46,
      "value": 1
    },
    {
      "source": 25,
      "target": 46,
      "value": 1
    },
    {
      "source": 26,
      "target": 46,
      "value": 1
    },
    {
      "source": 27,
      "target": 47,
      "value": 1
    },
    {
      "source": 28,
      "target": 49,
      "value": 1
    },
    {
      "source": 29,
      "target": 48,
      "value": 1
    },
    {
      "source": 30,
      "target": 49,
      "value": 1
    },
    {
      "source": 30,
      "target": 49,
      "value": 1
    },
    {
      "source": 31,
      "target": 50,
      "value": 1
    },
    {
      "source": 31,
      "target": 50,
      "value": 1
    },
    {
      "source": 32,
      "target": 51,
      "value": 1
    },
    {
      "source": 32,
      "target": 51,
      "value": 1
    },
    {
      "source": 33,
      "target": 51,
      "value": 1
    },
    {
      "source": 33,
      "target": 51,
      "value": 1
    },
    {
      "source": 34,
      "target": 52,
      "value": 1
    },
    {
      "source": 34,
      "target": 52,
      "value": 1
    },
    {
      "source": 35,
      "target": 58,
      "value": 1
    },
    {
      "source": 36,
      "target": 58,
      "value": 1
    },
    {
      "source": 36,
      "target": 58,
      "value": 1
    },
    {
      "source": 39,
      "target": 64,
      "value": 1
    },
    {
      "source": 37,
      "target": 62,
      "value": 1
    },
    {
      "source": 38,
      "target": 60,
      "value": 1
    },
    {
      "source": 39,
      "target": 64,
      "value": 1
    },
    {
      "source": 39,
      "target": 64,
      "value": 1
    },
    {
      "source": 39,
      "target": 53,
      "value": 1
    },
    {
      "source": 39,
      "target": 64,
      "value": 1
    },
    {
      "source": 36,
      "target": 62,
      "value": 1
    },
    {
      "source": 40,
      "target": 60,
      "value": 1
    },
    {
      "source": 41,
      "target": 59,
      "value": 1
    },
    {
      "source": 45,
      "target": 54,
      "value": 1
    },
    {
      "source": 44,
      "target": 60,
      "value": 1
    },
    {
      "source": 42,
      "target": 55,
      "value": 1
    },
    {
      "source": 45,
      "target": 64,
      "value": 1
    },
    {
      "source": 45,
      "target": 56,
      "value": 1
    },
    {
      "source": 45,
      "target": 64,
      "value": 1
    },
    {
      "source": 43,
      "target": 57,
      "value": 1
    },
    {
      "source": 45,
      "target": 58,
      "value": 1
    },
    {
      "source": 44,
      "target": 60,
      "value": 1
    },
    {
      "source": 45,
      "target": 58,
      "value": 1
    },
    {
      "source": 46,
      "target": 59,
      "value": 1
    },
    {
      "source": 46,
      "target": 60,
      "value": 1
    },
    {
      "source": 46,
      "target": 60,
      "value": 1
    },
    {
      "source": 46,
      "target": 60,
      "value": 1
    },
    {
      "source": 47,
      "target": 62,
      "value": 1
    },
    {
      "source": 49,
      "target": 61,
      "value": 1
    },
    {
      "source": 48,
      "target": 62,
      "value": 1
    },
    {
      "source": 49,
      "target": 64,
      "value": 1
    },
    {
      "source": 49,
      "target": 64,
      "value": 1
    },
    {
      "source": 50,
      "target": 62,
      "value": 1
    },
    {
      "source": 50,
      "target": 62,
      "value": 1
    },
    {
      "source": 51,
      "target": 63,
      "value": 1
    },
    {
      "source": 51,
      "target": 64,
      "value": 1
    }
  ]
}

D3.js Sankey Diagrama com posição por coluna fixada dinamicamente pelo json

Untitled-2

Foi modificado o plugin D3 Sankey plugin para atender o formato de gráfico que queria utiliza-lo, para este exemplo vou disponibilizar os códigos.

index.html

<!DOCTYPE html>
<html>
<head lang="pt-BR">
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="sankey.js"></script>
<script src="custom.js"></script>
</body>
</html>

sankey.js (Modificado)

d3.sankey = function() {
    var sankey = {},
        nodeWidth = 24,
        nodePadding = 8,
        size = [1, 1],
        nodes = [],
        links = [];

    sankey.nodeWidth = function(_) {
        if (!arguments.length) return nodeWidth;
        nodeWidth = +_;
        return sankey;
    };

    sankey.nodePadding = function(_) {
        if (!arguments.length) return nodePadding;
        nodePadding = +_;
        return sankey;
    };

    sankey.nodes = function(_) {
        if (!arguments.length) return nodes;
        nodes = _;
        return sankey;
    };

    sankey.links = function(_) {
        if (!arguments.length) return links;
        links = _;
        return sankey;
    };

    sankey.size = function(_) {
        if (!arguments.length) return size;
        size = _;
        return sankey;
    };

    sankey.layout = function(iterations) {
        computeNodeLinks();
        computeNodeValues();
        computeNodeBreadths();
        computeNodeDepths(iterations);
        computeLinkDepths();
        return sankey;
    };

    sankey.relayout = function() {
        computeLinkDepths();
        return sankey;
    };

    sankey.link = function() {
        var curvature = .5;

        function link(d) {
            var x0 = d.source.x + d.source.dx,
                x1 = d.target.x,
                xi = d3.interpolateNumber(x0, x1),
                x2 = xi(curvature),
                x3 = xi(1 - curvature),
                y0 = d.source.y + d.sy + d.dy / 2,
                y1 = d.target.y + d.ty + d.dy / 2;
            return "M" + x0 + "," + y0
                + "C" + x2 + "," + y0
                + " " + x3 + "," + y1
                + " " + x1 + "," + y1;
        }

        link.curvature = function(_) {
            if (!arguments.length) return curvature;
            curvature = +_;
            return link;
        };

        return link;
    };

    // Populate the sourceLinks and targetLinks for each node.
    // Also, if the source and target are not objects, assume they are indices.
    function computeNodeLinks() {
        nodes.forEach(function(node) {
            node.sourceLinks = [];
            node.targetLinks = [];
        });
        links.forEach(function(link) {
            var source = link.source,
                target = link.target;
            if (typeof source === "number") source = link.source = nodes[link.source];
            if (typeof target === "number") target = link.target = nodes[link.target];
            source.sourceLinks.push(link);
            target.targetLinks.push(link);
        });
    }

    // Compute the value (size) of each node by summing the associated links.
    function computeNodeValues() {
        nodes.forEach(function(node) {
            node.value = Math.max(
                d3.sum(node.sourceLinks, value),
                d3.sum(node.targetLinks, value)
            );
        });
    }

    // Iteratively assign the breadth (x-position) for each node.
    // Nodes are assigned the maximum breadth of incoming neighbors plus one;
    // nodes with no incoming links are assigned breadth zero, while
    // nodes with no outgoing links are assigned the maximum breadth.
    function computeNodeBreadths() {
        var remainingNodes = nodes,
            nextNodes,
            x = 0;

        while (remainingNodes.length) {
            nextNodes = [];
            remainingNodes.forEach(function(node) {

                if (node.xPos) {
                    node.x = node.xPos;
                } else {
                    node.x = x;
                }

                node.dx = nodeWidth;
                node.sourceLinks.forEach(function(link) {
                    nextNodes.push(link.target);
                });
            });
            remainingNodes = nextNodes;
            ++x;
        }

        //
        moveSinksRight(x);
        scaleNodeBreadths((width - nodeWidth) / (x - 1));

    }


    function moveSinksRight(x) {
        nodes.forEach(function(node) {
            if (!node.sourceLinks.length) {
                //node.x = x - 1;
                node.x = node.xPos;
            }
        });
    }

    function scaleNodeBreadths(kx) {
        nodes.forEach(function(node) {
            node.x *= kx;
        });
    }

    function computeNodeDepths(iterations) {
        var nodesByBreadth = d3.nest()
            .key(function(d) { return d.x; })
            .sortKeys(d3.ascending)
            .entries(nodes)
            .map(function(d) { return d.values; });

        //
        initializeNodeDepth();
        resolveCollisions();
        for (var alpha = 1; iterations > 0; --iterations) {
            relaxRightToLeft(alpha *= .99);
            resolveCollisions();
            relaxLeftToRight(alpha);
            resolveCollisions();
        }

        function initializeNodeDepth() {
            var ky = d3.min(nodesByBreadth, function(nodes) {
                return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
            });

            nodesByBreadth.forEach(function(nodes) {
                nodes.forEach(function(node, i) {
                    node.y = i;
                    node.dy = node.value * ky;
                });
            });

            links.forEach(function(link) {
                link.dy = link.value * ky;
            });
        }

        function relaxLeftToRight(alpha) {
            nodesByBreadth.forEach(function(nodes, breadth) {
                nodes.forEach(function(node) {
                    if (node.targetLinks.length) {
                        var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
                        node.y += (y - center(node)) * alpha;
                    }
                });
            });

            function weightedSource(link) {
                return center(link.source) * link.value;
            }
        }

        function relaxRightToLeft(alpha) {
            nodesByBreadth.slice().reverse().forEach(function(nodes) {
                nodes.forEach(function(node) {
                    if (node.sourceLinks.length) {
                        var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
                        node.y += (y - center(node)) * alpha;
                    }
                });
            });

            function weightedTarget(link) {
                return center(link.target) * link.value;
            }
        }

        function resolveCollisions() {
            nodesByBreadth.forEach(function(nodes) {
                var node,
                    dy,
                    y0 = 0,
                    n = nodes.length,
                    i;

                // Push any overlapping nodes down.
                nodes.sort(ascendingDepth);
                for (i = 0; i < n; ++i) {
                    node = nodes[i];
                    dy = y0 - node.y;
                    if (dy > 0) node.y += dy;
                    y0 = node.y + node.dy + nodePadding;
                }

                // If the bottommost node goes outside the bounds, push it back up.
                dy = y0 - nodePadding - size[1];
                if (dy > 0) {
                    y0 = node.y -= dy;

                    // Push any overlapping nodes back up.
                    for (i = n - 2; i >= 0; --i) {
                        node = nodes[i];
                        dy = node.y + node.dy + nodePadding - y0;
                        if (dy > 0) node.y -= dy;
                        y0 = node.y;
                    }
                }
            });
        }

        function ascendingDepth(a, b) {
            return a.y - b.y;
        }
    }

    function computeLinkDepths() {
        nodes.forEach(function(node) {
            node.sourceLinks.sort(ascendingTargetDepth);
            node.targetLinks.sort(ascendingSourceDepth);
        });
        nodes.forEach(function(node) {
            var sy = 0, ty = 0;
            node.sourceLinks.forEach(function(link) {
                link.sy = sy;
                sy += link.dy;
            });
            node.targetLinks.forEach(function(link) {
                link.ty = ty;
                ty += link.dy;
            });
        });

        function ascendingSourceDepth(a, b) {
            return a.source.y - b.source.y;
        }

        function ascendingTargetDepth(a, b) {
            return a.target.y - b.target.y;
        }
    }

    function center(node) {
        return node.y + node.dy / 2;
    }

    function value(link) {
        return link.value;
    }

    return sankey;
};

custom.js (modificado)

var margin = {top: 1, right: 1, bottom: 6, left: 1},
    width = 1260 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatNumber = d3.format(",.2f"),
    format = function(d) { return formatNumber(d).replace('.', '!').replace(',', '.').replace('!', ','); },
    color = d3.scale.category20();
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(100)
    .nodePadding(10)
    .size([width, height]);

var path = sankey.link();

d3.json("package.json", function(energy) {

    var nodeMap = {};
    energy.nodes.forEach(function(x) { nodeMap[x.node] = x; });
    energy.links = energy.links.map(function(x) {
        console.log(x);
        return {
            source: nodeMap[x.source],
            target: nodeMap[x.target],
            value: x.value
        };
    });

    sankey
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);

    var link = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("stroke-width", function(d) { return Math.max(1, d.dy); })
        .sort(function(a, b) { return b.dy - a.dy; });

    link.append("title")
        .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value).replace('.', '!').replace(',', '.').replace('!', ','); });

    var node = svg.append("g").selectAll(".node")
        .data(energy.nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.behavior.drag()
            .origin(function(d) { return d; })
            .on("dragstart", function() { this.parentNode.appendChild(this); })
            .on("drag", dragmove));

    node.append("rect")
        .attr("height", function(d) { return d.dy; })
        .attr("width", sankey.nodeWidth())
        .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
        .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
        .append("title")
        .text(function (d) {
            var titleText = d.name + " - " +
                format(d.value) + " total" + "\n" + "\n";
            var sourcesText = "";
            d.targetLinks.forEach(function (dstLnk) {
                sourcesText += "a partir de " + dstLnk.source.name + " - " +
                    format(dstLnk.value) + "\n";
            });
            return titleText + sourcesText;
        });

    node.append("text")
        .attr("class","nodeValue")
        .text(function(d) { return d.name + "\n" + format(d.value).replace('.', '!').replace(',', '.').replace('!', ','); });

    ///align vertically???
    node.selectAll("text.nodeValue")
        .attr("x", sankey.nodeWidth() / 2)
        .attr("y", function (d) { return (d.dy / 2) })
        .text(function (d) { return formatNumber(d.value).replace('.', '!').replace(',', '.').replace('!', ','); })
        .attr("dy", 5)
        .attr("text-anchor", "middle");

    node.append("text")
        .attr("class","nodeLabel");

    node.selectAll("text.nodeLabel")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
        .attr("class", function (d) { if (d.categoria === 1) return "titulo"; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

    function dragmove(d) {
        d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
        sankey.relayout();
        link.attr("d", path);
    }
});

package.json

{
  "nodes": [
    {
      "node": 0,
      "name": "MERCEARIA",
      "categoria": 1,
      "xPos": 0
    },
    {
      "node": 5,
      "name": "MERCEARIA",
      "categoria": 1,
      "xPos": 3
    },
    {
      "node": 201,
      "name": "MERC SECA SALG",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 202,
      "name": "MERC SECA DOCE",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 203,
      "name": "LIQUIDA",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 204,
      "name": "PERFUMARIAS",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 205,
      "name": "LIMPEZA",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 226,
      "name": "CONVENIENCIA",
      "categoria": 0,
      "xPos": 1
    },
    {
      "node": 32,
      "name": "32-ALIMENT.COMPLEMENTAR",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 31,
      "name": "31-ALIMENTAÇÃO BÁSICA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 39,
      "name": "39-PEIXARIA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 42,
      "name": "42-PERECIVEIS COMPLEMENT",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 38,
      "name": "38-FLV",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 36,
      "name": "36-FOOD SERVICE",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 99,
      "name": "Sem Classificação Comercial",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 33,
      "name": "33-LÍQUIDA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 43,
      "name": "43-PADARIA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 47,
      "name": "47-CASA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 41,
      "name": "41-LATICINIOS",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 34,
      "name": "34-PERFUMARIA",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 49,
      "name": "49-LAZER",
      "categoria": 0,
      "xPos": 2
    },
    {
      "node": 35,
      "name": "35-LIMPEZA",
      "categoria": 0,
      "xPos": 2
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 201,
      "value": 2.78
    },
    {
      "source": 201,
      "target": 35,
      "value": 0.01
    },
    {
      "source": 35,
      "target": 5,
      "value": 0.01
    },

    {
      "source": 0,
      "target": 202,
      "value": 35
    },
    {
      "source": 0,
      "target": 203,
      "value": 54.90
    },
    {
      "source": 0,
      "target": 204,
      "value": 122.64
    },
    {
      "source": 0,
      "target": 205,
      "value": 23.96
    },
    {
      "source": 0,
      "target": 226,
      "value": 32.90
    },
    {
      "source": 32,
      "target": 5,
      "value": 2.78
    },
    {
      "source": 31,
      "target": 5,
      "value": 3.56
    },
    {
      "source": 39,
      "target": 5,
      "value": 5.89
    },
    {
      "source": 42,
      "target": 5,
      "value": 6.48
    },
    {
      "source": 38,
      "target": 5,
      "value": 15.75
    },
    {
      "source": 36,
      "target": 5,
      "value": 139.75
    },
    {
      "source": 99,
      "target": 5,
      "value": 26.90
    },
    {
      "source": 33,
      "target": 5,
      "value": 23
    },
    {
      "source": 43,
      "target": 5,
      "value": 5.47
    },
    {
      "source": 47,
      "target": 5,
      "value": 23.92
    },
    {
      "source": 41,
      "target": 5,
      "value": 62.40
    },
    {
      "source": 34,
      "target": 5,
      "value": 122.64
    },
    {
      "source": 49,
      "target": 5,
      "value": 4.29
    },
    {
      "source": 35,
      "target": 5,
      "value": 23.96
    }
  ]
}

style.css

body{
    font-family: "Arial";
}
#chart {
    height: 500px;
}

.node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
}

.node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
    font-size: 12px;
}

text.nodeLabel {
    font-size: 10px;
}

.link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
}

.link:hover {
    stroke-opacity: .5;
}
.node text.titulo{
    font-weight: bold;
    font-size: 14px;
}

JointJS – Biblioteca para criação de diagramas JS

jointjs

Surgiu-se a necessidade de criação de diagramas, fui a pesquisa para encontrar alguma ferramenta para auxiliar, como existe vários prontos não é necessário criar a roda.

Encontrei diversos plugins mas nenhum havia me chamado atenção, uma que gostei muito foi o D3.js mas achei muito complicado sui manipulação, muito trabalhoso pra criar exatamente o que queria.

Das que encontrei, me chamaram muito atenção esses plugin:
GoJS – Infelizmente é paga
img_551d33df0354a

JsPlumb – Grátis
img_551d34ebec5c3

mermaid – Grátis
header

A que mais gostei foi JointJS com esse plugin é possível criar diagramas interessante, de um forma simples e poderosa.

A instalação super simples, necessário:

<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

jQuery: 2.0.3
Lodash: 3.10.1
Backbone: 1.2.1

Development version (0.9.5)
joint.js joint.css

Production version (0.9.5)
joint.min.js joint.min.css

Algumas imagens das possibilidades do JointJS.
ivr

traceroutes

rappid-new-showcase

rappid_attack_designer

Introdução ao Kendo UI Core

Estou inicializando a utilização do Kendo UI Core em novos projetos, então eu pensei em documentar o processo que eu uso para obter Kendo UI Core instalado e funcionando.

Passo 1) Baixar
Estarei utilizando o Bower, Gerenciador de pacotes para aplicações web:

$ bower install kendo-ui-core

Você pode baixar por alternativa Kendo UI Core pelo GitHub

Passo 2) HTML
Em seguida vamos criar um index.html e colar o seguinte código HTML:

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>Meu Projeto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.common.core.css">
    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.flat.css">
</head>
<body>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/kendo-ui-core/src/js/kendo.ui.core.js"></script>

</body>
</html>

Etapa 3) Gerenciamento de Pacotes
Vou utilizar a biblioteca RequireJS para gerenciar as dependências do meu aplicativo, e como felizmente Kendo UI Core é inteligentemente dividido em módulos fica mais fácil essa utilização. Para começar vamos baixar RequireJS o que irá manipular quais scripts serão carregados na página que estarei trabalhando vamos utilizar o Bower:

$ bower install requirejs

Em seguida vou criar um arquivo app.js para servir como o principal arquivo JavaScript para meu aplicativo. Neste ponto estrutura de pastas do meu projeto será desta forma:

.
├── bower_components
│   ├── jquery
│   │   └── ...
│   ├── kendo-ui-core
│   │   └── ...
│   └── requirejs
│       └── ...
├── index.html
└── js
    └── app.js

Com esta estrutura vou incluir na minha index.html esta única tag

<script>

:

<script src="bower_components/requirejs/require.js" data-main="js/app"></script>

Em “app.js” vou incluir o seguinte código:

require.config({
    paths: {
        "jquery": "/bower_components/jquery/dist/jquery",
        "kendo-ui-core": "/bower_components/kendo-ui-core/src/js"
    }
});

require([ "jquery", "kendo-ui-core/kendo.ui.core" ], function( $ ) {

});

Isso me dá um ponto de entrada para o meu app que carrega jQuery UI e Kendo Core dinamicamente. Se meu aplicativo precisa apenas de uma uma parte do Kendo UI Core eu só vou especificar os módulos que eu preciso na chamada

require()

. Evitando a chamada total de scripts a não ser utilizando dando uma melhor performance.

Como fazer print screens no Mac OS X Yosemite

osx-yosemite-v2-960x540
command+shift+3: Captura a tela inteira e salva numa imagem no seu Desktop (Mesa), no formato PNG.

command+shift+4: Captura uma parte da tela que você escolhe e seleciona, e salva no seu Desktop. Ao usar esta combinação, o cursor do mouse vira um alvo e você seleciona a área que quer capturar. Você arrasta e quando soltar ele automaticamente captura a tela.

command+shift+4 e depois barra de espaço: Se você usar a combinação anterior (command+shift+4) e em seguida apertar a barra de espaço, o ponteiro do mouse que era um alvo vira uma câmera, e você pode clicar com ela em cima da janela que você quer para capturar somente ela e salvar a imagem no seu Desktop.

qualquer combinação+ctrl: Ao invés de salvar a imagem no Desktop, a imagem fica no clipboard e você pode colar no programa que desejar, sem gerar uma imagem automática.

alterar o formato do arquivo: É possível escolher o formato do arquivo que o print screen gera, pode ser PDF ou PNG. Para alterar esta opção, abra o Terminal e digite o comando

defaults write com.apple.screencapture type pdf

e pressione enter. Desta forma você altera o formato do arquivo para PDF. Para alterar para PNG, basta substituir no comando o pdf por png. Você deve fazer logout ou reiniciar o Mac para que esta alteração passe a valer.

Barra de ferramentas Adobe Photoshop CS3

Vamos em uma sequencia exata de cima para baixo.

Ferramentas Photoshop CS3

ferramentasphotoshopMove (mover camadas)

Esta ferramenta permite que você ande com imagens ou partes dela pela tela de trabalho, ela pode selecionar camadas automaticamente ao clicar em cima ou selecionar manualmente clicando na camada desejada.

Marquee (marcar para recortar com formas)

Esta ferramenta permite que você faça seleções de formas ou auto formas para recorte, serve também para mover uma parte de uma camada ou para selecionar para cópia ou recorte trechos ou camadas completas.

Existem 4 tipos de marquee’s, Quadrado, redondo, linha horizontal e linha vertical.

Ambos necessitam que o mouse crie a sua trajetória de seleção.

Lasso (marcar para recortar manual)

O laço magnético ou simplesmente laço é a ferramenta que permite o recorte de imagens ou partes dela. O laço tem 3 modos de uso, o laço manual onde você vai riscando a tela com o esquerdo pressionado e solta somente quando concluir, o laço por retas, onde você vai clicando e soltando o mouse para contar um objeto e o laço automático, que define a tonalidade do pixel diferente e vai criando uma Sequencia.

Wand (marcar para recortar por pixel)

A varinha mágica, ela tem 2 metodos para uso, ou você usa a varinha que seleciona pela tolerância de pixel ou a varinha que seleciona atraves da forma de um pincel (brush).

Crop (selecionar area para nova camada)

O Crop permite que você selecione uma determinada área na imagem atual e ao clicar duas vezes sobre esta seleção ele automaticamente cria um novo projeto com as medidas e conteúdo daqueles que voce havia recortado.

Slice (recortar para exporter)

O canivete de todo web design, com a ferramenta Slice, você pode recortar imagens inteiras ou partes dela, pode criar um mosaicos de recortes para expotar isso posteriormente a outro programa ou a um arquivo .html por exemplo. O Slice vem com 2 tipos de método, o método linha reta que auto cria réguas visíveis no local recortado e o método que recorta a camada por completa.

Healing Brush (“curativo” corretor)

O corrector ele serve para alterar partes da camada que você esta trabalhando. Não tenho muito conhecimento desta ferramenta, pois o meu conhecimento outro tipo de edição no Photoshop.

Brush (pincel)

Chega a ser um crime falar dos Brushes, quem souber usar um brush corretamente ganha dinheiro facilmente fazendo trabalhos de Design, os Brushes podem ser adicionados, alterados, criados, pode-se entender que os Brushes nada mais são do que pinceis mas com formas e opacidades variadas. 60% dos meus trabalhos levam Brushes automáticos (com imagens)

History Brush (historico do pincel)

Como o próprio nome diz esta ferramenta mantém os efeitos, tamanho, dimensão e tipo de brush utilizado na ultima sentença, sendo assim facilmente aplicado se necessário.

Eraser (borracha)

Esta dispensa comentários, é a simples borracha, no entanto devemos lembrar que todas as ferramentas elas funcionam na camada selecionada.

Bucket (pintar)

Bom aqui nós temos o famoso baldinho de tinta, podemos ou pintar com cor sólida em uma palheta de 2 cores ou então formar um degrade pré-definido ou um degrade com as duas cores da palheta.

Blur (borrar)

O blur é uma ferramenta para borrões, muitos se perguntam por que borrar algo, mas para frente vocês poderão entender por que borramos partes de camadas. O borrão pode ser feito de 3 formas, efeito borrão por água, efeito borrão pela mão e o efeito borrão por um objeto.

Dodge (clareamento)

Esta ferramenta altera o nível de branco de uma imagem/camada. Ela pode deixar uma imagem/camada mais clara ou mais escura, assim como tirar a cor deixando em algo próximo do preto e branco.

Pen (caneta, desenho por paralelas)

A caneta nada mais é do que uma caneta normal, ela pode criar formas para você atrás de padrões pré definidos, criação manual, criação por links (cliques), criação por paralelas e por outras formas. Basicamente a caneta serve apenas para desenhar uma rota ou trajetória, assim como um objeto ou forma. Os efeitos devem ser adicionados posteriormente em “effects” que veremos em uma próxima matéria.

Type (texto, escrita)

Aqui temos as ferramentas para texto, fontes, cores, tamanho, proporção, dimensão, pixel, relevância entre outras funções como alinhamento e posição. Uma ferramenta muito simples de se usar.

Selection (seletor de objeto)

A ferramenta de seleção permite que você selecione partes do seu trabalho, quando se tem um trabalho com muitas camadas, achar tais camadas para agrupar ou para qualquer outro motivo dentre todas elas pode ser algo trabalhoso para quem não se organiza para isso a ferramenta selection permite que você, por exemplo, separe e agrupe todos os brushes, todas as imagens, todas as camadas sem efeitos e assim por diante. Eu particularmente não tenho o costume de usar.

Rectangle (auto forma)

As auto-formas são objetos que podem ser pré definidos pelo próprio programa, ou podem ser adicionadas, assim como desenhadas. Tais auto formas servem para a criação de objetos ou simplesmente para uso de pequenas edições.

Notes (notas)

Estas são pequenas notas as quais você pode adicionar comentários e posicionar sobre o seu trabalho, mesmo um trabalho após finalizado tais notas só se apresentam no arquivo original (.PSD), nos concluídos como .jpeg ou .png, por exemplo, não apresentam os comentários e as notas. É uma ferramenta bem útil para grandes trabalhos ou para trabalhos complicados com muitos efeitos e afins, para que você não se perca no desenvolvimento.

Eyedropper (conta gotas)

Nada de segredo aqui, um conta gotas básico, com 3 funções, sendo elas o conta gotas em si, que vai selecionar a cor do pixel que voce deixou selecionado, a segunda função permite que voce selecione 2 ou mais cores mostrando todas as informações necessárias, tais como RGB, CMYK e as suas variáveis em bits e uma terceira função que cria uma variável de cores através de uma reta, mostrando coordenadas e como a segunda ferramenta com as variáveis de cores.

Hand (mãozinha)

Mesmo que não tenha entendido o uso real desta ferramenta, pelo que sei e posso notar ela apenas libera algumas opções de visualização do seu trabalho, assim como mostra coordenadas da imagem e seletores de cores.

Zoom

Zoom, simplesmente zoom. Pode aumentar ou diminuir, assim como organizar a imagem para o tamanho da tela, deixar no tamanho normal entre outros.

Color’s (paleta de cores)

A paleta de cores pode ser selecionada com duas cores e você alterna entre elas quando necessário, você também pode editar cada tipo de sistema de cor.

Mask (mascara)

Esta ai uma ferramenta que eu não tenho total conhecimento, diria que quase conhecimento nulo. Fazendo o famoso copia e cola, de um outro site qualquer na internet, segue breve descrição da ferramenta.

Quick Mask, ou máscara rápida, no Photoshop, é uma maneira fácil de criar seleções em imagens . Você pinta determinada área da imagem para selecioná-la. Auxilia muito na hora de recortar a imagem.

Screen mode (modos da tela)

Em screen mode você pode organizar a visibilidade da janela de acordo com alguns parâmetros, tais como full screen, sem ferramentas, entre outros. Util para quando você precise trabalhar profissionalmente.

Espero que isto tenha ajudado, em breve monto outras partes do Photoshop, a barra de ferramentas é sim a parte mais importante, mas ela em si não soma 20% do Photoshop.

Fonte: russ4n0.wordpress.com

Como criar um banco de dados no MySQL

Untitled-14
Você pode criar um banco de dados no MySQL em 1 minuto direto na linha de comando – isto depende da velocidade com que você digita. Neste tutorial, vou mostrar como criar um banco de dados e deletar o banco de dados, usando o cliente MySQL.

Comece por abrir um terminal e digitar o comando para entrar no cliente MySQL:

mysql -u root -p
CREATE DATABASE

Para exemplificar, vou mostrar a criação do banco de dados chamado aula. Veja como:

CREATE DATABASE aula;
Isto é o suficiente para criar um banco de dados no MySQL. Experimente criar um outro por conta própria.

ou Inicie o WampServer ou outro Servidor web, no caso do WampServer inicie em Iniciar >> Todos os Programas >> WampServer >> start WampServer64
iniciar

Abra o phpPMyAdmin (O phpMyAdmin é um gerenciador web de banco de dados MySQL), próximo ao relógio acesse o WampServer e clique em phpMyAdmin
wamps

Ao abrir aparecerá no navegador o seguinte endereço:
http://localhost/phpmyadmin

Clique em New, menu esquerdo.
01
Insira no campo o seguinte texto: aula selecione a collection que é responsável pelos caracteres aceitáveis, selecione utf8_general_ci e clique o botão Criar.

Neste momento você acaba de criar um banco de dados pelo phpMyAdmin.

Se quiser ver a relação dos bancos de dados criados use SHOW:

SHOW DATABASES;
Só pra lembrar, os comandos MySQL devem terminar sempre com “;” no final.

Como remover um banco de dados

Este comando não tem volta, é irreversível. Tenha cuidado com o que vai fazer.
Para remover um banco de dados criado use o comando DROP. Veja como:

DROP DATABASE aula;

Removendo utilizando o phpMyAdmin
Selecione primeiramente o banco de dados que queira excluir. Lembrando Este comando não tem volta, é irreversível. Tenha cuidado com o que vai fazer.
aula

Após selecionado click em operações, selecione o link “Apagar a Base de Dados (DROP)”, será aberta uma pergunta de confirmação, se estiver certo clique em ok.
Untitled-4

Conclusão

Agora você já sabe como criar bancos de dados no MySQL, leia outros textos sobre o assunto e aprofunde o seu conhecimento.

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.