Skip to content

Instantly share code, notes, and snippets.

@benlk

benlk/Setting up a server

Last active Aug 29, 2015
Embed
What would you like to do?
Notes from the D3 talk
Prerequisites:
- a web server
- a web browser
- a text editor (Brackets, Sublime, whatever you want)
0. cd to your project directory
1. download https://github.com/chriscanipe/web-app-template-simple to your Desktop
2. Open http://bl.ocks.org/mbostock/3887118
- [ ] copy the code between `<script>` and `</script>`
- [ ] open `js/script.js` and paste the copied code in after everything that's already there.
- [ ] copy the code between `<style>` and `</style>`
- [ ] open `css/
3. Change where and how the scripts are looking for the data:
- [ ] replace this:
d3.tsv("data.tsv", function(error, data) {
- with this:
d3.csv("js/mlb.csv", function(error, data) {
4. Change what data will be rendered.
data.forEach(function(d) {
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
});
Becomes:
data.forEach(function(d) {
d.W = +d.W;
d.RA = +d.RA;
});
5. Also change `sepalLength` for `W` and `sepalWidth` for `RA` in other places in the code, like in the lines starting `x.domain` and `y.domain` and under `svg.selectAll(".dot")`.
6. The `.nice()` finds the possible range of the output, finds the pixel values correspponding to that.
7. `svg` is an object that has already been appended to the page. Open the inspector in your browser (F12) and find the svg element. Inside of that, we're creating some info.
8. Keep scrolling down in `js/script.js`, and you'll find more `sepalWidth` and `sepalLength`. Replace those as before. `cx` and `cy` determine the center of the dot.
9. Change the text values used for the labels.
10. Change the source of the colors for the teams: `.style("fill", function(d) { return color(d.TM); });
0. Open a terminal
1. change to the directory where you've saved the project and start a web server.
cd Desktop/
cd web-app-template-simple
python -m SimpleHTTPServer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment