Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer.
Public
Edited
Apr 15, 2024
4 stars
customData = [
{ name: "John", age: 13 },
{ name: "Jane", age: 23 },
{ name: "Dave", age: 33 }
]
FileAttachment("athletes@1.csv").csv()
remoteCSV = d3.csv(
"https://media.githubusercontent.com/media/MuseumofModernArt/collection/main/Artists.csv"
)
remoteJSON = d3.json(
"https://media.githubusercontent.com/media/MuseumofModernArt/collection/main/Artists.json"
)
viewof file = Inputs.file()
viewof csvfile = Inputs.file({label: "CSV file", accept: ".csv", required: true})
csvData = csvfile.csv({ typed: true })
import { alphabet } from "@observablehq/vega-lite-chart-types"
alphabet
database = FileAttachment("chinook.db").sqlite()
database
query
chart = BarChart(data, {chartHeight: 350})
function BarChart(data, {
chartWidth = 800,
chartHeight = 600,
marginTop = 40,
marginBottom = 10,
marginLeft = 120,
marginRight = 20,
barHeight = 25
} = {}) {
const width = chartWidth - marginLeft - marginRight;
const height = chartHeight - marginTop - marginBottom;
// Creates sources <svg> element
const svg = d3.create("svg")
.attr('width', width + marginLeft + marginRight)
.attr('height', height + marginTop + marginBottom);
// Group used to enforce margin
const g = svg.append('g').attr('transform', `translate(${marginLeft},${marginTop})`);
// Render the chart with new data
// DATA JOIN use the key argument for ensurign that the same DOM element is bound to the same data-item
const rect = g.selectAll('rect').data(data).join(
// ENTER
// new elements
(enter) => {
const rect_enter = enter.append('rect').attr('x', 0);
rect_enter.append('title');
return rect_enter;
},
// UPDATE
// update existing elements
(update) => update,
// EXIT
// elements that aren't associated with data
(exit) => exit.remove()
);
// ENTER + UPDATE
// both old and new elements
rect
.attr('height', barHeight)
.attr('width', (d) => d * 7)
.attr('y', (d, i) => i * (barHeight + 5));
rect.select('title').text((d) => `value: ${d}`);
return svg.node();
}
<style>
rect {
fill: steelblue;
fill-opacity: 0.8;
}
rect:hover {
fill-opacity: 1;
}
.axis {
font-size: smaller;
}
</style>
data = [66.38, 21.51, 23.37, 34.17, 36.21]
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.
