Data Visualization Engineer
Public
Edited
Sep 9, 2024
html`<svg width="300" height="150" style="border: 1px solid gray">
<circle cx="50" cy="50" r="10" fill="red"></circle>
</svg>`
<svg width="300" height="200" style="border: 1px solid gray">
<rect x="50" y="50" width="100" height="120" fill="blue"></rect>
</svg>
<svg width="300" height="200" style="border: 1px solid gray">
<line x1="10" y1="10" x2="50" y2="50" stroke="green"></line>
</svg>
<svg width="300" height="200" style="border: 1px solid gray">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="green" stroke-width="2" fill="transparent"/>
</svg>
<svg width="300" height="200" style="border: 1px solid gray">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" fill="red" />
</svg>
<svg width="300" height="100" style="border: 1px solid gray">
<text x="10" y="20" font-weight="bold" fill="red">
svg can also render texts
</text>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" ></circle>
</g>
</svg>
{
const data = [
{name: "Locke", number: 4},
{name: "Reyes", number: 8},
{name: "Ford", number: 15},
{name: "Jarrah", number: 16},
{name: "Shephard", number: 23},
{name: "Kwon", number: 42}
];
const chart = d3.create("div").attr("class", "chart")
const selection = chart.selectAll("div").data(data)
selection.join("div").text(d => d.name)
return chart.node()
}
{
// Hav 6 users initially in the DOM
const usersList = d3.create("div").html(
`<div>User 1</div>
<div>User 2</div>
<div>User 2</div>
<div>User 3</div>
<div>User 4</div>
<div>User 5</div>`
)
const data = [
{name: "Locke", number: 4},
{name: "Reyes", number: 8},
{name: "Ford", number: 15},
];
// Attaching new data, with identification `name`
const selection = usersList.selectAll("div").data(data, d => d?.name)
// Here is where the magic happens
selection.join(
enter => enter.append("div").text(d => d.name), // Add new nodes
update => update.text(d => d.name), // Update existing ones
exit => exit.transition().duration(500).delay(1000).style("color", "red").remove() // Do transition for old elements before removal
)
return usersList.node()
}
xScale = d3.scaleTime()
.domain([new Date(2003, 0, 1), new Date(2023, 0, 1)])
.range([0, chartInnerWidth]).clamp(true)
yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.Price)])
.range([chartInnerHeight, 0]).clamp(true)
{
const svg = d3
.create("svg")
.attr("width", chartDimensions.width)
.attr("height", chartDimensions.height);
const chartGroup = svg
.append("g")
.attr(
"transform",
`translate(${chartDimensions.margin.left}, ${chartDimensions.margin.top})`
);
// Draw y axis
const yAxis = chartGroup.append("g").attr("transform", `translate(${0})`);
yAxis.call(d3.axisLeft(yScale).tickFormat(d3.format("$,")));
// Draw x axis
const xAxis = chartGroup
.append("g")
.attr("transform", `translate(${0},${chartInnerHeight})`);
xAxis.call(d3.axisBottom(xScale));
// Draw area + line
const area = d3
.area()
.x((d) => xScale(new Date(d.Year, 0, 1)))
.y1((d) => yScale(d.Price))
.y0(chartInnerHeight)
.curve(d3.curveCardinal);
const line = d3
.line()
.x((d) => xScale(new Date(d.Year, 0, 1)))
.y((d) => yScale(d.Price))
.curve(d3.curveCardinal);
const areaSelection = chartGroup
.selectAll("path.area")
.data([data])
.join("path")
.attr("d", area)
.attr("class", "area")
.attr("fill", "lightblue");
const lineSelection = chartGroup
.selectAll("path.line")
.data([data])
.join("path")
.attr("d", line)
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", "blue");
return svg.node();
}
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.
