30:T492,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let dataArray = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500]; let xScale = d3 .scaleBand() .domain(d3.range(dataArray.length)) .range([0, W]) .padding(0.2); let yScale = d3 .scaleLinear() .domain([0, d3.max(dataArray)]) .range([H, 0]); chartContainer .selectAll("rect") .data(dataArray) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", (d, i) => yScale(d)) .attr("height", (d, i) => H - yScale(d)) .attr("width", xScale.bandwidth()) .attr("rx", 10) .style("fill", "green") .on("mouseover", function() { d3.select(this).style("fill", "red"); }) .on("mouseout", function(d) { d3.select(this).style("fill", "green"); }); return svgElement; }31:T51b,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let dataArray = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500]; let colorScale = d3 .scaleOrdinal() .domain(d3.range(dataArray.length)) .range(d3.schemeCategory10); let xScale = d3 .scaleBand() .domain(d3.range(dataArray.length)) .range([0, W]) .padding(0.2); let yScale = d3 .scaleLinear() .domain([0, d3.max(dataArray)]) .range([H, 0]); chartContainer .selectAll("rect") .data(dataArray) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", (d, i) => yScale(d)) .attr("height", (d, i) => H - yScale(d)) .attr("width", xScale.bandwidth()) .attr("rx", 10) .style("fill", (d, i) => colorScale(i)) .on("mouseover", function() { d3.select(this).style("stroke", "black"); }) .on("mouseout", function(d) { d3.select(this).style("stroke", "none"); }); return svgElement; }32:T61a,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let dataArray = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500]; let colorScale = d3 .scaleOrdinal() .domain(d3.range(dataArray.length)) .range(d3.schemeCategory10); let xScale = d3 .scaleBand() .domain(d3.range(dataArray.length)) .range([0, W]) .padding(0.2); let yScale = d3 .scaleLinear() .domain([0, d3.max(dataArray)]) .range([H, 0]); chartContainer .selectAll("rect") .data(dataArray) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", (d, i) => yScale(d)) .attr("height", (d, i) => H - yScale(d)) .attr("width", xScale.bandwidth()) //.attr("rx", 10) .style("fill", (d, i) => colorScale(i)) .on("mouseover", function() { d3.select(this).style("stroke", "black"); }) .on("mouseout", function(d) { d3.select(this).style("stroke", "none"); }); let xAxis = d3.axisBottom(xScale); // or d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }33:T62e,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let datum = [ { date: new Date("2007-04-23"), close: 93.24 }, { date: new Date("2008-01-02"), close: 194.84 }, { date: new Date("2009-01-01"), close: 85.35 }, { date: new Date("2010-01-01"), close: 210.73 }, { date: new Date("2011-01-03"), close: 329.57 }, { date: new Date("2012-01-03"), close: 411.23 } ]; let xScale = d3 .scaleTime() .domain(d3.extent(datum, d => d.date)) .range([0, W]); let yScale = d3 .scaleLinear() .domain(d3.extent(datum, d => d.close)) .range([H, 0]); let pathGenerator = d3 .line() .x(d => xScale(d.date)) // set the x values for the line generator .y(d => yScale(d.close)); // set the y values for the line generator chartContainer .selectAll("path") .data([datum]) .join("path") .attr("d", d => pathGenerator(d)) .style("fill", "none") .style("stroke", "black"); let xAxis = d3.axisBottom(xScale); // or d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }34:T6c0,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let datum = [ { date: new Date("2007-04-23"), close: 93.24 }, { date: new Date("2008-01-02"), close: 194.84 }, { date: new Date("2009-01-01"), close: 85.35 }, { date: new Date("2010-01-01"), close: 210.73 }, { date: new Date("2011-01-03"), close: 329.57 }, { date: new Date("2012-01-03"), close: 411.23 } ]; let xScale = d3 .scaleTime() .domain(d3.extent(datum, d => d.date)) .range([0, W]); let yScale = d3 .scaleLinear() .domain(d3.extent(datum, d => d.close)) .range([H, 0]); let pathGenerator = d3 .line() .x(d => xScale(d.date)) .y(d => yScale(d.close)) .curve(d3[curveType]); chartContainer .selectAll("path") .data([datum]) .join("path") .attr("d", d => pathGenerator(d)) .style("fill", "none") .style("stroke", "black"); chartContainer .selectAll("circle") .data(datum) .join("circle") .attr("transform", d => `translate(${xScale(d.date)},${yScale(d.close)})`) .attr("r", 5) .style("fill", "black"); let xAxis = d3.axisBottom(xScale); // or d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }35:T733,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let datum = [ { date: new Date("2007-04-23"), close: 93.24 }, { date: new Date("2008-01-02"), close: 194.84 }, { date: new Date("2009-01-01"), close: 85.35 }, { date: new Date("2010-01-01"), close: 210.73 }, { date: new Date("2011-01-03"), close: 329.57 }, { date: new Date("2012-01-03"), close: 411.23 } ]; let xScale = d3 .scaleTime() .domain(d3.extent(datum, d => d.date)) .range([0, W]); let yScale = d3 .scaleLinear() .domain(d3.extent(datum, d => d.close)) .range([H, 0]); let pathGenerator = d3 .line() .x(d => xScale(d.date)) .y(d => yScale(d.close)) .curve(d3[curveType]); chartContainer .selectAll("path") .data([datum]) .join("path") .attr("d", d => pathGenerator(d)) .style("fill", "none") .style("stroke", "black"); let symbolGenerator = d3 .symbol() .size(100) .type(d3[symbolType]); chartContainer .append("g") .selectAll("path") .data(datum) .join("path") .attr("transform", d => `translate(${xScale(d.date)},${yScale(d.close)})`) .attr("d", symbolGenerator) .style("fill", "steelblue"); let xAxis = d3.axisBottom(xScale); // or d3.axisBottom().scale(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }36:T4a7,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let points = [ [0, 80], [100, 100], [200, 30], [300, 50], [400, 40], [500, 80] ]; let xScale = d3 .scaleLinear() .domain(d3.extent(points, d => d[0])) .range([0, W]); let yScale = d3 .scaleLinear() .domain([0, d3.max(points, d => d[1])]) .range([H, 0]); let areaGenerator = d3 .area() .x(d => xScale(d[0])) .y1(d => yScale(d[1])) .y0(H); chartContainer .append("path") .datum(points) .attr('d', areaGenerator) .style("fill", "steelblue"); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }37:T4fe,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let points = [ { low: 30, high: 80 }, { low: 80, high: 100 }, { low: 20, high: 30 }, { low: 20, high: 50 }, { low: 10, high: 40 }, { low: 50, high: 80 } ]; let xScale = d3 .scaleLinear() .domain([0, points.length - 1]) .range([0, W]); let yScale = d3 .scaleLinear() .domain([0, d3.max(points, d => d.high)]) .range([H, 0]); let areaGenerator = d3 .area() .x((d, i) => xScale(i)) .y0(d => yScale(d.low)) .y1(d => yScale(d.high)); chartContainer .append('path') .datum(points) .attr('d', areaGenerator) .style("fill", "steelblue"); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }38:T61b,{ let width = 700; let height = 300; let svgElement = DOM.svg(width, height); let svg = d3.select(svgElement); let margin = { top: 20, right: 20, bottom: 50, left: 50 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; let chartContainer = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let data = [ { apricots: 120, blueberries: 180, cherries: 100 }, { apricots: 60, blueberries: 185, cherries: 105 }, { apricots: 100, blueberries: 215, cherries: 110 }, { apricots: 80, blueberries: 230, cherries: 105 }, { apricots: 120, blueberries: 240, cherries: 105 } ]; let stack = d3.stack().keys(['apricots', 'blueberries', 'cherries']); let stackData = stack(data); let xScale = d3 .scaleLinear() .domain([0, data.length - 1]) .range([0, W]); let yScale = d3 .scaleLinear() .domain([0, d3.max(stackData, d => d3.max(d, d => d[1]))]) .range([H, 0]) .nice(); let areaGenerator = d3 .area() .x((d, i) => xScale(i)) .y0(d => yScale(d[0])) .y1(d => yScale(d[1])); chartContainer .selectAll('path') .data(stackData) .join('path') .attr('d', areaGenerator) .style('fill', (d, i) => d3.schemeCategory10[i]); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); chartContainer .append('g') .attr('transform', 'translate(0,' + H + ')') .call(xAxis); chartContainer.append('g').call(yAxis); return svgElement; }39:[] 2e:{"title":"D3 Quick Overview","cells":[{"id":0,"value":"md`# D3 Quick Overview`","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md `#### CSS Style`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md `#### SVG I`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`#### SVG II`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md `#### SVG Path`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"md `#### SVG Shape Elements: Summary`","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`#### SVG Text`","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"md `#### SVG using D3`","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"{\n let width = 400;\n let height = 100;\n let svgElement = html`