2d:null 2e:["$","title",null,{"children":"Data Visualization for React Developers, Full | Shirley Wu | Observable"}] 33:T9a8,html ` `34:T1d6a,html ` `35:[] 31:{"id":"f31ba6400229e0cf","slug":"data-visualization-for-react-developers-full","title":"Data Visualization for React Developers, Full","thumbnail":"304617b6d6f2e97638b1e8cae3c51153a53470f1b54a9afd5bfa300b79369ba3","access_level":"public","create_time":"$D2018-07-27T06:52:44.470Z","update_time":"$D2018-07-28T01:59:28.186Z","view_time":null,"first_public_time":"$D2018-07-28T01:59:39.196Z","has_unpublished_edits":null,"fork":false,"stars":51,"starred":false,"owner":{"type":"team","id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":"starter_2024"},"version":158,"publish_version":158,"role":null,"authored":false,"authors":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}],"members":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":54,"collection":{"id":"31ceeeceba2c11f3","slug":"frontend-masters-workshops","title":"Frontend Masters Workshops","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"type":"notebook","body":{"title":"Data Visualization for React Developers, Full","cells":[{"id":0,"value":"md`\n# Data Visualization for React Developers, Full\nIn this workshop, we learn how to create some simple charts with D3 and React. We'll be using 2017 weather data for San Francisco, and creating a **bar chart**, **line chart**, and **radial chart**.\n\nThe goal of this Observable notebook is to learn the SVG elements necessary to draw the charts, and the D3 functions necessary to turn raw data into SVG elements and attributes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md `\n## 1. The Makings of a Chart\nTo draw shapes in the browser, we need SVG (or Canvas). Below are the three charts, but only with weather from the first month of 2017.\n\n**Expand each chart** and look at the SVG elements that make up the shapes. **Try editing or deleting parts**, and re-running to see what happens.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md `\n### Line chart\n2 *path* elements\n\n- d: line commands that connect points\n- for each point:\n - x: date\n - y: temperature\n- fill: red for high temp, blue for low temp\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md `\n### Bar chart\n31 *rectangle* elements\n\n- x: date\n- y: high temp\n- height: (high - low) temp\n- fill: average temp\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md `\n### Radial chart\n30 *path* elements\n\n- d: line + curve commands to make slices\n- for each slice\n - angle: day\n - inner radius: low temp\n - outer radius: high temp\n- fill: average temp\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md `\n## 2. Create a bar chart with D3 scales\n1. Use a _time scale_ to map _date_ to _x-position_\n2. Use a _linear scale_ to map _temperature_ to _y-position_\n3. Calculate _height_ as the difference between _high_ and _low_ temperatures\n4. Return an array of objects, where each object has _x_, _y_, and _height_ attributes that will be mapped to SVG rectangle elements and their attributes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"data = d3.json('https://raw.githubusercontent.com/sxywu/react-d3-example/master/public/sf.json')\n .then(resp => {\n return resp.map(d => Object.assign(d, {date: new Date(d.date)}));\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"width = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"barChartData = {\n const xScale = d3.scaleTime().range([0, width])\n const yScale = d3.scaleLinear().range([height, 0])\n const colorScale = d3.scaleSequential(d3.interpolateSpectral)\n \n const timeDomain = d3.extent(data, d => d.date);\n const tempMax = d3.max(data, d => d.high);\n const [minAvg, maxAvg] = d3.extent(data, d => d.avg);\n xScale.domain(timeDomain);\n yScale.domain([0, tempMax]);\n colorScale.domain([maxAvg, minAvg]);\n\n // calculate x and y for each rectangle\n return data.map(d => {\n const y1 = yScale(d.high);\n const y2 = yScale(d.low);\n return {\n x: xScale(d.date),\n y: y1,\n height: y2 - y1,\n fill: colorScale(d.avg),\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n const svg = d3.select(DOM.svg(width, height))\n \n const bars = svg.selectAll('rect')\n .data(barChartData).enter().append('rect')\n .attr('x', d => d.x)\n .attr('y', d => d.y)\n .attr('width', 2)\n .attr('height', d => d.height)\n .attr('fill', d => d.fill)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md `\n## 3. Create a line chart with D3 line\n1. Use a _time scale_ to map _date_ to _x-position_\n2. Use a _linear scale_ to map _temperature_ to _y-position_\n3. Use a _line generator_ to generate a string for the _d_ attribute of a path\n4. Return an array of two objects, one for the high temp path and the other for low temp path\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"lineChartData = {\n // create scales\n const xScale = d3.scaleTime().range([0, width])\n const yScale = d3.scaleLinear().range([height, 0])\n \n // set domains on the scales\n const timeDomain = d3.extent(data, d => d.date);\n const tempMax = d3.max(data, d => d.high);\n xScale.domain(timeDomain);\n yScale.domain([0, tempMax]);\n\n // create and use line generator for high and low temperature\n const lineGenerator = d3.line().x(d => xScale(d.date))\n return [\n {\n fill: '#eb6a5b',\n path: lineGenerator.y(d => yScale(d.high))(data),\n },\n {\n fill: '#52b6ca',\n path: lineGenerator.y(d => yScale(d.low))(data),\n },\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"{\n const svg = d3.select(DOM.svg(width, height))\n \n const lines = svg.selectAll('path')\n .data(lineChartData).enter().append('path')\n .attr('d', d => d.path)\n .attr('fill', 'none')\n .attr('stroke-width', 2)\n .attr('stroke', d => d.fill)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md `\n## 4. Create a radial chart with D3 arc\n1. Use a _linear scale_ to map _temperature_ to _radius_\n2. Use an _arc generator_ to generate a string for the _d_ attribute of a path, where:\n - startAngle: date\n - endAngle: date + 1\n - innerRadius: low temp\n - outerRadius: high temp\n3. Return an array of objects, where each object has the _d_ attribute to draw a path in the shape of a slice\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"radialChartData = {\n const radiusScale = d3.scaleLinear().range([0, width / 2])\n const colorScale = d3.scaleSequential(d3.interpolateSpectral)\n \n const tempMax = d3.max(data, d => d.high);\n const [minAvg, maxAvg] = d3.extent(data, d => d.avg);\n radiusScale.domain([0, tempMax]);\n colorScale.domain([maxAvg, minAvg]);\n \n // one arc per day, innerRadius is low temp, outerRadius is high temp\n const arcGenerator = d3.arc()\n const perSliceAngle = (2 * Math.PI) / data.length;\n return data.map((d, i) => {\n return {\n fill: colorScale(d.avg),\n path: arcGenerator({\n startAngle: i * perSliceAngle,\n endAngle: (i + 1) * perSliceAngle,\n innerRadius: radiusScale(d.low),\n outerRadius: radiusScale(d.high),\n }),\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"{\n const svg = d3.select(DOM.svg(width, width))\n \n const slices = svg.append('g')\n .attr('transform', `translate(${width / 2}, ${width / 2})`)\n .selectAll('path')\n .data(radialChartData).enter().append('path')\n .attr('d', d => d.path)\n .attr('fill', d => d.fill)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md `\n## Load external libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"