Skip to content

Instantly share code, notes, and snippets.

@davegotz

davegotz/index.html

Last active November 16, 2022 01:52
Show Gist options
  • Save davegotz/88e1842ebfa133e82addb79484aa7d30 to your computer and use it in GitHub Desktop.
Save davegotz/88e1842ebfa133e82addb79484aa7d30 to your computer and use it in GitHub Desktop.
Download ZIP
Coordinated Views with D3 Dispatch
Raw
index.html
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="iris_data.js"></script>
<title>Using D3 Dispatch to Link Charts</title>
</head>
<body>
<h1>
Iris Flower Data: Linked Bar Chart and Scatterplot
</h1>
<p>
We have data for 50 flowers of each species. This results in a bar chart with three equal sized bars (each representing
50 flowers of one species).
</p>
<p>
Click on any species bar to see the corresponding data points highlighted in the scatterplot.
</p>
<div style="float:left;">
<b>Flower Count by Species</b><br/>
<svg id="bar" height="260" width="260"></svg>
</div>
<div style="float:left;">
<b>Petal Length vs Petal Width</b><br/>
<svg id="scatter" height="260" width="260"></svg>
</div>
<div style="background: black; color:white; float:left; height:240px; width:240px; padding: 10px; " id="details">
Select items on a chart to see the species here.
</div>
<script>
class BarChart {
constructor(svg_id, data) {
this.dispatch = d3.dispatch("selectSpecies");
this.g = d3.select("#"+svg_id).append('g').attr("transform", "translate(30,30)");
// Calculate counts by species.
this.data = Array.from(d3.rollup(data,
group => {
let species = group[0].species;
let count = group.length;
return { species, count };
},
d => d.species
).values());
// Create scales.
let x = d3.scaleBand().domain(this.data.map(d=>d.species)).range([0, 200]).paddingInner(0.3).paddingOuter(0.1);
let y = d3.scaleLinear().domain([0, d3.max(this.data.map(d=>d.count))]).range([200, 0]);
// Draw axes.
this.g.append("g")
.call(d3.axisLeft(y));
this.g.append("g")
.attr("transform", "translate(0,200)")
.call(d3.axisBottom(x));
// Draw bars
this.g.selectAll(".bar").data(this.data, d=>d.species).join("rect")
.attr("class", "bar")
.attr("x", d => x(d.species))
.attr("width", x.bandwidth())
.attr("y", d=> y(d[1]))
.attr("height", d => y(0) - y(d.count))
.on("click", (event,d) => {
// Deal with the click locally for this chart.
this.highlightSpecies(d.species);
// Tell other "listening" charts that the specials has changed.
this.dispatch.call("selectSpecies", this, d.species)
})
.style("fill", "black");
}
highlightSpecies(species) {
// Get matching bar.
let matching_data = this.data.filter(d => d.species === species);
// Select matching circles, turn them red, and bring them to the front.
this.g.selectAll(".bar").data(matching_data, d=>d.species).join(
enter => enter,
update => update.style("fill", "red"),
exit => exit.style("fill", "black")
)
}
}
class ScatterPlot {
constructor(svg_id, data) {
this.data = data;
this.dispatch = d3.dispatch("selectSpecies");
let g = d3.select("#"+svg_id).append('g').attr("transform", "translate(30,30)");
let petal_width = data.map(d=>d.petal_width)
let petal_length = data.map(d=>d.petal_length)
let x = d3.scaleLinear().domain([d3.min(petal_width), d3.max(petal_width)]).range([0,200])
let y = d3.scaleLinear().domain([d3.min(petal_length), d3.max(petal_length)]).range([200,0])
// Draw axes
g.append("g")
.call(d3.axisLeft(y).ticks(5));
g.append("g")
.attr("transform", "translate(0,200)")
.call(d3.axisBottom(x).ticks(5));
// Draw axis labels
g.append("text")
.attr("x", -20)
.attr("y", -10)
.attr("text-anchor", "start")
.attr("font-size", "8")
.text("\u1403 Petal Length");
g.append("text")
.attr("x", 210)
.attr("y", 230)
.attr("text-anchor", "end")
.attr("font-size", "8")
.text("Petal Width \u1405");
// Draw data points.
g.selectAll(".dot").data(data).join("circle")
.attr("class", "dot")
.attr("cx", d => x(d.petal_width))
.attr("cy", d => y(d.petal_length))
.attr("r", 3)
.attr("fill", "black")
.on("click", (event,d) => {
// Deal with the click locally for this chart.
this.highlightSpecies(d.species);
// Tell other "listening" charts that the specials has changed.
this.dispatch.call("selectSpecies", this, d.species)
})
}
highlightSpecies(species) {
// Get matching data.
let matching_data = this.data.filter(d => d.species === species);
// Select matching circles, turn them red, and bring them to the front.
d3.selectAll(".dot").data(matching_data, d=>d.id).join(
enter => enter,
update => update.style("fill", "red").raise(),
exit => exit.style("fill", "black")
)
}
}
// Create the charts
let bar = new BarChart("bar", iris_data);
let scatter = new ScatterPlot("scatter", iris_data);
// Define a function to update the details panel in the HTML
function updateDetails(species) {
d3.select("#details").html("The <b>" + species + "</b> species is now highlighted.");
}
// Register listeners for selectSpecies events that originate on the bar chart.
bar.dispatch.on("selectSpecies.scatter", scatter.highlightSpecies.bind(scatter));
bar.dispatch.on("selectSpecies.details", updateDetails)
// Register listeners for selectSpecies events that originate on the scatterplot.
scatter.dispatch.on("selectSpecies.bar", bar.highlightSpecies.bind(bar));
scatter.dispatch.on("selectSpecies.details", updateDetails)
</script>
</body>
</html>
Raw
iris_data.js
var iris_data = [
{"id":101,"sepal_length":5.1,"sepal_width":3.5,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":102,"sepal_length":4.9,"sepal_width":3.0,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":103,"sepal_length":4.7,"sepal_width":3.2,"petal_length":1.3,"petal_width":0.2,"species":"setosa"},
{"id":104,"sepal_length":4.6,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":105,"sepal_length":5.0,"sepal_width":3.6,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":106,"sepal_length":5.4,"sepal_width":3.9,"petal_length":1.7,"petal_width":0.4,"species":"setosa"},
{"id":107,"sepal_length":4.6,"sepal_width":3.4,"petal_length":1.4,"petal_width":0.3,"species":"setosa"},
{"id":108,"sepal_length":5.0,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":109,"sepal_length":4.4,"sepal_width":2.9,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":110,"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"},
{"id":111,"sepal_length":5.4,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":112,"sepal_length":4.8,"sepal_width":3.4,"petal_length":1.6,"petal_width":0.2,"species":"setosa"},
{"id":113,"sepal_length":4.8,"sepal_width":3.0,"petal_length":1.4,"petal_width":0.1,"species":"setosa"},
{"id":114,"sepal_length":4.3,"sepal_width":3.0,"petal_length":1.1,"petal_width":0.1,"species":"setosa"},
{"id":115,"sepal_length":5.8,"sepal_width":4.0,"petal_length":1.2,"petal_width":0.2,"species":"setosa"},
{"id":116,"sepal_length":5.7,"sepal_width":4.4,"petal_length":1.5,"petal_width":0.4,"species":"setosa"},
{"id":117,"sepal_length":5.4,"sepal_width":3.9,"petal_length":1.3,"petal_width":0.4,"species":"setosa"},
{"id":118,"sepal_length":5.1,"sepal_width":3.5,"petal_length":1.4,"petal_width":0.3,"species":"setosa"},
{"id":119,"sepal_length":5.7,"sepal_width":3.8,"petal_length":1.7,"petal_width":0.3,"species":"setosa"},
{"id":120,"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.5,"petal_width":0.3,"species":"setosa"},
{"id":121,"sepal_length":5.4,"sepal_width":3.4,"petal_length":1.7,"petal_width":0.2,"species":"setosa"},
{"id":122,"sepal_length":5.1,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.4,"species":"setosa"},
{"id":123,"sepal_length":4.6,"sepal_width":3.6,"petal_length":1.0,"petal_width":0.2,"species":"setosa"},
{"id":124,"sepal_length":5.1,"sepal_width":3.3,"petal_length":1.7,"petal_width":0.5,"species":"setosa"},
{"id":125,"sepal_length":4.8,"sepal_width":3.4,"petal_length":1.9,"petal_width":0.2,"species":"setosa"},
{"id":126,"sepal_length":5.0,"sepal_width":3.0,"petal_length":1.6,"petal_width":0.2,"species":"setosa"},
{"id":127,"sepal_length":5.0,"sepal_width":3.4,"petal_length":1.6,"petal_width":0.4,"species":"setosa"},
{"id":128,"sepal_length":5.2,"sepal_width":3.5,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":129,"sepal_length":5.2,"sepal_width":3.4,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":130,"sepal_length":4.7,"sepal_width":3.2,"petal_length":1.6,"petal_width":0.2,"species":"setosa"},
{"id":131,"sepal_length":4.8,"sepal_width":3.1,"petal_length":1.6,"petal_width":0.2,"species":"setosa"},
{"id":132,"sepal_length":5.4,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.4,"species":"setosa"},
{"id":133,"sepal_length":5.2,"sepal_width":4.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"},
{"id":134,"sepal_length":5.5,"sepal_width":4.2,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":135,"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"},
{"id":136,"sepal_length":5.0,"sepal_width":3.2,"petal_length":1.2,"petal_width":0.2,"species":"setosa"},
{"id":137,"sepal_length":5.5,"sepal_width":3.5,"petal_length":1.3,"petal_width":0.2,"species":"setosa"},
{"id":138,"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"},
{"id":139,"sepal_length":4.4,"sepal_width":3.0,"petal_length":1.3,"petal_width":0.2,"species":"setosa"},
{"id":140,"sepal_length":5.1,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":141,"sepal_length":5.0,"sepal_width":3.5,"petal_length":1.3,"petal_width":0.3,"species":"setosa"},
{"id":142,"sepal_length":4.5,"sepal_width":2.3,"petal_length":1.3,"petal_width":0.3,"species":"setosa"},
{"id":143,"sepal_length":4.4,"sepal_width":3.2,"petal_length":1.3,"petal_width":0.2,"species":"setosa"},
{"id":144,"sepal_length":5.0,"sepal_width":3.5,"petal_length":1.6,"petal_width":0.6,"species":"setosa"},
{"id":145,"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.9,"petal_width":0.4,"species":"setosa"},
{"id":146,"sepal_length":4.8,"sepal_width":3.0,"petal_length":1.4,"petal_width":0.3,"species":"setosa"},
{"id":147,"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.6,"petal_width":0.2,"species":"setosa"},
{"id":148,"sepal_length":4.6,"sepal_width":3.2,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":149,"sepal_length":5.3,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.2,"species":"setosa"},
{"id":150,"sepal_length":5.0,"sepal_width":3.3,"petal_length":1.4,"petal_width":0.2,"species":"setosa"},
{"id":151,"sepal_length":7.0,"sepal_width":3.2,"petal_length":4.7,"petal_width":1.4,"species":"versicolor"},
{"id":152,"sepal_length":6.4,"sepal_width":3.2,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"},
{"id":153,"sepal_length":6.9,"sepal_width":3.1,"petal_length":4.9,"petal_width":1.5,"species":"versicolor"},
{"id":154,"sepal_length":5.5,"sepal_width":2.3,"petal_length":4.0,"petal_width":1.3,"species":"versicolor"},
{"id":155,"sepal_length":6.5,"sepal_width":2.8,"petal_length":4.6,"petal_width":1.5,"species":"versicolor"},
{"id":156,"sepal_length":5.7,"sepal_width":2.8,"petal_length":4.5,"petal_width":1.3,"species":"versicolor"},
{"id":157,"sepal_length":6.3,"sepal_width":3.3,"petal_length":4.7,"petal_width":1.6,"species":"versicolor"},
{"id":158,"sepal_length":4.9,"sepal_width":2.4,"petal_length":3.3,"petal_width":1.0,"species":"versicolor"},
{"id":159,"sepal_length":6.6,"sepal_width":2.9,"petal_length":4.6,"petal_width":1.3,"species":"versicolor"},
{"id":160,"sepal_length":5.2,"sepal_width":2.7,"petal_length":3.9,"petal_width":1.4,"species":"versicolor"},
{"id":161,"sepal_length":5.0,"sepal_width":2.0,"petal_length":3.5,"petal_width":1.0,"species":"versicolor"},
{"id":162,"sepal_length":5.9,"sepal_width":3.0,"petal_length":4.2,"petal_width":1.5,"species":"versicolor"},
{"id":163,"sepal_length":6.0,"sepal_width":2.2,"petal_length":4.0,"petal_width":1.0,"species":"versicolor"},
{"id":164,"sepal_length":6.1,"sepal_width":2.9,"petal_length":4.7,"petal_width":1.4,"species":"versicolor"},
{"id":165,"sepal_length":5.6,"sepal_width":2.9,"petal_length":3.6,"petal_width":1.3,"species":"versicolor"},
{"id":166,"sepal_length":6.7,"sepal_width":3.1,"petal_length":4.4,"petal_width":1.4,"species":"versicolor"},
{"id":167,"sepal_length":5.6,"sepal_width":3.0,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"},
{"id":168,"sepal_length":5.8,"sepal_width":2.7,"petal_length":4.1,"petal_width":1.0,"species":"versicolor"},
{"id":169,"sepal_length":6.2,"sepal_width":2.2,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"},
{"id":170,"sepal_length":5.6,"sepal_width":2.5,"petal_length":3.9,"petal_width":1.1,"species":"versicolor"},
{"id":171,"sepal_length":5.9,"sepal_width":3.2,"petal_length":4.8,"petal_width":1.8,"species":"versicolor"},
{"id":172,"sepal_length":6.1,"sepal_width":2.8,"petal_length":4.0,"petal_width":1.3,"species":"versicolor"},
{"id":173,"sepal_length":6.3,"sepal_width":2.5,"petal_length":4.9,"petal_width":1.5,"species":"versicolor"},
{"id":174,"sepal_length":6.1,"sepal_width":2.8,"petal_length":4.7,"petal_width":1.2,"species":"versicolor"},
{"id":175,"sepal_length":6.4,"sepal_width":2.9,"petal_length":4.3,"petal_width":1.3,"species":"versicolor"},
{"id":176,"sepal_length":6.6,"sepal_width":3.0,"petal_length":4.4,"petal_width":1.4,"species":"versicolor"},
{"id":177,"sepal_length":6.8,"sepal_width":2.8,"petal_length":4.8,"petal_width":1.4,"species":"versicolor"},
{"id":178,"sepal_length":6.7,"sepal_width":3.0,"petal_length":5.0,"petal_width":1.7,"species":"versicolor"},
{"id":179,"sepal_length":6.0,"sepal_width":2.9,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"},
{"id":180,"sepal_length":5.7,"sepal_width":2.6,"petal_length":3.5,"petal_width":1.0,"species":"versicolor"},
{"id":181,"sepal_length":5.5,"sepal_width":2.4,"petal_length":3.8,"petal_width":1.1,"species":"versicolor"},
{"id":182,"sepal_length":5.5,"sepal_width":2.4,"petal_length":3.7,"petal_width":1.0,"species":"versicolor"},
{"id":183,"sepal_length":5.8,"sepal_width":2.7,"petal_length":3.9,"petal_width":1.2,"species":"versicolor"},
{"id":184,"sepal_length":6.0,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.6,"species":"versicolor"},
{"id":185,"sepal_length":5.4,"sepal_width":3.0,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"},
{"id":186,"sepal_length":6.0,"sepal_width":3.4,"petal_length":4.5,"petal_width":1.6,"species":"versicolor"},
{"id":187,"sepal_length":6.7,"sepal_width":3.1,"petal_length":4.7,"petal_width":1.5,"species":"versicolor"},
{"id":188,"sepal_length":6.3,"sepal_width":2.3,"petal_length":4.4,"petal_width":1.3,"species":"versicolor"},
{"id":189,"sepal_length":5.6,"sepal_width":3.0,"petal_length":4.1,"petal_width":1.3,"species":"versicolor"},
{"id":190,"sepal_length":5.5,"sepal_width":2.5,"petal_length":4.0,"petal_width":1.3,"species":"versicolor"},
{"id":191,"sepal_length":5.5,"sepal_width":2.6,"petal_length":4.4,"petal_width":1.2,"species":"versicolor"},
{"id":192,"sepal_length":6.1,"sepal_width":3.0,"petal_length":4.6,"petal_width":1.4,"species":"versicolor"},
{"id":193,"sepal_length":5.8,"sepal_width":2.6,"petal_length":4.0,"petal_width":1.2,"species":"versicolor"},
{"id":194,"sepal_length":5.0,"sepal_width":2.3,"petal_length":3.3,"petal_width":1.0,"species":"versicolor"},
{"id":195,"sepal_length":5.6,"sepal_width":2.7,"petal_length":4.2,"petal_width":1.3,"species":"versicolor"},
{"id":196,"sepal_length":5.7,"sepal_width":3.0,"petal_length":4.2,"petal_width":1.2,"species":"versicolor"},
{"id":197,"sepal_length":5.7,"sepal_width":2.9,"petal_length":4.2,"petal_width":1.3,"species":"versicolor"},
{"id":198,"sepal_length":6.2,"sepal_width":2.9,"petal_length":4.3,"petal_width":1.3,"species":"versicolor"},
{"id":199,"sepal_length":5.1,"sepal_width":2.5,"petal_length":3.0,"petal_width":1.1,"species":"versicolor"},
{"id":200,"sepal_length":5.7,"sepal_width":2.8,"petal_length":4.1,"petal_width":1.3,"species":"versicolor"},
{"id":201,"sepal_length":6.3,"sepal_width":3.3,"petal_length":6.0,"petal_width":2.5,"species":"virginica"},
{"id":202,"sepal_length":5.8,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.9,"species":"virginica"},
{"id":203,"sepal_length":7.1,"sepal_width":3.0,"petal_length":5.9,"petal_width":2.1,"species":"virginica"},
{"id":204,"sepal_length":6.3,"sepal_width":2.9,"petal_length":5.6,"petal_width":1.8,"species":"virginica"},
{"id":205,"sepal_length":6.5,"sepal_width":3.0,"petal_length":5.8,"petal_width":2.2,"species":"virginica"},
{"id":206,"sepal_length":7.6,"sepal_width":3.0,"petal_length":6.6,"petal_width":2.1,"species":"virginica"},
{"id":207,"sepal_length":4.9,"sepal_width":2.5,"petal_length":4.5,"petal_width":1.7,"species":"virginica"},
{"id":208,"sepal_length":7.3,"sepal_width":2.9,"petal_length":6.3,"petal_width":1.8,"species":"virginica"},
{"id":209,"sepal_length":6.7,"sepal_width":2.5,"petal_length":5.8,"petal_width":1.8,"species":"virginica"},
{"id":210,"sepal_length":7.2,"sepal_width":3.6,"petal_length":6.1,"petal_width":2.5,"species":"virginica"},
{"id":211,"sepal_length":6.5,"sepal_width":3.2,"petal_length":5.1,"petal_width":2.0,"species":"virginica"},
{"id":212,"sepal_length":6.4,"sepal_width":2.7,"petal_length":5.3,"petal_width":1.9,"species":"virginica"},
{"id":213,"sepal_length":6.8,"sepal_width":3.0,"petal_length":5.5,"petal_width":2.1,"species":"virginica"},
{"id":214,"sepal_length":5.7,"sepal_width":2.5,"petal_length":5.0,"petal_width":2.0,"species":"virginica"},
{"id":215,"sepal_length":5.8,"sepal_width":2.8,"petal_length":5.1,"petal_width":2.4,"species":"virginica"},
{"id":216,"sepal_length":6.4,"sepal_width":3.2,"petal_length":5.3,"petal_width":2.3,"species":"virginica"},
{"id":217,"sepal_length":6.5,"sepal_width":3.0,"petal_length":5.5,"petal_width":1.8,"species":"virginica"},
{"id":218,"sepal_length":7.7,"sepal_width":3.8,"petal_length":6.7,"petal_width":2.2,"species":"virginica"},
{"id":219,"sepal_length":7.7,"sepal_width":2.6,"petal_length":6.9,"petal_width":2.3,"species":"virginica"},
{"id":220,"sepal_length":6.0,"sepal_width":2.2,"petal_length":5.0,"petal_width":1.5,"species":"virginica"},
{"id":221,"sepal_length":6.9,"sepal_width":3.2,"petal_length":5.7,"petal_width":2.3,"species":"virginica"},
{"id":222,"sepal_length":5.6,"sepal_width":2.8,"petal_length":4.9,"petal_width":2.0,"species":"virginica"},
{"id":223,"sepal_length":7.7,"sepal_width":2.8,"petal_length":6.7,"petal_width":2.0,"species":"virginica"},
{"id":224,"sepal_length":6.3,"sepal_width":2.7,"petal_length":4.9,"petal_width":1.8,"species":"virginica"},
{"id":225,"sepal_length":6.7,"sepal_width":3.3,"petal_length":5.7,"petal_width":2.1,"species":"virginica"},
{"id":226,"sepal_length":7.2,"sepal_width":3.2,"petal_length":6.0,"petal_width":1.8,"species":"virginica"},
{"id":227,"sepal_length":6.2,"sepal_width":2.8,"petal_length":4.8,"petal_width":1.8,"species":"virginica"},
{"id":228,"sepal_length":6.1,"sepal_width":3.0,"petal_length":4.9,"petal_width":1.8,"species":"virginica"},
{"id":229,"sepal_length":6.4,"sepal_width":2.8,"petal_length":5.6,"petal_width":2.1,"species":"virginica"},
{"id":230,"sepal_length":7.2,"sepal_width":3.0,"petal_length":5.8,"petal_width":1.6,"species":"virginica"},
{"id":231,"sepal_length":7.4,"sepal_width":2.8,"petal_length":6.1,"petal_width":1.9,"species":"virginica"},
{"id":232,"sepal_length":7.9,"sepal_width":3.8,"petal_length":6.4,"petal_width":2.0,"species":"virginica"},
{"id":233,"sepal_length":6.4,"sepal_width":2.8,"petal_length":5.6,"petal_width":2.2,"species":"virginica"},
{"id":234,"sepal_length":6.3,"sepal_width":2.8,"petal_length":5.1,"petal_width":1.5,"species":"virginica"},
{"id":235,"sepal_length":6.1,"sepal_width":2.6,"petal_length":5.6,"petal_width":1.4,"species":"virginica"},
{"id":236,"sepal_length":7.7,"sepal_width":3.0,"petal_length":6.1,"petal_width":2.3,"species":"virginica"},
{"id":237,"sepal_length":6.3,"sepal_width":3.4,"petal_length":5.6,"petal_width":2.4,"species":"virginica"},
{"id":238,"sepal_length":6.4,"sepal_width":3.1,"petal_length":5.5,"petal_width":1.8,"species":"virginica"},
{"id":239,"sepal_length":6.0,"sepal_width":3.0,"petal_length":4.8,"petal_width":1.8,"species":"virginica"},
{"id":240,"sepal_length":6.9,"sepal_width":3.1,"petal_length":5.4,"petal_width":2.1,"species":"virginica"},
{"id":241,"sepal_length":6.7,"sepal_width":3.1,"petal_length":5.6,"petal_width":2.4,"species":"virginica"},
{"id":242,"sepal_length":6.9,"sepal_width":3.1,"petal_length":5.1,"petal_width":2.3,"species":"virginica"},
{"id":243,"sepal_length":5.8,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.9,"species":"virginica"},
{"id":244,"sepal_length":6.8,"sepal_width":3.2,"petal_length":5.9,"petal_width":2.3,"species":"virginica"},
{"id":245,"sepal_length":6.7,"sepal_width":3.3,"petal_length":5.7,"petal_width":2.5,"species":"virginica"},
{"id":246,"sepal_length":6.7,"sepal_width":3.0,"petal_length":5.2,"petal_width":2.3,"species":"virginica"},
{"id":247,"sepal_length":6.3,"sepal_width":2.5,"petal_length":5.0,"petal_width":1.9,"species":"virginica"},
{"id":248,"sepal_length":6.5,"sepal_width":3.0,"petal_length":5.2,"petal_width":2.0,"species":"virginica"},
{"id":249,"sepal_length":6.2,"sepal_width":3.4,"petal_length":5.4,"petal_width":2.3,"species":"virginica"},
{"id":250,"sepal_length":5.9,"sepal_width":3.0,"petal_length":5.1,"petal_width":1.8,"species":"virginica"}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment