Skip to content
Tulip is a customizable application for creating static or D3 based maps.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bower_components
data
dist
examples
.gitignore
Gruntfile.js
LICENSE.txt
README.md
bower.json
index-dist.html
index-example.html
index.html
package.json

README.md

TUlip

Tulip is a customizable application for creating static or D3 based maps. Named for the Impossible Black Tulip.

You can use Tulip at code.minnpost.com/tulip. The project is still under heavy development and many features are still planned.

About

Tulip is a web interface built on top of Simple Map D3. It allows you to make a custom map using any GeoJSON or TopoJSON data source. If you data source has numerical properties, you can create a "choropleth" style map.

(coming soon) Tulip is fully customizable so that it can be deployed for an organization or individual with specific configuration options already set or removed so that the design of maps can be controlled.

Inspiration from ChartBuilder.

Examples

European Population Density on Mollewide projection

World Population, South-Oreiented on Robinson projection

2010 Median Age by State on Albers USA projection

World Population on Gall Peters projection

Deployment

The idea is that you should not fork the project; you should use it as a library in your own app.

Install with bower:

bower install https://github.com/MinnPost/tulip.git

Create an index.html page otherwise put the following in your existing page. First add the CSS.

<link rel="stylesheet" href="bower_components/tulip/dist/tulip.libs.css">
<link rel="stylesheet" href="bower_components/tulip/dist/tulip.css">

Then add the Javascript.

<script src="bower_components/tulip/dist/tulip.libs.js"></script>
<script src="bower_components/tulip/dist/tulip.js"></script>

Add a container for the application.

<div class="tulip-app"></div>

Then configure and start the application.

<script>
  (function() {
    var thisTulip = new Tulip({
      el: '.tulip-app'
    });
  })();
</script>

Development

Prerequisites

  1. Install Git.
  2. Install NodeJS.
  3. Install Grunt: npm install -g grunt-cli
  4. Install Bower: npm install -g bower

Install

  1. Check out this code with Git: git clone https://github.com/MinnPost/tulip.git
  2. Go into the template directory: cd tulip
  3. Install NodeJS packages: npm install
  4. Install Bower components: bower install

Run Locally

  • Run: grunt server
    • This will run a local webserver for development and you can view the application in your web browser at http://localhost:8765.
    • This will also watch for JS changes and JSHint the files.
    • Utilize index.html for development, while index-dist.html is used for basically testing of the built version.

Build

  1. Run: grunt

Attribution

You can’t perform that action at this time.