2d:null 2e:["$","title",null,{"children":"Mirror Neuron #1: Lunch in the D3 Kitchen | Zach Bogart | Observable"}] 33: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() }34: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); }35:[] 31:{"id":"238404aeb940804e","slug":"mirror-neuron-1-lunch-in-the-d3-kitchen","title":"Mirror Neuron #1: Lunch in the D3 Kitchen","thumbnail":"238e90f47e0f6e46e1055dd1d29635155adfdbac461600820417782d9ac734db","access_level":"public","create_time":"$D2020-09-14T03:08:02.097Z","update_time":"$D2020-09-14T23:40:15.296Z","view_time":null,"first_public_time":"$D2020-09-14T05:20:17.896Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1da899fe83239203","login":"zachbogart","name":"Zach Bogart","avatar_url":"https://avatars-next.observableusercontent.com/90a52c7f25e244d634f67d16c58dea6d577e871986ac93da60522bbd4add497a","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"8f3c727b0fd0bd62","login":"zachbogart","name":"Zach Bogart","avatar_url":"https://avatars-next.observableusercontent.com/90a52c7f25e244d634f67d16c58dea6d577e871986ac93da60522bbd4add497a","tier":null}],"members":[{"type":"individual","id":"8f3c727b0fd0bd62","login":"zachbogart","name":"Zach Bogart","avatar_url":"https://avatars-next.observableusercontent.com/90a52c7f25e244d634f67d16c58dea6d577e871986ac93da60522bbd4add497a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## Importing from Ian's notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"foo = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"xProperty = \"bill_length_mm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"yProperty = \"bill_depth_mm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mySVG = html`

\n\n\n

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