Last active
February 16, 2018 07:49
-
-
Save curran/8e7835801fc37eb3635a3e022df8cc0e to your computer and use it in GitHub Desktop.
General Update Pattern with Text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Shopping App Prototype</title> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<svg width="500" height="960"></svg> | |
<script> | |
const textValue = d => `${d.name} $${d.price}` | |
const verticalSpacing = 45; | |
function render(selection, data){ | |
const text = selection | |
.selectAll('text').data(data) | |
text | |
.exit() | |
.remove(); | |
text | |
.enter().append('text') | |
.style('font-size', '32pt') | |
.style('font-family', 'Sans-Serif') | |
.attr('x', 250) | |
.attr('y', (d, i) => 50 + verticalSpacing * i) | |
.merge(text) | |
.text(textValue); | |
} | |
const svg = d3.select('svg'); | |
render(svg, [ { name: 'Milk', price: 3 } ]); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 20 } ]); | |
}, 1000); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); | |
}, 2000); | |
setTimeout(() => { | |
render(svg, [ | |
{ name: 'Milk', price: 3 }, | |
{ name: 'Eggs', price: 2 }, | |
{ name: 'Cupcakes', price: 5 } | |
]); | |
}, 3000); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); | |
}, 4000); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |