Public
Edited
Apr 23, 2020
data = d3.csvParse(await FileAttachment("temperature.csv").text(), d3.autoType)
d3.extent(data, d => d.date)
d3.extent(data, d=> d.temperature)
temperatures = data.map(d => d.temperature)
sum = {
let s = 0;
for (let i =0; i<11; ++i){
s += i;
}
return s;
}
import {chart as temphistogram} with { data as temperatures} from "@d3/histogram"
temphistogram
md`## D3: Scales`
fruits = [
{name: "🍊", count: 21},
{name: "🍇", count: 13},
{name: "🍏", count: 8},
{name: "🍌", count: 5},
{name: "🍐", count: 3},
{name: "🍋", count: 2},
{name: "🍎", count: 1},
{name: "🍉", count: 1}
]
fruits.map(f => f.name) // Quanititative dimension
fruits.map(f => f.count) // Nominal dimension
tex`Scale: Dimension_{abstract} \to Variable_{visual}`
x = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin.left, width-margin.right])
.interpolate(d3.interpolateRound)
[x.domain(), x.range()]
y = d3.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
svg`<svg>
<rect x="10" y="10" width="100" height="100" fill="steelblue" />
</svg>`
viewof count = {
const form = html`<form style="font: 12px var(--sans-serif); display: flex; align-items: center; min-height: 33px">
<label style="display:block;">
<input name="input" type="range" min="0" max="21" value="12" step="1" style="width: 180px;">
count = <output name="output"></output>
</label>
</form>`;
form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;
form.oninput();
return form;
}
html`<svg viewBox="0 0 ${width} 33" style="max-width: ${width}px; font: 10px sans-serif; display: block;">
<rect fill="steelblue" x="${x(0)}" width="${x(count) - x(0)}" height="33"></rect>
<text fill="white" text-anchor="end" x="${x(count)}" dx="-6" dy="21">${count}</text>
</svg>`
svg`<svg>
<rect x="10" y="10" width="100" height="100" fill="pink" />
</svg>`
d3.create('svg')
.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', 100)
.attr("height", 100)
.attr("fill", "red")
.node()
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const rect = svg.append('rect')
const rect2 = svg.append('rect')
rect.attr("x", "30")
.attr("y", "30")
.attr("width", "100")
.attr("height", "100")
.attr("fill", "red")
rect2.attr("x", "45")
.attr("y", "45")
.attr("width", "100")
.attr("height", "100")
.attr("fill", "pink")
return svg.node();
}
svg`<svg>
<rect x="10" y="10" width="100" height="100" fill="steelblue" />
</svg>`
svg
{
const margin = ({top: 30, right:30, bottom: 30, left: 30});
const barId = DOM.uid("bar");
const arrowId = DOM.uid("arrow");
const svgContainer = d3.create('svg')
.attr("viewBox", "0 0 ${width} ${height}")
.style("max-width", "${width}px")
.style("font", "10px sans-serif")
.style("overflow", "visible");
const defsContainer = svgContainer.append('defs');
const make_marker = (id) => {
const mcontainer = defsContainer.append("marker")
if (id===barId.id){
mcontainer.attr("id",id)
.attr("viewBox", "-5 -5 10 10")
.attr("markerWidth", "6")
.attr("markerHeight", "6")
.attr("orient", "auto")
const path = mcontainer.append("path");
path.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "1.5")
.attr("d", "M0,5v-10")
}else{
mcontainer.attr("id", id)
.attr("viewBox", "0 0 10 10")
.attr("refx", "10")
.attr("refy", "5")
.attr("markerWidth", "6")
.attr("markerHeight", "6")
.attr("orient", "auto")
const path = mcontainer.append("path");
path.attr("d", "M0,0L10,5L010z")
}
return mcontainer;
}
make_marker(barId.id);
make_marker(arrowId.id);
const rect = svgContainer.append('rect');
rect.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-dasharray", "1,2")
.attr("height", height)
.attr("width", width)
return svgContainer.node()
}
d3 = require("d3@5")
height = 202
width = 640
margin = ({top:20, right:0, bottom:0, left:30})
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.
