Arrow icon
See all demos

Data Mapping

The Data mapping application is a helpful example of JointJS+ that highlights some of the prebuilt features such as exporting to SVG or linking diagram elements. The demo below allows you to map abstract data that is provided in a given format and experience the power of JointJS+.
Demo instructions
Add or remove joins between data, edit items, change the positions of elements, and export the diagram to SVG.

Made with JointJS+

The source code of this demo is available as part of the JointJS+ commercial license. Don't have a license yet? Start a trial and use the source code of this and many other demos for free, with no obligations, for 30 days.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS+

All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

The role of JointJS in building a Data mapping application

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications such as Data mapping a breeze. 

We equip developers with all the plugins they need to save time and focus their energy elsewhere such as:

  • Standard shapes
  • PaperScroller
  • CommandManager
  • Toolbar
  • Lightbox
  • ContextToolbar
  • Dialog
  • SVG
  • RecordScrollbar

New to this topic? Learn more about how Data mapping works 👇

What is Data mapping?

Today, businesses use dozens or hundreds of applications to manage all their activities and make the most of their data which lives in many different places, making it difficult, if not impossible, to report and analyse. Data mapping - which in a broader context falls under data management - is the process of mapping data from its original source to its destination. In other words, it is the mapping of data from one database to another.

It is important to distinguish between data mapping, data migration, data integration, data transformation and data warehousing. All of these concepts have different purposes in data management:

  • Data mapping: mapping data from one database to another,
  • Data migration: transferring data from one storage to another (one-time activity),
  • Data integration: transferring data from one storage to another (ongoing activity),
  • Data transformation: converting data from one format to another,
  • Data warehousing: storing data for further use.

The data mapping process

Data mapping is a five-step process that, when done correctly, helps companies take action based on data-driven insights.

1. Identify the data for mapping

Depending on your use case, you will want to define the data to be mapped.

2. Map the source and destination fields

In the data mapping process, there is always a source and a destination. Map fields - locations for a predetermined type of data - from one to the other to ensure that all data is transferred and ready for further use.

3. Transform (if needed)

Imagine you have a country field in your database. Some records may be stored as USA, others as United States. Both mean the same thing. In such cases, you may want to transform the data so you can work with a clean, analysis-ready database.

4. Test with a small data set

Caution is not a bad thing, especially when it comes to data transfer. Take a small set of your data and test that everything works as planned.

5. Go live

If the previous tests were successful, deploy the migration, integration or transformation.

6. Maintain and optimize

The process you needed to achieve - of which data mapping was the cornerstone - will require further review, maintenance and optimization.

Data mapping techniques

Data mapping does not always happen manually. I mean, it does not have to. There are, in fact, three techniques:

1. Automated

Sophisticated software equipped with machine learning helps automate data mapping and reduces the complexity of managing larger data sets. Companies like Tableau or Segment excel in this area.

2. Semi-automated

This is where software meets people, especially your developers. The team works with the software to map the data, which is a good practice for companies with smaller datasets or limited budgets.

3. Manual

Finally, the data can be mapped manually, which as expected has obvious limitations. Manual data mapping is suitable for one-off data migrations and small datasets.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get the source code of the Data mapping application, and go from zero to a fully functional app in no time.

Speed up your development with a powerful library