Public
Edited
May 16
A visualização está no final, na penúltima célula
topo = FileAttachment("chicagoNeighborhoods.json").json()
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;
})
crimes[0]
vl.markGeoshape({fill: "#ddd" , stroke : "#fff" , strokeWidth:1})
.data(vl.topojson(topo)
.feature('chicago_neighborhoods')
)
.render()
map_view = {
const map = vl.markGeoshape({fill: "#ddd" , stroke : "#fff" , strokeWidth:1})
.data(vl.topojson(topo)
.feature('chicago_neighborhoods')
)
const circles = vl.markCircle({
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 0.7
})
.data(crimes)
.encode(
vl.latitude().fieldQ('Latitude'),
vl.longitude().fieldQ('Longitude'),
vl.color().fieldN('Primary Type').legend({title:'Crime type'})
//.scale({type:'pow', range:[0,700]}).legend({title: 'Magnitude'})
)
return vl.layer(map,circles)
.project
(vl.projection('transverseMercator')
.rotate([87.65, -41.85]).
translate(width*0.25 , 250).scale(50000))
.width(width*0.40)
.height(500)
//.render()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
bar_view = {
return vl.markBar()
.data(crimes)
.encode(
vl.x().fieldN('Primary Type').sort('-y').axis({labelAngle: 0}),
vl.y().aggregate('count').title('Quantidade'),
vl.color().fieldN('Primary Type').legend(null),
)
.title('Number of crimes by type')
.width(width * 0.40)
.height(300)
//.render()
}
line_view = {
return vl.markLine()
.data(crimes)
.encode(
vl.x().fieldT('Date').timeUnit('yearmonthdate').title('Date'),
vl.y().aggregate('count').title('Total of crimes'),
vl.color().fieldN('Primary Type').title('Crime type')
)
.width(width * 0.4)
.height(300)
.title("Total of crimes per day")
//.render()
}
vl.hconcat(vl.vconcat(bar_view,line_view),map_view)
.resolve({scale: {color:'independent'}})
.title({text: 'Crimes in Chicago, April 2025',
fontSize: 24, })
.render()
import {vl} from '@vega/vega-lite-api-v5'
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.
