Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
Sep 23, 2019
33 forks
1 star
dataset = d3.csv("https://gist.githubusercontent.com/emanueles/d8df8d875edda71aa2e2365fae2ce225/raw/1e949d3da02ed6caa21fe3a7a12a4e5a611a4bab/stocks.csv").then(function(data){
// formatando nossos dados
let parseDate = d3.timeParse("%Y/%m/%d")
data.forEach(function(d,i){
d.date = parseDate(d.date)
d.google = +d.google
d.facebook = +d.facebook
})
return data
})
facts = crossfilter(dataset)
dateDim = facts.dimension( d => d.date)
googleDim = facts.dimension( d => d.google)
topTenGoogle = googleDim.top(10)
bottomTenGoogle = googleDim.bottom(10)
googleByDayGroup = dateDim.group().reduceSum(d => d.google)
fbByDayGroup = dateDim.group().reduceSum(d => d.facebook)
function container(id, title) {
return `
<div class='container'>
<div class='content'>
<div class='container'>
<div class='row'>
<div class='span12' id='${id}'>
<h4>${title}</h4>
</div>
</div>
</div>
</div>
</div>`
}
buildvis = {
let view = md`${container('chart','Valores das ações do Google')}`
let lineChart = dc.lineChart(view.querySelector("#chart"))
let xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
lineChart.width(800)
.height(400)
.dimension(dateDim)
.margins({top: 30, right: 50, bottom: 25, left: 40})
.renderArea(false)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(680).y(10).itemHeight(13).gap(5))
.brushOn(false)
.group(googleByDayGroup, 'Google')
dc.renderAll()
return view
}
buildcomposite = {
let view = md`${container('chart2', 'Valores das ações do Google e do Facebook')}`
let compositeChart = dc.compositeChart(view.querySelector("#chart2"))
let xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
compositeChart.width(800)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(700).y(5).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(compositeChart)
.group(googleByDayGroup, 'Google')
.ordinalColors(['steelblue']),
dc.lineChart(compositeChart)
.group(fbByDayGroup, 'Facebook')
.ordinalColors(['darkorange'])])
dc.renderAll()
return view
}
dc = require("dc")
crossfilter = require("crossfilter2")
d3 = require("d3")
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.
