30:T6f4,{ const notes2015 = notes.filter( d => d.year === 2015) // money vs. denom as barChart const w = 400 const h = 400 const margin = ({"top": 40, "right": 40, "left": 40, "bottom": 40}) const width = w - margin.left - margin.right const height = h - margin.top - margin.bottom // Step 1 const el = d3.create("svg") .attr("xmlns", d3.namespace("svg").space) .attr("width", w) .attr("height", h) const main = el.append("g") .attr("transform", `translate( ${margin.left} , ${margin.top} )`) const xScale = d3.scaleBand() .domain( notes2015.map(d => d.denom) ) .rangeRound([0, width]) .padding(0.1) const yScale = d3.scaleLinear() .domain([0, d3.max(notes2015, d => d.money)]) .range([height, 0]) const colorScale = d3.scaleOrdinal(d3.schemeCategory10) .domain( notes2015.map(d => d.denom) ) // Step 2 const vis = main.selectAll("rect") .data(notes2015) // Step 3 vis.enter() .append("rect") .attr("x", d => xScale(d.denom) ) .attr("y", d => yScale(d.money) ) .attr("width", xScale.bandwidth() ) .attr("height", d => height - yScale(d.money) ) .attr("fill", d => colorScale(d.denom)) main.append("g") .call( d3.axisLeft(yScale) ) main.append("g") .attr("transform", `translate(0, ${height} )`) .call( d3.axisBottom(xScale) ) const legendC = legends.legendColor() .shape("circle") .shapeRadius(8) .shapePadding(20) .orient("vertical") .scale(colorScale) main.append("g") .attr("transform", `translate(${width + 10}, 0 )`) .call(legendC) // Step 4 return el.node() }31:[] 2e:{"title":"D3js Redux","cells":[{"id":0,"value":"md`# D3js Redux`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` Let say I have the following`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"smallData = [5, 20, 10, 15, 25]","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`### Manual add data to p`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md` ### Add Data-Binding to p`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n

${ smallData[0] }

${ smallData[1] }

${ smallData[2] }

${ smallData[3] }

${ smallData[4] }

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Do data-binding using JS\n\n- Step 1: Create **div** element\n- Step 2: Create a **for-loop** on the **smallData**\n- Step 3: Within the loop, create a **p** element and append it to the **div** element\n- Step 4: Show the **div** node\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n // Step 1\n const el = document.createElement(\"div\")\n \n // Step 2\n for( let i = 0; i < smallData.length; i++) {\n // Step 3\n const para = document.createElement(\"p\")\n para.innerText = smallData[i]\n el.appendChild(para)\n }\n \n // Step 4\n return el\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`## Do Data-Binding using d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"// d3 with version 5+\nd3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3.version","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"{\n //Step 1\n const el = d3.create(\"div\")\n \n //Step 2\n let vis = el.selectAll(\"p\")\n .data(smallData)\n \n // Step 3\n vis.enter()\n .append(\"p\")\n .text(value)\n \n // Step 4\n return el.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"// function to return each value in the array\nvalue = function (d) {\n return d\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"// Concise function definition\nvalue1 = (d) => d","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`### Create div chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`### div chart using d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n //Step 1\n const el = d3.create(\"div\")\n \n //Step 2\n const vis = el.selectAll(\"div\")\n .data(smallData)\n \n //Step 3\n vis.enter()\n .append(\"div\")\n .style(\"width\", function (d) {return 10 * d + \"px\"} )\n .style(\"height\", \"30px\")\n .style(\"background-color\", \"blue\")\n .style(\"margin\", \"5px\")\n\n //Step 4\n return el.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"func10x = function (d) {\n return 10 * d + \"px\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`### Create SVG manually\n\n- height: 30\n- width: 10* data[i] = [50, 200, 100, 250, 150]\n- x: 0\n- y: 40 * i = [0, 40, 80, 120, 160]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`### Create SVG using d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"{\n // Step 1\n const svg = d3.create(\"svg\")\n .attr(\"width\", 300)\n .attr(\"height\", 200)\n .attr(\"fill\", \"blue\")\n \n // Step 2\n const vis = svg.selectAll(\"rect\")\n .data(smallData)\n \n // Step 3\n vis.enter()\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", (d,i) => i * 40)\n .attr(\"width\", d => d * 10)\n .attr(\"height\", 30)\n \n // Step 4\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"yFunc = function (datum, index) {\n return index * 40\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`## Fixing Scales in SVG and d3js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"d3.namespace(\"svg\").space","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"{ \n const data = [2, 50, 23]\n \n const width = 300\n const height = 300\n \n // Scale for x\n const x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, width])\n \n // Scale for y\n const y = d3.scaleBand()\n .domain(data)\n .rangeRound([0, height])\n .padding(0.1)\n \n // Step 1\n const svg = d3.create(\"svg\")\n .attr(\"xmlns\", d3.namespace(\"svg\").space )\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"blue\")\n \n \n // Step 2\n const vis = svg.selectAll(\"rect\")\n .data(data)\n \n // Step 3\n vis.enter()\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"width\", x )\n .attr(\"height\", y.bandwidth())\n \n // Step 4\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"// x Scale demo\nx = d3.scaleLinear()\n .domain([0, d3.max(smallData)])\n .range([0, 300])","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"x(20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"// y Scale\ny = d3.scaleBand()\n .domain(smallData)\n .rangeRound([0, 300])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"y(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"smallData","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"// Generate the array automatically\n{\n const arr = []\n for (let i=0; i < smallData.length; i++){arr[i] = i} \n return arr\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"// Map function\nsmallData.map( \n function (d, i) {return i} \n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`## Make a Column Chart - from a csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"dataUrl = \"https://visdown.com/data/cars.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"// loading the data and auto-type inference\ncars = d3.csv(dataUrl, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"// How to get a Column array back from an array of objects (Rows)\ncars.map(d => d.model)","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"{\n // Column bars for model vs price\n \n const width = 500\n const height = 300\n \n const el = d3.create(\"svg\")\n .attr(\"xmlns\", d3.namespace(\"svg\").space)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"black\")\n \n const xScale = d3.scaleLinear()\n .domain([0, d3.max(cars, d => d.price)])\n .range([0, width])\n \n const yScale = d3.scaleBand()\n .domain( cars.map(d => d.model))\n .rangeRound([0, height])\n .padding(0.1)\n \n const vis = el.selectAll(\"rect\")\n .data(cars)\n \n vis.enter()\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", d => yScale(d.model) )\n .attr(\"width\", d => xScale(d.price) )\n .attr(\"height\", yScale.bandwidth() )\n \n return el.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`## Notes Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"notesUrl = \"https://visdown.com/data/notes.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"notes = d3.csv(notesUrl, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"notes.filter( d => d.year === 2015)","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"\"translate(30, 30)\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"margin = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"\"translate(\" + margin + \",\" + margin + \")\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"`translate( ${margin} , ${margin} )`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"legends = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}