primaryTypeDimension = facts.dimension(d => d["Primary Type"])
// sua função que desenha a visualização deve ficar aqui
dataset = d3.csv("https://gist.githubusercontent.com/emanueles/108e0bd5993d5b9ddcddad49387cb2ea/raw/90de2bbea703504c94179fd63140e50e888ed862/chicago_crimes_april_2020.csv").then((data)=> {
data.forEach(function(d) {
d.Date = new Date(d["Date"])
})
return data
})
facts = crossfilter(dataset)
primaryTypeDimensionCount = primaryTypeDimension.group()
primaryTypeScale = d3.scaleOrdinal()
.domain(primaryTypeValues)
primaryTypeValues = {
let arrayPrimaryType = []
return dataset.map(d=> d["Primary Type"]).reduce((x,y) => {
if(!arrayPrimaryType.includes(y)) {
arrayPrimaryType.push(y)
}
return arrayPrimaryType.sort()
})
}
timeDimension = facts.dimension(d => [d3.timeDay(d["Date"]), d["Primary Type"]])
timeDimensionCount = timeDimension.group().reduceCount()
timeDimensionScale = d3.scaleTime()
.domain(d3.extent(dataset,d=>d3.timeDay(d["Date"])))
colorScale = d3.scaleOrdinal()
.domain(primaryTypeValues)
.range(["#fdae61", "#ca0020", "#0571b0"])
map = {
buildvis;
let mapInstance = L.map('mapid').setView([+41.8,-87.7], 10)
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/">OpenStreetMap</a>contributors',
maxZoom: 17
}).addTo(mapInstance)
return mapInstance
}
circlesLayer = L.layerGroup().addTo(map)
circles = {
circlesLayer.clearLayers()
dataset.forEach( function(d) {
//Set colors by Primary Type
let color = ""
if(d["Primary Type"] == "BURGLARY") color = '#fdae61'
else if(d["Primary Type"] == "HOMICIDE") color = '#ca0020'
else color = "#0571b0"
let circle = L.circle([d.Latitude, d.Longitude], circleScale(1), {
color: color,
weight: 2,
fillColor: color,
fillOpacity: 0.5
})
circlesLayer.addLayer(circle)
//Set Message
let formattedDate = formatTime(d.Date)
let message = `Type: ${d['Primary Type']}<br/>Date: ${formattedDate}<br/>Description: ${d.Description}`
circle.bindPopup(message)
})
}
circleScale = d3.scaleLinear()
.domain([0, 1])
.range([0, 100])
formatTime = d3.timeFormat("%Y/%m/%d %H:%I");
buildvis = {
let view = md`${container()}`
let barChart = dc.barChart(view.querySelector('#bar-chart'))
let timeChart = dc.seriesChart(view.querySelector('#time-chart'))
barChart.width(450)
.height(180)
.margins({top:10, right: 20, bottom:20, left:30})
.x(primaryTypeScale)
.xUnits(dc.units.ordinal)
.gap(40)
.dimension(primaryTypeDimension)
.group(primaryTypeDimensionCount)
.elasticY(true)
.renderHorizontalGridLines(true)
.barPadding(0.3)
.outerPadding(0.05)
.colors(colorScale)
.colorAccessor(d => d.key)
barChart.render()
timeChart.width(420)
.height(220)
.margins({top:10, right: 20, bottom:40, left:30})
.chart(function(c) { return new dc.LineChart(c); })
.x(timeDimensionScale)
.brushOn(false)
.yAxisLabel("Measured Speed km/s")
.xAxisLabel("Run")
.clipPadding(10)
.elasticY(true)
.dimension(timeDimension)
.group(timeDimensionCount)
.yAxisLabel("Number of crimes")
.xAxisLabel("Time")
.mouseZoomable(true)
.seriesAccessor(function(d) {return d.key[1];})
.keyAccessor(function(d) {return +d.key[0];})
.valueAccessor(function(d) {return +d.value;})
.colors(colorScale)
.colorAccessor(d => d.key)
.xAxis().ticks(4)
timeChart.render();
return view
}
barChart = new dc.SeriesChart("#bar-chart");
function container() {
return `
<main role="main" class="container">
<div class="row">
<h3> Crimes in Chicago in April of 2020</h3>
</div>
<div class='row'>
<div id="mapid" class="col-6">
</div>
<div class = "col-6">
<div id='bar-chart'>
<h5>Number of Crimes by Type</h5>
</div>
<div id='time-chart'>
<h5> Number of Crimes by Day </h5>
</div>
</div>
</div>
<p>Crime data via <a href="https://data.cityofchicago.org/Public-Safety/Crimes-2001-to-present/ijzp-q8t2">Chicago Data Portal</a>.</p>
</main>
`;
}
html`<code>css</code> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@4/dist/style/dc.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<style>
#mapid {
width: 300px;
height: 450px;
}
</style>`
L = require("leaflet@1.6.0")
d3 = require('d3')
crossfilter = require('crossfilter2')
dc = require('dc')
bootstrap = require('bootstrap')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.