The avatar for @marcosborges1
marcosborges1
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

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.
Learn more