Giter VIP home page Giter VIP logo

imdb-odsc's Introduction

Intro to D3

Set up

  1. Clone this repository
  2. cd inside the repository
  3. If on Mac/Linux, open up the terminal and run:
    • Using python 3: python3 -m http.server <port>
    • Using python 2+: python -m SimpleHTTPServer <port>
    • This allows d3 to load data, which is served by this simple python webserver hosting our directory. If we try to load data directly from our filesystem without a server, we'll get a cross origin request error -- d3 thinks it's loading data from a url different from our origin domain (the local filesystem).
  4. If not on Mac/Linux, which come with a python installation, there are google-able alternatives. If you have node, you can run npm install http-server -g and launch http-server.
  5. If setting up a server doesn't work, one alternative is to simply save the data as a javascript object and load that file as you would any other file. This is already done for you. The data is stored in a variable in workshop/data.js. Simply uncomment the line loading this file in workshop/main.html and you'll be able to access the data in an object named data. This isn't the recommended way of loading data but will work just fine for our purposes.
  6. Go to your localhost (ex: 0.0.0.0:8000). You should see a directory listing. Open up workshop/main.html
    • If you're not using a localhost, directly open up main.html in your browser (ex: file://user/Users/morgane/imdb-odsc/workshop/main.html)
  7. Open up the dev console (option+command+i or right click and "inspect element" then click on the console).
  8. Type d3, and you should be able to view the d3 library and all its properties.

Loading data

If you're storing the data in a js file (data.js), you should be able to access it in the data object. It is already loaded for you in main.html.

If you're serving the data file (it's stored as a csv in data/imdb.csv), you should be able to do:

d3.csv('data/imdb.csv', data => {
  console.log('imdb data:', data);
  // Do some stuff with it!
});

imdb-odsc's People

Watchers

carissa abrego-collier avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.