Published
Edited
Jul 30, 2019
1 fork
20 stars
chart = d3.create("svg")
.attr("width", width)
.attr("height", height)
.call(xAxis)
.call(yAxis)
.call(title)
.call(maple)
.call(oak)
.call(point)
.node()
margin = ({
top: 20,
right: 20,
bottom: 30,
left: 40
});
width = 960
height = 500
x = d3.scaleLinear()
.domain([0, d3.max(data, d => {
return d.coordinates[0];
})]).nice()
.range([margin.left, width - margin.right]);
y = d3.scaleLinear()
.domain([0, d3.max(data, d => {
return d.coordinates[1];
})]).nice()
.range([height - margin.bottom, margin.top]);
xAxis = svg => svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
yAxis = svg => svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
title = svg => svg.append("text")
.attr("x", (width / 2))
.attr("y", 10 + (margin.top / 2))
.attr("text-anchor", "middle")
.text("Maple and Oak Leaves on a Scatterplot");
maple = svg => svg.append('defs')
.append('pattern')
.attr('id', 'maple-pattern')
.attr('patternUnits', 'objectBoundingBox')
.attr('width', 10)
.attr('height', 10)
// Append svg to pattern
.append('svg')
.attr('x', 0)
.attr('y', 0)
.attr('width', 25)
.attr('height', 25)
.append(() => mapleSvg.documentElement.cloneNode(true))
oak = svg => svg.append('defs')
.append('pattern')
.attr('id', 'oak-pattern')
.attr('patternUnits', 'objectBoundingBox')
.attr('width', 10)
.attr('height', 10)
// Append svg to pattern
.append('svg')
.attr('class', "oak")
.attr('x', 0)
.attr('y', 0)
.attr('width', 20)
.attr('height', 20)
.append(() => oakSvg.documentElement.cloneNode(true));
point = svg => svg.append("g")
.selectAll(".point")
.data(data)
.enter().append("path")
.attr("class", "point")
.attr("d", d3.symbol().size(575).type(d3.symbolSquare))
.attr("transform", d => {
return "translate(" + x(d.coordinates[0]) + "," + y(d.coordinates[1]) + ")";
})
.style('fill', function(d) {
if (d.label === "maple") {
return `url(${location}#maple-pattern)`
} else if (d.label === "oak") {
return `url(${location}#oak-pattern)`
} else {
return "gray"
};
});
mapleSvg = d3.xml('https://s3.amazonaws.com/files.zevross.org/blog/d3_external_svgs/load_svg/leaves/maple_illustration.svg')
oakSvg = d3.xml('https://s3.amazonaws.com/files.zevross.org/blog/d3_external_svgs/load_svg/leaves/oak_illustration.svg')
data = [{
label: "oak",
coordinates: [5, 20]
},
{
label: "oak",
coordinates: [15, 200]
},
{
label: "oak",
coordinates: [70, 57]
},
{
label: "oak",
coordinates: [100, 2]
},
{
label: "oak",
coordinates: [3, 3]
},
{
label: "maple",
coordinates: [120, 14]
},
{
label: "maple",
coordinates: [6, 8]
},
{
label: "maple",
coordinates: [67, 19]
},
{
label: "maple",
coordinates: [37, 9]
}
];
d3 = require("d3@5")
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.
