Published
Edited
Sep 20, 2019
5 forks
4 stars
data = d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv")
cities = d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv", function(d) {
return {
city : d.city,
state : d.state,
population : +d.population,
land_area : +d["land area"]
};
})
dataAutoT = d3.csv("https://cdn.rawgit.com/vlandham/js_data/master/data/cities.csv", d3.autoType)
maxLand = d3.max(cities, d => d.land_area)
minLand = d3.min(cities, d => d.land_area)
md` If you want to get the min and max at the same time, you can use d3.extent`
landExtent = d3.extent(cities, d => d.land_area)
landAvg = d3.mean(cities, d => d.land_area)
landMed = d3.median(cities, d => d.land_area)
landSD = d3.deviation(cities, d => d.land_area)
d3.ascending(4,5)
d3.ascending(5,4)
d3.ascending("Alice", "Bob")
[3, 2, 5, 4, 1].sort(d3.ascending)
"The quick brown fox jumps over the lazy dog".split(" ").sort(d3.ascending)
md` Why not just use sort? Well, because by default it uses alphabetical order by coercing all elements of an array to strings`
[1, 2, 10].sort()
[1, 2, 10].sort((a, b) => a > b)
foods = [
{item: "Soup", votes: 4, emoji: "🍜"},
{item: "Cake", votes: 5, emoji: "🍰"},
{item: "Cabbage", votes: 1, emoji: "🥬"},
{item: "Ice Cream", votes: 4, emoji: "🍦"}
]
md` Let's sort it in descending order by the amount of votes`
expenses = [{"name":"jim","amount":34,"date":"11/12/2015"},
{"name":"carl","amount":120.11,"date":"11/12/2015"},
{"name":"jim","amount":45,"date":"12/01/2015"},
{"name":"stacy","amount":12.00,"date":"01/04/2016"},
{"name":"stacy","amount":34.10,"date":"01/04/2016"},
{"name":"stacy","amount":44.80,"date":"01/05/2016"}
]
expensesByName = d3.nest()
.key(d => d.name)
.entries(expenses)
expensesCount = d3.nest()
.key(d => d.name)
.rollup(v => v.length)
.entries(expenses)
expensesAvgAmount = d3.nest()
.key(d => d.name)
.rollup(v => d3.mean(v, d => d.amount))
.entries(expenses)
expenseMetrics = d3.nest()
.key(d => d.name)
.rollup(v => ({
count: v.length,
total: d3.sum(v, d => d.amount),
avg: d3.mean(v, d => d.amount)
}))
.entries(expenses)
expensesTotal = d3.nest()
.key(d => d.name)
.rollup(v => d3.sum(v, d => d.amount))
.object(expenses)
import {vl} from '@vega/vega-lite-api'
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('Rotten_Tomatoes_Rating').bin(true),
vl.y().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().average('Rotten_Tomatoes_Rating'),
vl.y().fieldN('Major_Genre')
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('IMDB_Rating').bin({maxbins: 20}),
vl.y().count()
)
.render()
vl.markBar()
.data(movies)
.encode(
vl.x().fieldQ('IMDB_Rating').bin({step: bucketSize}),
vl.y().count()
)
.render()
buckets1 = bin1(values1)
import {printTable} from '@uwdata/data-utilities'
import {select_distribution, distribution, randomDistributions, draw_histogram_from_buckets, draw_values, draw_buckets, x, y, max, colors} from "@d3/d3-bin"
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.
