Published
Edited
Jun 5, 2020
1 star
_ = require("lodash")
d3 = require("d3@5")
import { vl } from "@vega/vega-lite-api"
jQuery = require("jquery")
iris = d3.csv(
"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",
parseCsvRow
)
hawc_nitrofen_lit = d3.csv(
"https://hawcprd.epa.gov/lit/api/assessment/497/references-download/?format=csv",
parseCsvRow
)
dataset = d3.csvParse(await FileAttachment("download@1.csv").text())
dataset[0]
vl
.markCircle()
.data(iris)
.encode(
vl.x().field("Sepal_Length"),
vl.y().field("Sepal_Width"),
vl.color().field("Species"),
vl.tooltip().field("Species")
)
.render()
container = DOM.element('d3-div')
d3divPlot = {
// clear existing data whenver we re-render
d3.select(container)
.selectAll('svg')
.remove();
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3
.select(container)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Add X axis
var xScale = d3
.scaleLinear()
.domain(d3.extent(_.map(iris, d => d.Sepal_Length)))
.range([0, width]);
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// Add Y axis
var yScale = d3
.scaleLinear()
.domain(d3.extent(_.map(iris, d => d.Sepal_Width)))
.range([height, 0]);
svg.append("g").call(d3.axisLeft(yScale));
// Add R axis
var rScale = d3
.scaleLinear()
.domain(d3.extent(_.map(iris, d => d.Petal_Length)))
.range([5, 10]);
// Add Y axis
var r = d3
.scaleLinear()
.domain(d3.extent(_.map(iris, d => d.Petal_Length)))
.range([2, 5]);
var colorScale = d3
.scaleOrdinal(d3.schemeAccent)
.domain(d3.extent(_.map(iris, d => d.Species)));
// Add dots
svg
.append('g')
.selectAll("dot")
.data(iris)
.enter()
.append("circle")
.attr("cx", d => xScale(d.Sepal_Length))
.attr("cy", d => yScale(d.Sepal_Width))
.attr("r", d => rScale(d.Petal_Length))
.style("fill", d => colorScale(d.Species))
.style("opacity", 0.7);
return 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.
