Public
Edited
Jul 2
1 fork
width = 1000
height = 500
arrayBemAvaliados = Array.from(
d3.rollup(
bemAvaliados,
v => new Set(v.map(d => d.app_id)).size,
d => d.country
),
([country, game_count]) => ({country, game_count})
)
arrayMaisvendidos = Array.from(
d3.rollup(
maisVendidos,
v => new Set(v.map(d => d.app_id)).size,
d => d.country
),
([country, game_count]) => ({country, game_count})
)
mapaMaisVendidos = vl
.markGeoshape({ stroke: '#aaa', strokeWidth: 0.25 })
.data(vl.topojson(world).feature('countries'))
.transform(
vl.lookup('properties.name')
.from(vl.data(arrayMaisvendidos).key('country').fields(['game_count']))
.default(0.01)
)
.project(vl.projection('naturalEarth1'))
.width(width/2)
.height(height/2)
.title("Mapa dos jogos mais vendidos")
.encode(
vl.color()
.field('game_count')
.type('quantitative')
.title('Jogos únicos por país')
.scale({
domain: [0, 5, d3.max(arrayMaisvendidos, d => d.game_count)],
range: ['#eeeeee', '#9966cc', '#49006a']
}),
vl.tooltip([
{ field: 'properties.name', type: 'nominal', title: 'País' },
{ field: 'game_count', type: 'quantitative', title: 'Quantidade', format: "d" }
])
)
mapaBemAvaliados = vl
.markGeoshape({ stroke: '#aaa', strokeWidth: 0.25 })
.data(vl.topojson(world).feature('countries'))
.transform(
vl.lookup('properties.name')
.from(vl.data(arrayBemAvaliados).key('country').fields(['game_count']))
.default(0.01)
)
.project(vl.projection('naturalEarth1'))
.width(width/2)
.height(height/2)
.title("Mapa dos jogos mais bem avaliados")
.encode(
vl.color()
.field('game_count')
.type('quantitative')
.title('Jogos únicos por país')
.scale({
domain: [0, 1, d3.max(arrayBemAvaliados, d => d.game_count)],
range: ['#eeeeee', '#9966cc', '#49006a']
}),
vl.tooltip([
{ field: 'properties.name', type: 'nominal', title: 'País' },
{ field: 'game_count', type: 'quantitative', title: 'Quantidade de jogos', format: "d" }
])
)
vl.vconcat(mapaBemAvaliados,mapaMaisVendidos).render()
barrasBemAval = vl.markBar()
.title("Distribuição de preço dos jogos mais bem avaliados")
.data(bemAvaliados)
.width(width*0.4)
.height(200)
.encode(
vl.x().fieldQ('price_usd').bin({maxbins: 10}).title('Faixa de preço'),
vl.y().aggregate('distinct').field('app_id').title('Apps distintos'),
vl.tooltip([{field: 'app_id',
aggregate: 'distinct',
type: 'quantitative',
title: 'Quantidade de jogos'}]))
barrasMaisVend = vl.markBar()
.title("Distribuição de preço dos jogos mais vendidos")
.data(maisVendidos)
.width(width*0.4)
.height(200)
.encode(
vl.x().fieldQ('price_usd').bin({maxbins: 10}).title('Faixa de preço'),
vl.y().aggregate('distinct').field('app_id').title('Apps distintos'),
vl.tooltip([{field: 'app_id',
aggregate: 'distinct',
type: 'quantitative',
title: 'Quantidade de jogos'}]))
vl.hconcat(barrasBemAval, barrasMaisVend).render()
world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json");
bemAvaliados = FileAttachment("bemAvaliadosCleanGen_withCountry.csv").csv({typed:true})
maisVendidos = FileAttachment("maisVendidosCleanGen_withCountry.csv").csv({typed:true})
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.
