Published
Edited
Jul 24, 2020
Insert cell
md`# Machine Learning`
Insert cell
dataset = d3.csv("https://gist.githubusercontent.com/marcosborges1/c4f2c033fa10ea52d6680227cc28d9c9/raw/f49c749a1f8e56f2971f9be9bf98cbd82fcf36da/base_ML").then(data=> {
const min = 18, max = 50
data.map(d => {
d.num = +d.num
d.sexo = d.num==0 ? "masculino":"feminino"
d.idade = Math.floor(Math.random() * (max - min + 1) ) + min;
d.avaliacao = d.num==0 ? 1:0
// console.log(d.cria)
d.criacao = new Date(Date.parse(d.criacao.substr(0,19)+ " 2020"))
})
return data
})
Insert cell
"Tue Jun 00 00:29:20 +0000 2020".substr(0,19) + " 2020"
Insert cell
facts = crossfilter(dataset)
Insert cell
stateDimension = facts.dimension(d => d.estado)
Insert cell
stateDimensionCount = stateDimension.group()
Insert cell
hourDimension = facts.dimension(d => d3.timeHour(d.criacao))
Insert cell
textScale = d3.scaleLinear()
.domain([0, 80])
Insert cell
primaryTypeValues = {
let arrayPrimaryType = []
return dataset.map(d=> d["estado"]).reduce((x,y) => {
if(!arrayPrimaryType.includes(y)) {
arrayPrimaryType.push(y)
}
return arrayPrimaryType.sort()
})
}
Insert cell
primaryTypeScale = d3.scaleOrdinal()
.domain(primaryTypeValues)
Insert cell
colorScale = d3.scaleOrdinal()
.domain(primaryTypeValues)
.range(["#fdae61", "#ca0020", "#0571b0", "#333", "green", "purple"])
Insert cell
timeDimension = facts.dimension(d => [d3.timeDay(d["criacao"]), d["estado"]])
Insert cell
timeDimensionScale = d3.scaleTime()
.domain(d3.extent(dataset,d=>d3.timeDay(d["criacao"])))
Insert cell
timeDimensionCount = timeDimension.group().reduceCount()
Insert cell
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(stateDimension)
.group(stateDimensionCount)
.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) {console.log(d.key); 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
}
Insert cell
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>
`;
}
Insert cell
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
Insert cell
dc = require('dc')
Insert cell
crossfilter = require('crossfilter2')
Insert cell
d3 = require('d3')
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