31:T415,# Visualização de dados com Observable - Principal foco da plataforma - Fontes de dados flexíveis - Formatos CSV, JSON, XLSX - Armazenados no Observable, BD local ou nuvem - Várias bibliotecas de visualização embutidas -

D3 - Vega-lite -

Plot32:T4dc,
## Dados sobre os estados do Brasil Dados originais obtidos do [Wikipedia](https://pt.wikipedia.org/wiki/Unidades_federativas_do_Brasil) editados em uma planilha em formato xlsx. Ver o menu _data_ à direita -> 33:[{"id":"fce0366073be2d35a59c796cc1b6399949e3d48c96342abf004477fd1b2528155ae3295b686f8b451ed4944a38abdd2fdd0e671974551d70c9b0f7a89bbebc97","href":"https://static.observableusercontent.com/files/fce0366073be2d35a59c796cc1b6399949e3d48c96342abf004477fd1b2528155ae3295b686f8b451ed4944a38abdd2fdd0e671974551d70c9b0f7a89bbebc97","name":"Estados Wikipedia.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1662940959751.792,"size":10046}] 2f:{"title":"Visualização de dados com Observable","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"planilha = FileAttachment(\"Estados Wikipedia.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"planilha.sheet(0, { headers: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"// Processamento para uniformizar unidades\ndadosEstados = planilha.sheet(0, { headers: true }).map((d) => ({\n nome: d[\"Unidade federativa\"].split(\" \").slice(1).join(\" \"),\n uf: d[\"Abreviação\"],\n capital: d[\"Sede de governo\"].split(\" \").slice(1).join(\" \"),\n area: +d[\"Área (km²)\"].replaceAll(\" \", \"\").replaceAll(\",\", \".\"),\n populacao: +d[\"População (2014)\"].replaceAll(\" \", \"\"),\n pib: +d[\"PIB (2015)\"].replaceAll(\" \", \"\").replaceAll(\",\", \".\"),\n pib_per_capita: +d[\"PIB per capita (R$) (2015)\"]\n .replace(\" \", \"\")\n .replace(\",\", \".\"),\n idh: d[\"IDH (2010)\"] / 1000,\n alfabetizacao:\n d[\"Alfabetização (2016)\"].replaceAll(\",\", \".\").replaceAll(\"%\", \"\") / 100,\n mortalidade_infantil:\n d[\"Mortalidade infantil (2016)\"].replaceAll(\",\", \".\").replaceAll(\"‰\", \"\") /\n 1000,\n expectativa_vida: +d[\"Expectativa de vida (2016)\"]\n .split(\" \")[0]\n .replaceAll(\",\", \".\")\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"Inputs.table(dadosEstados)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"
\n## Gráfico de barras\n\nDesenhados com Vega-lite e Plot","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"viewof variavelEstado = Inputs.radio(\n [\n \"area\",\n \"populacao\",\n \"pib\",\n \"pib_per_capita\",\n \"alfabetizacao\",\n \"mortalidade_infantil\",\n \"expectativa_vida\"\n ],\n { label: \"Variável\", value: \"populacao\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"vl\n .markBar()\n .data(dadosEstados)\n .encode(\n vl.y().field(\"uf\").sort(vl.fieldQ(variavelEstado)),\n vl.x().fieldQ(variavelEstado)\n )\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"Plot.plot({\n marks: [\n Plot.barX(dadosEstados, {\n fill: \"gray\",\n x: variavelEstado,\n y: \"uf\",\n sort: { y: \"x\" }\n }),\n Plot.frame()\n ],\n width: 450\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"
\n## Dados para mapa do Brasil\n\nPolígonos lidos a partir de um arquivo em formato TopoJSON\narmazenado no GitHub. Obrigado [Ronie Uliana!](https://github.com/ruliana)","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"topojsonBrasil = fetch(\n \"https://gist.githubusercontent.com/ruliana/1ccaaab05ea113b0dff3b22be3b4d637/raw/196c0332d38cb935cfca227d28f7cecfa70b412e/br-states.json\"\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"geojsonEstados = {\n const geojson = topojson.feature(\n topojsonBrasil,\n topojsonBrasil.objects.estados\n );\n geojson.features.forEach((d) => {\n let [x, y] = d3.geoCentroid(d);\n Object.assign(d.properties, { lon: x, lat: y });\n });\n return geojson;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"// Biblioteca TopoJSON\ntopojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"
\n## Mapa do Brasil \n\nDesenhado com vega-lite","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"map = vl\n .layer(\n vl\n .markGeoshape({ fill: \"lightgray\", stroke: \"white\", strokeWidth: 1 })\n .data(geojsonEstados.features),\n vl\n .markText({ fill: \"black\" })\n .data(geojsonEstados.features.map((d) => d))\n .encode(\n vl.longitude().fieldQ(\"properties.lon\"),\n vl.latitude().fieldQ(\"properties.lat\"),\n vl.text().fieldN(\"id\")\n )\n )\n .project(vl.projection(\"mercator\"))\n .height(400)\n .width(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"
\n## Gráfico de dispersão IDH x Mortalidade Infantil\n\nDesenhado com Plot","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"Plot.plot({\n marks: [\n Plot.dot(dadosEstados, {\n fill: \"gray\",\n x: \"idh\",\n y: \"mortalidade_infantil\",\n title: \"nome\"\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}