| // on function call autocreate data agnostic filters | |
| function createFilter(name, data) { | |
| var items = []; | |
| for (i in data) { | |
| items.push(data[i][name]); | |
| } | |
| var list = items.filter(uniqueValues); | |
| list.sort(); | |
| $.each(list, function(i, item) { |
| // percentage = value / total * 100 | |
| // store total in variable | |
| var total = d3.sum(data, function(d) { return d.values; }); | |
| // set upper domain of y-axis not to 100% but to the percentage of the greatest value in your data | |
| y.domain([0, d3.max(data, function(d) { return Math.round((d.values / total) * 100); })]); | |
| // percentage in bar chart | |
| var bars = d3.selectAll('.bar') | |
| .data(data) |
A. J. Griemas worked out a model to represent narrative structure that underlies much of the classic narrative storytelling explained in How to Win an Election and the lessons given in F for Fake — How to Structure a Video Essay.
Sender -------------------> Object ----------------------> Receiver
⌃
|
|
|
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .container { | |
| width: 90%; | |
| } | |
| .triangle-grid { | |
| width: 315px; | |
| height: 315px; | |
| margin: 0 auto; |
| // a workaround to apply style properties to only one element of a collection of elements in a d3 selection | |
| d3.select('.container-div') | |
| .selectAll('div') | |
| .data(data) | |
| .enter().append('div') | |
| .attr('class', 'contained-divs') | |
| // show last child element on hover | |
| .on('mouseover', function(d) { | |
| var s = d3.select(this)[0][0], | |
| s0 = s.lastChild; |
| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>D3 Contour Map</title> | |
| <style> | |
| html, | |
| body { | |
| background: #000; | |
| } | |
| .container { |
| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>D3 GeoJSON</title> | |
| <style> | |
| html, | |
| body { | |
| background-color: #000; | |
| } | |
| </style> | |
| <div class="container"> |
| // function to replace label with label's explanation on hover. | |
| function mouseover() { | |
| const s = d3.select(this)[0][0]; | |
| s.innerHTML = 'true positive rate'; | |
| s.className = 'explanation'; | |
| } | |
| function mouseout() { | |
| const s = d3.select(this)[0][0]; | |
| s.innerHTML = 'Sensitivity'; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>D3 date</title> | |
| <link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'> | |
| <style> | |
| .date-row { | |
| margin-left: 100px; | |
| } | |
| .date-area { |
| // deduplicate array of primitives | |
| let deduped = arr.filter((el, i, arr) => arr.indexOf(el) === i); | |
| // or | |
| deduped = Array.from(new Set(arr)); | |
| // deduplicate array of ojects using a hash table | |
| function dedupe(arr) { | |
| let hashTable = {}; | |
| return arr.filter(function(el) { |