Published
Edited
Feb 21, 2018
2 stars
Insert cell
Insert cell
d3 = require("https://d3js.org/d3.v5.min.js")
Insert cell
Insert cell
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
// attach the iris dataset to circles
const circles = d3.select(svg)
.selectAll('circle')
.data(data)
.enter()
.append('circle');
return circles;
//return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
//create functions that get sepal and petal values
//const xValue = d => d.sepalLength;
//const yValue = d => d.petalLength;
// attach the iris dataset to circles
const circles = d3.select(svg)
.selectAll('circle')
.data(data)
.enter()
.append('circle')
circles.attr('cx', 5)
.attr('cy', 10)
.attr('r', 5)
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
// attach the iris dataset to circles
const circles = d3.select(svg)
.selectAll('circle')
.data(data)
.enter()
.append('circle')
circles
.attr('cx', d=>xValue(d)) // call the functions to get sepal and petal lengths
.attr('cy', d=>yValue(d))
.attr('r', 5)
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
//define couple of linear scales
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
//Let's give these scales a domain (actual values) and a range (plotted values)
xScale
.domain(d3.extent(data, xValue)) //d3.extent captures the min. & max from a set of values
.range([0, w]); // map the sepalLength values in dataset to full width of svg

yScale
.domain(d3.extent(data, yValue))
.range([h, 0]); // map the petalLength values in dataset to full height of svg
// attach the iris dataset to circles
const circles = d3.select(svg)
.selectAll('circle')
.data(data)
.enter()
.append('circle')
// provide attributes to our circles.
circles
.attr('cx', d=>xScale(xValue(d))) // Use the scales to conver the original values
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 256;
const svg = DOM.svg(w,h);
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
//define couple of linear scales
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
//Let's give these scales a domain (actual values) and a range (plotted values)
xScale
.domain(d3.extent(data, xValue)) //d3.extent captures the min. & max from a set of values
.range([0, w]); // map the sepalLength values in dataset to full width of svg

yScale
.domain(d3.extent(data, yValue))
.range([h, 0]); // map the petalLength values in dataset to full height of svg
// attach the iris dataset to circles
const circles = d3.select(svg)
.selectAll('circle')
.data(data)
.enter()
.append('circle')
// provide attributes to our circles.
circles
.attr('cx', d=>xScale(xValue(d))) // Use the scales to conver the original values
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
.attr('fill', 'maroon')
.attr('opacity', 0.7)
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 300;
const svg = DOM.svg(w,h);
// Margin object with four properties
const margin = {top: 20, right: 20, bottom: 20, left: 30}
//create innerWidth and innerHeight for our margin
const innerW = w - margin.right - margin.left;
const innerH = h- margin.top - margin.bottom;
// append a g element to our svg and give it a new origin inside svg
const g = d3.select(svg).append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
//define couple of linear scales
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
//Let's give these scales a domain (actual values) and a range (plotted values)
xScale
.domain(d3.extent(data, xValue)) //d3.extent captures the min. & max from a set of values
.range([0, innerW]); // map the sepalLength values in dataset to full width of svg

yScale
.domain(d3.extent(data, yValue))
.range([innerH, 0]); // map the petalLength values in dataset to full height of svg
// append circles to our g element and attach the iris dataset to them
const circles = g
.selectAll('circle')
.data(data)
.enter()
.append('circle')
// provide attributes to our circles.
circles
.attr('cx', d=>xScale(xValue(d))) // Use the scales to conver the original values
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
.attr('fill', 'maroon')
.attr('opacity', 0.7)
return svg
}
Insert cell
Insert cell
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 300;
const svg = DOM.svg(w,h);
// Margin object with four properties
const margin = {top: 20, right: 20, bottom: 20, left: 30}
//create innerWidth and innerHeight for our margin
const innerW = w - margin.right - margin.left;
const innerH = h- margin.top - margin.bottom;
// append a g element to our svg and give it a new origin inside svg
const g = d3.select(svg).append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// create group elements for our axes
const xAxisG = g.append('g')
.attr('transform', "translate(0," + innerH + ")");

const yAxisG = g.append('g');
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
//define couple of linear scales
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale);
//Let's give these scales a domain (actual values) and a range (plotted values)
xScale
.domain(d3.extent(data, xValue)) //d3.extent captures the min. & max from a set of values
.range([0, innerW]); // map the sepalLength values in dataset to full width of svg

yScale
.domain(d3.extent(data, yValue))
.range([innerH, 0]); // map the petalLength values in dataset to full height of svg
// append circles to our g element and attach the iris dataset to them
const circles = g
.selectAll('circle')
.data(data)
.enter()
.append('circle')
// provide attributes to our circles.
circles
.attr('cx', d=>xScale(xValue(d))) // Use the scales to conver the original values
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
.attr('fill', 'maroon')
.attr('opacity', 0.7)
xAxisG.call(xAxis)
yAxisG.call(yAxis)
return svg
}
Insert cell
Insert cell
{
// defining width and height
const w = 400;
const h = 300;
const svg = DOM.svg(w,h);
// Margin object with four properties
const margin = {top: 20, right: 20, bottom: 20, left: 30}
//create innerWidth and innerHeight for our margin
const innerW = w - margin.right - margin.left;
const innerH = h- margin.top - margin.bottom;
// append a g element to our svg and give it a new origin inside svg
const g = d3.select(svg).append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// create group elements for our axes
const xAxisG = g.append('g')
.attr('transform', "translate(0," + innerH + ")");

const yAxisG = g.append('g');
//create functions that get sepal and petal values
const xValue = d => d.sepalLength;
const yValue = d => d.petalLength;
//define couple of linear scales
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale);
// create color function that is just an ordinal scale
const color = d3.scaleOrdinal(['red','green','blue']);
//Let's give these scales a domain (actual values) and a range (plotted values)
xScale
.domain(d3.extent(data, xValue)) //d3.extent captures the min. & max from a set of values
.range([0, innerW]); // map the sepalLength values in dataset to full width of svg

yScale
.domain(d3.extent(data, yValue))
.range([innerH, 0]); // map the petalLength values in dataset to full height of svg
// append circles to our g element and attach the iris dataset to them
const circles = g
.selectAll('circle')
.data(data)
.enter()
.append('circle')
// provide attributes to our circles.
circles
.attr('cx', d=>xScale(xValue(d))) // Use the scales to conver the original values
.attr('cy', d=>yScale(yValue(d)))
.attr('r', 5)
.attr('fill', (d)=>color(d.species))
.attr('opacity', 0.7)
xAxisG.call(xAxis)
yAxisG.call(yAxis)
return svg
}
Insert cell
Insert cell

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.
Learn more