31:T5c7,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // made 2nd: position scales const xExtent = d3.extent(penguins, d => d[xProperty]) const x = d3.scaleLinear() .domain(xExtent) .range([margin.left, width - margin.right]) const yExtent = d3.extent(penguins, d => d[yProperty]) const y = d3.scaleLinear() .domain(yExtent) .range([margin.top, height - margin.bottom]) // made 5th: Axes const xAxis = d3.axisBottom(x) svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) const yAxis = d3.axisLeft(y) svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) // made 4th: color scale const colorScale = d3.scaleOrdinal(d3.schemeSet2) // made 1st: placing circles svg .selectAll('circle') .data(penguins.filter(d => d[xProperty] !== "NA")) // filtering out NA values .join('circle') .attr("r", 3) // set starting point for circles .attr("cx", width / 2) .attr("cy", height / 2) .style("opacity", 0.7) .style("fill", d => colorScale(d.species)) .transition() .duration(3000) .attr("cx", (d, i) => x(d[xProperty])) .attr("cy", (d, i) => y(d[yProperty])) const legend = swatches({color: colorScale}) d3.create('div').select("#legend") .append(() => legend); return svg.node() }32:T554,function render(div) { // draw to svg const selection = d3.select(div).select('svg') // made 2nd: position scales const xExtent = d3.extent(penguins, d => d[xProperty]) const x = d3.scaleLinear() .domain(xExtent) .range([margin.left, width - margin.right]) const yExtent = d3.extent(penguins, d => d[yProperty]) const y = d3.scaleLinear() .domain(yExtent) .range([margin.top, height - margin.bottom]) // made 5th: Axes const xAxis = d3.axisBottom(x) selection .select("#xAxis") .call(xAxis) const yAxis = d3.axisLeft(y) selection .select("#yAxis") .call(yAxis) // made 4th: color scale const colorScale = d3.scaleOrdinal(d3.schemeSet2) // made 1st: placing circles selection .selectAll('circle') .data(penguins.filter(d => d[xProperty] !== "NA")) // filtering out NA values .join('circle') .attr("r", 10) // set starting point for circles .attr("cx", width / 2) .attr("cy", height / 2) .style("opacity", 0.7) .style("fill", d => colorScale(d.species)) .transition() .duration(3000) .attr("cx", (d, i) => x(d[xProperty])) .attr("cy", (d, i) => y(d[yProperty])) const legend = swatches({color: colorScale}) d3.select(div).select("#legend") .append(() => legend); }33:[] 2f:{"title":"Mirror Neuron #1: Lunch in the D3 Kitchen","cells":[{"id":0,"value":"md`# Mirror Neuron #1: Lunch in the D3 Kitchen\n\nA version of going through an Observable Livestream and documenting the result. Learn from others and learn by doing!\n\n[Result on my site](https://zachbogart.com/post/mirror-neuron-1-d3-scatterplot/)\n\n- Going off of the Observable Livestream\n- Wanted to make from scratch following along rather than forking\n - [Livestream](https://youtu.be/cNSM8pfEA3g)\n - [Their finished lunch notebook](https://observablehq.com/@observablehq/lunch-the-d3-kitchen-penguin-dataviz)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n## Lez go!\n\nNotes:\n- Special Sauce!\n- D3 is a toolbox\n- Want to learn to cook the basics with D3, but I'm eyeing the sous-vide machines and such in the corner!\n\nWorking Notes:\n- While Observable is schnazzy with being able to reorder cells, I did a little commenting to refer to how I \"linearly\" made the code (for my own understanding of how I made this from start to finish, which can get overlooked once things rearrange)\n- .data() binds data to DOM elements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Importing from Ian's notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Getting something to the screen\n- drawing a circle manually\n- like raw-uncooked food\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"foo = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Version to Embed Elsewhere\n- In the screencast, the html was made in one cell and the render function acted on that. This led to trouble when embedding the chart elsewhere.\n- Changed it to make the SVG in the same cell. Not sure how to get the color legend to work\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`## Example copying screencast\n\n- can set properties of x and y to different values in the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"xProperty = \"bill_length_mm\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"yProperty = \"bill_depth_mm\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"mySVG = html`

\n\n\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"render(mySVG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"// made 3rd: margins\nmargin = ({ left: 50, right: 15, top: 25, bottom: 25 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md` ## Importing Things`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {penguins} from \"@enjalot/palmer-penguins\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}