transitive.js - Transit data visualization

  •        55

A Transitive map can be embedded as a freestanding web element or overlaid onto a Leaflet map using the Leaflet.TransitiveLayer plugin. Transitive is supported by the Mobility Lab Transit Tech Initiative. Read more in this Mobility Lab article.


augment : 4.3.0
component-each : 0.2.6
component-emitter : 1.2.1
d3 : ^3.5.8
debug : ^2.5.1
lodash.foreach : ^4.5.0
priorityqueuejs : 1.0.0
sphericalmercator : ^1.0.5



Related Projects

transitfeed - A Python library for reading, validating, and writing transit schedule information in the GTFS format

  •    Python

Provides a library to help you parse, validate, and generate General Transit Feed Spec (GTFS) feed files. See INSTALL for installation instructions.

transit-map - The server and client used in transit map simulations like

  •    Javascript

This project animates vehicles (markers) on a map using the public transport timetables to interpolate their positions along the routes (polylines). NEW: Plug and play your GTFS files ! Check the GTFS-viz for more information.

d3act - d3 with React

  •    Javascript

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications. Nicolas Hery's "Integrating D3.js visualizations in a React app" talks about letting d3 do all the work after React has finished rendering components in the DOM. d3act is inspired by @nicolas_hery's approach; create a lightweight React component wrapper that maps React's lifecycle methods componentDidMount, componentDidUpdate and componentWillUnmount into a d3 chart's create, update and unmount methods respectively.

transit-js - Transit for JavaScript

  •    Javascript

Transit is a data format and a set of libraries for conveying values between applications written in different languages. This library provides support for marshalling Transit data to/from JavaScript. transit-js will work with any ECMAScript-262 Edition 3 or newer JavaScript implementation provided that a JSON module that supplies parse and stringify methods is present. transit-js does not currently support encoding to MessagePack. Unlike the Java and Clojure implementations it relies on the non-streaming JSON parsing mechanism of the host JavaScript environment. This implementation's major.minor version number corresponds to the version of the Transit specification it supports.

Transit Feed Generator


Library for help the integration with Google Transit. This library generates the zipped file with data for Google Transit Feed, in the GTFS format

react-simple-maps - An svg map component built with and for React

  •    Javascript

An svg map component built with and for React. It allows the creation of pure react svg maps. React-simple-maps aims to make working with svg maps in react easier. It handles tasks such as panning, zooming and simple rendering optimization, and takes advantage of parts of d3-geo and topojson-client instead of relying on the entire d3 library.

d3-carto-map - A mapping API that uses D3 geospatial functionality

  •    Javascript

d3.carto is a library for creating layer-based maps using D3. It allows you to easily make tile and vector maps that take advantage of D3's amazing geospatial functionality. Take a look at the wiki to get started or if you'd prefer to see what d3.carto can do, there are some examples here and more as blocks.

textures - Textures.js is a JavaScript library for creating SVG patterns

  •    Javascript

Textures.js is a javascript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization. Read more on

Vue.D3.tree - Vue component to display tree based on D3.js layout.

  •    Vue

Update documentationVue components to display graphics based on D3.js layout. For all these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

intro-to-d3 - a D3.js tutorial

  •    CSS

This is the source for Square's Intro to D3.js tutorial, it's a brief intro to d3.js with examples.Make sure you have Jekyll.

d3.chart - A framework for creating reusable charts with d3.js.

  •    Javascript

A framework for creating reusable charts with D3.js. Otherwise, you can download it directly from this repository.

neo4jd3 - Neo4j graph visualization using D3.js

  •    Javascript

Neo4j graph visualization using D3.js. First of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.

d3-flame-graph - A D3.js plugin that produces flame graphs from hierarchical data.

  •    Javascript

A D3.js plugin that produces flame graphs from hierarchical data. If you don't know what flame graphs are, check Brendan Gregg's post.

radar-chart-d3 - Simple radar chart in D3.js

  •    Javascript

A reusable radar chart implementation in D3.js. Styleable, configurable and transition-capable. xOffset and yOffset are optional values that allows a developer to change the position of a specific label. It is important to add them in the first group of axes.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

kotojs - A framework for building reusable components with d3.js

  •    Javascript

A framework for creating reusable charts with D3.js, written in ES6. KotoJS is HEAVILY inspired by another reusable charting framework maintained by the Miso Project called d3.chart. I think that project is well designed and well documented. For those who are not familiar with d3.chart, the framework provides a logical way to ensure that all data-visualization components that are authored using the framework are done in a way that facilitates re-usablily.

navitia - The open source software to build cool stuff with locomotion

  •    C++

For a more friendly interface you can use the API through navitia playground (no matter the server used). The easiest way to have your own navitia is to use the navitia docker-compose.