Public
Edited
Feb 16, 2023
imdb_top_1000.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = (await FileAttachment("imdb_top_1000.csv").csv({type: true}))
.map(({Released_Year, ...d}) => ({...d, year: new Date(Released_Year)})) // coerce dates
.sort((a, b) => d3.descending(a.year, b.year)) // chronological
.sort((a, b) => d3.descending(a.IMDB_Rating, b.IMDB_Rating))
.map((d, i) => (d.index = i, d)) // add an index.
Plot.image(movies.slice(0, 10), {x: "index", src: "url", preserveAspectRatio: "xMidYMid meet", height: 100}).plot({height: 150, width:800, inset: 40})
numberOfSquares
viewof numberOfSquares = html`<input type=range value=100 min=5 max=300>`
squareSize
viewof squareSize = html`<input type=range value=50 min=30 max=150>`
numOfColumns
viewof numOfColumns = html`<input type=range min=0 max=20 value=0 step=2>`
number = d3.range(numberOfSquares)
gridModulo(number, {
columnLength: numOfColumns,
squareSize: squareSize
})
import {gridModulo} from "@eesur/modulo-operation-to-create-a-grid-v2"
chart = {// Select your div
const waffle = d3.select('.waffle');
// Create an array with numbers 0 - 99
const numbers = d3.range(100);
// For each item in the array, add a div element
// if the number is < 5, color it red, otherwise gray
waffle
.selectAll('.block')
.data(numbers)
.enter()
.append('div')
.attr('class', 'block')
.style('background-color', d => (d < 5 ? '#FE4A49' : '#CCCCCC'));
}
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.
