<svg width=300 height=200 style="border: 1px solid #ccc">
<path d ='M 0, 0 L 300, 200'
style="stroke: #000">
</path>
</svg>
myData = [0, 10, 5, 20]
{
const width = 500;
const height = 100;
const margin = {top: 10, bottom: 30, left: 10, right: 10}
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height+margin.top+margin.bottom)
const g = svg.apend("g")
.attr("transform", `translate(${margin.left}, ${margin.top}`);
const x = d3.scaleLinear()
.domain([0,3])
.rang([0,width])
const y = d3.scaleLinear().domain(d3.extent(myData))
.domain(d3.extent(myData)).range([height, 0]);
const
}
chart = {
const width = 500;
const height = 300;
const marginTop = 25;
const marginRight = 20;
const marginBottom = 35;
const marginLeft = 40;
const x = d3.scaleUtc()
.domain(d3.extent(appleStockData, d => d.Date)).nice()
.range([0, width]);
const y = d3.scaleLinear()
.domain(d3.extent(appleStockData, d => d.Close)).nice()
.range([height, 0]);
const svg = d3.create("svg")
.attr("width", width + marginLeft + marginRight)
.attr("height", height + marginTop + marginBottom);
const g = svg.append("g")
.attr("transform", `translate(${marginLeft}, ${marginTop})`);
// g.append("g")
// .attr("transform", `translate(0,${height})`)
// .call(d3.axisBottom(x).ticks(width / 80))
// g.append("g")
// .call(d3.axisLeft(y))
g.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.selectAll("circle")
.data(appleStockData)
.join("circle")
.attr("cx", d => x(d.Date))
.attr("cy", d => y(d.Close))
.attr("r", 2);
return svg.node();
}
<svg width=300 height=200>
<rect style=""></rect>
</svg>
{
const width = 500;
const height = 300;
const marginTop = 25;
const marginRight = 20;
const marginBottom = 35;
const marginLeft = 40;
const x = d3.scaleUtc()
.domain(d3.extent(appleStockData, d => d.Date)).nice()
.range([0, width]);
const y = d3.scaleLinear()
.domain(d3.extent(appleStockData, d => d.Close)).nice()
.range([height, 0]);
const svg = d3.create("svg")
.attr("width", width + marginLeft + marginRight)
.attr("height", height + marginTop + marginBottom);
const g = svg.append("g")
.attr("transform", `translate(${marginLeft}, ${marginTop})`);
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).ticks(width / 80))
g.append("g")
.call(d3.axisLeft(y))
g.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("fill", "none")
.selectAll("circle")
.data(appleStockData)
.join("circle")
.attr("cx", d => x(d.Date))
.attr("cy", d => y(d.Close))
.attr("r", 2);
return svg.node();
}
populationData
keys = ["<10", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "≥80"]
stackLayout = d3.stack()
.keys()
{
const width = 900;
const height = 300;
const marginTop = 25;
const marginRight = 20;
const marginBottom = 35;
const marginLeft = 100;
const x = d3.scaleBand()
const y = d3.scaleLinear()
const color = d3.scaleOrdinal()
const svg = d3.create("svg")
.attr("width", width + marginLeft + marginRight)
.attr("height", height + marginTop + marginBottom);
const g = svg.append("g")
.attr("transform", `translate(${marginLeft}, ${marginTop})`);
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
g.append("g")
.call(d3.axisLeft(y))
g.selectAll(".states");
return svg.node();
}
populationData = await FileAttachment("us-population-state-age.csv").csv({typed: true});
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.
