Published
Edited
Oct 11, 2020
Insert cell
md`# Basic bar chart intro`
Insert cell
md `In this lesson we'll walk through making a basic bar chart in four ways: with Google sheets; with Tableau Public; with Vega-Lite javascript; and with D3 javascript. We'll make the same basic chart over so that we can see how different tools approach the same problem.`
Insert cell
md `You can get the Google sheet csv for this lesson [here](https://docs.google.com/spreadsheets/d/1n8NXw3vKfxwX4uAMDbe6xFOwh3vhmpk7Wyj2Q9SpZ4U/edit?usp=copy).`
Insert cell
render_data_table(data)
Insert cell
import {
render_data_table,
table_styles,
displayImage,
displayCaution
} from "@info474/utilities"
Insert cell
md `<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT9gugjQJBvkWnAbczxe4Tdg7EmYpCE2xIeX1IV13nnruUuNEF0Fdtgni7_Ojx-yURZRbo4SOxlGrzj/pubhtml?gid=1355441617&amp;single=true&amp;widget=true&amp;headers=false" height="400px"></iframe>`
Insert cell
md `<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT9gugjQJBvkWnAbczxe4Tdg7EmYpCE2xIeX1IV13nnruUuNEF0Fdtgni7_Ojx-yURZRbo4SOxlGrzj/pubchart?oid=1075079171&amp;format=image" height="400px" width="100%"></iframe>`
Insert cell
data = FileAttachment("data.csv").csv()
Insert cell

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.
Learn more