Tlip

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

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

• Paint Palette designed by Samuel Q. Green from The Noun Project.