Frontend Developer – Interactive Chart & Map Visualization
Budget: ₹12,500 – ₹37,500 INR
Project Overview:
We need an interactive visualisation screen that displays analogue and digital charts alongside a map showing the direction of travel. The screen should synchronise time-based data across all components for smooth user interaction.
Key Requirements:
- The left section will display multiple analogue and digital charts.
- The right section will show a map illustrating the direction or path travelled.
- On hovering over any chart, a vertical line should appear across all charts to indicate readings at that specific time.
- Simultaneously, the map should highlight or point to the location corresponding to that time.
- A time scroller (timeline) should be placed above both the charts and map to allow users to zoom and filter data based on a selected time range.
- On hovering over the timeline, the same synchronised interaction should occur — the charts should show readings, and the map should point to the exact location for that time.
Technical Preferences:
- Strong experience with React.js (preferred) or similar modern frontend frameworks.
- Familiarity with data visualization libraries such as Recharts, Chart.js, D3.js, or similar.
- Experience integrating maps (Google Maps, Leaflet, or Mapbox) with real-time or time-synced data.
- Understanding of synchronized crosshair hover, timeline scrubbers, and interactive tooltips.
- Ability to work with JSON data containing analog/digital readings and GPS coordinates.
We need an interactive visualisation screen that displays analogue and digital charts alongside a map showing the direction of travel. The screen should synchronise time-based data across all components for smooth user interaction.
Key Requirements:
- The left section will display multiple analogue and digital charts.
- The right section will show a map illustrating the direction or path travelled.
- On hovering over any chart, a vertical line should appear across all charts to indicate readings at that specific time.
- Simultaneously, the map should highlight or point to the location corresponding to that time.
- A time scroller (timeline) should be placed above both the charts and map to allow users to zoom and filter data based on a selected time range.
- On hovering over the timeline, the same synchronised interaction should occur — the charts should show readings, and the map should point to the exact location for that time.
Technical Preferences:
- Strong experience with React.js (preferred) or similar modern frontend frameworks.
- Familiarity with data visualization libraries such as Recharts, Chart.js, D3.js, or similar.
- Experience integrating maps (Google Maps, Leaflet, or Mapbox) with real-time or time-synced data.
- Understanding of synchronized crosshair hover, timeline scrubbers, and interactive tooltips.
- Ability to work with JSON data containing analog/digital readings and GPS coordinates.