Public
Edited
May 20
1 fork
Insert cell
Insert cell
Insert cell
topo = FileAttachment("chicagoNeighborhoods.json").json()
Insert cell
crimes = FileAttachment("chicago_crimes_april_2025@1.csv").csv({typed: true}).then(function (data) {
// The date has a special formating not automatically detected by d3,
// so we need to parse it using UTC rather than local time
const parseDate = d3.utcParse("%m/%d/%Y %I:%M:%S %p");
data.forEach(function(d) {
d.Date = parseDate(d.Date);
});
return data;
})
Insert cell
Insert cell
Insert cell
{

// Gráfico de barras por tipo de crime

const graficoBarras = vl.markBar() // Definindo o gráfico como de barras

// Configurações iniciais
.title("Number of Crimes by Type")
.data(crimes)

// Definindo as linhas e as colunas
.encode(
vl.x().fieldN("Primary Type"),
vl.y().count(),
vl.color().fieldN("Primary Type")
)

// Definindo as dimensões do gráfico
.width(width * 0.3)
.height(200)

// Gráfico de linhas pelo número de crimes

const graficoLinhas = vl.markLine()

// Configurações iniciais
.title("Number of Crimes by Day")
.data(crimes)

// Definindo os eixos do gráfico
.encode(
vl.x().fieldT("Date").timeUnit("yearmonthdate"),
vl.y().count(),
vl.color().fieldN("Primary Type")
)

// Definindo as dimensões do gráfico
.width(width*0.3)
.height(200)

return vl.hconcat(map_view, vl.vconcat(graficoBarras, graficoLinhas))
.render()

}
Insert cell
Insert cell
// Construção do mapa
map_view = {

// Configurando o mapa de acordo com o arquivochicagoNeighborhoods.json
const mapa = vl.markGeoshape({fill: "#ddd", stroke: "#fff", strokeWidth:1})
.data(vl.topojson(topo).feature("chicago_neighborhoods"))

// Adicionando os pontos de crimes cometidos em Chicago
const pontos = vl.markCircle({size: 30, opacity: 1, stroke: '#000', strokeWidth: 0.3})
.data(crimes)
.encode(
// Definindo os parâmtros do "gráfico" de pontos no mapa
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),

// Colorindo os poontos de acordo com o tipo de crime cometido
vl.color().fieldN("Primary Type").legend({title: 'Crime Type'})
)

// Retornando layer do mapa com os pontos marcados
return vl.layer(mapa, pontos)
.project(
vl.projection("mercator") // Usando a projeção de mercator que é a melhor opção pra chicago
)
// Dimensões da visualização
.width(width*0.3)
.height(400)
}
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more