Published
Edited
Dec 17, 2020
1 star
Insert cell
md`
# Знакомство с ObservableHQ
## Data курс 2020`
Insert cell
`Привет, мир. Факториал ${fact}`
Insert cell
html`<h1>Заголовк HTML</h1>`
Insert cell
md`
## Привет!
**полужирное начертание**
*фыввфы*

Список
* первый
* второй
`
Insert cell
5 + 6
Insert cell
a = 100

Insert cell
b = 125
Insert cell
sum = a + b
Insert cell
number = sum - 220
Insert cell
fact = {
let res = 1;
for(let i = 1; i < number; i++) {
res = res * i;
}
return res;
}
Insert cell
fact
Insert cell
html`Результат вычисления факториала от ${number} равен ${fact}`
// Python style f'Результат вычисления факториала от {number} равен {fact}'
Insert cell
import { chart } from '@d3/bar-chart-race-explained'
Insert cell
chart
Insert cell
myData = [
{name: 'a', value: 12},
{name: 'c', value: 15},
{name: 'b', value: 25},
{name: 'd', value: 11},
{name: 'e', value: 2},
{name: 'f', value: userValue},
]
Insert cell
import {chart as barChart} with {myData as data} from '@d3/bar-chart'
Insert cell
barChart
Insert cell
viewof userValue = html`<input type="number" value="0">`
Insert cell
userValue
Insert cell
// import {} with {} from ''
// html`<input type="number" value="0">`
// viewof
// ceelName = {}
Insert cell
rockConcertsResponse = fetch('https://raw.githubusercontent.com/algolia/datasets/master/concerts/alternative_rock_artists.json')
Insert cell
rockConcerts = rockConcertsResponse.json()
Insert cell
_ = require('lodash')
Insert cell
rockConcertsGrouping = _.chain(rockConcerts)
.countBy(concert => concert.name)
.entries()
.orderBy(([name, count]) => count, 'desc')
.map(([name, count]) => ({name, value: count}))
.take(10)
.value()

Insert cell
import {chart as rockBarChart} with {rockConcertsGrouping as data} from '@d3/bar-chart'
Insert cell
rockBarChart
Insert cell
users = FileAttachment("users.json").json()
Insert cell
idToNameMap = new Map(_.map(users, ({id, first_name, last_name}) => ([id, `${first_name} ${last_name}`])))
Insert cell
graphData = ({
nodes: _.chain(users)
// Деструктурирование объектов и массивов (параметров функций) в JS
.map(({id, sex}) => ({id: idToNameMap.get(id), group: sex}))
.value(),
links: _.chain(users)
.map(user => user.friends_ids.map(friendId => [user.id, friendId]))
.flatten()
.map(([sourceId, targetId]) => [idToNameMap.get(sourceId), idToNameMap.get(targetId)])
.map(([source, target]) => ({source, target, value: 1}))
.value()
})
Insert cell
import { chart as graph} with {graphData as data} from '@d3/force-directed-graph'
Insert cell
graph
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