Find Jobs
Hire Freelancers

d3.js Stacked Bar Chart

$30-5000 USD

Berlangsung
Dibuat lebih dari 11 tahun yang lalu

$30-5000 USD

Dibayar ketika dikirim
I would like to display data as a stacked bar chart using the [d3.js][1] library. An example of using d3 to create this type of chart is [here][2]. My data includes values for an arbitrary number of foodstuffs within a set of categories for a set of countries. I have attached two example datasets: * [login to view URL] * [login to view URL] The function would firstly calculate an overview of the data by category, as illustrated in: * [login to view URL] * [login to view URL] It would then display this overview in a stacked bar chart as illustrated in the attached OverviewChart.jpg. This chart has two buttons: 1. Switch Dataset - transitions chart between data in [login to view URL] and [login to view URL] 2. See Details - transitions chart to corresponding detail dataset, as illustrated in [login to view URL] attached These would be nice smooth [transitions][3]. In reality this data would be sent to the browser as a JSON. One of the first tasks would be to define the ideal format of this JSON. The function should be able to cope with any data in a JSON of the right format (i.e. any number of categories, foodstuffs and countries) Please let me know if you have any questions or suggestions. More details are in the "Additional Information" box. Kind Regards, Derek. ## Deliverables COLOURS The colours should be generated in a predictable way from the country names. For example here is a hackish way to do it: // adds up the unicode value of each character in the id, and takes the last two digits as a "predictable random number" function id_to_index(id) { var bin = 0; for (var i = 0; i < [login to view URL]; i++) { bin += [login to view URL](i); } bin = [login to view URL](); var code = [login to view URL]([login to view URL] - 2, 2); return Number(code) / 100; } var color_scale = [login to view URL]("#CCCCCC", "#24466B"); color = color_scale(id_to_index([login to view URL])); TOOLTIPS The country names should be displayed in an HTML tooltip which appears near the mouse when the user hovers over the bar segment, stays static while the mouse moves within that bar segment, and then disappears when the mouse moves off the chart or to a new bar segment. Here is some example formatting which gives white text in a semi-transparent grey rounded box: #tooltip { display: none; position:absolute; color: white; font-size: 14px; background: rgba(0,0,0,0.5); padding: 5px 10px 5px 10px; -moz-border-radius: 8px 8px; border-radius: 8px 8px; transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; } Please use no additional libraries to generate this tooltip. The only libraries used in this application should be d3.js and JQuery. PRESENTATION It would be acceptable to send the results in a single file that demonstrates the behaviour. However I'm looking for people that I can work with on an ongoing basis and there are two things I'm looking out for: 1) People with a knowledge of Rails and who could demonstrate this working in a Heroku Rails Bootstrap app. OR 2) People who are very good at Javascript which means understanding [JavaScript patterns][4] and being able to contribute to a library like [nvd3][5] or having a familiarity with frameworks like [backbone.js][6] Please let me know if you have any questions or suggestions, Kind Regards, Derek.
ID Proyek: 2782905

Tentang proyek

1 proposal
Proyek remot
Aktif 11 tahun yang lalu

Ingin menghasilkan uang?

Keuntungan menawar di Freelancer

Tentukan anggaran dan garis waktu Anda
Dapatkan bayaran atas pekerjaan Anda
Uraikan proposal Anda
Gratis mendaftar dan menawar pekerjaan
Diberikan kepada:
Avatar Pengguna
See private message.
$238 USD dalam 14 hari
4,9 (8 ulasan)
3,7
3,7

Tentang klien

Bendera UNITED KINGDOM
Sevenoaks, United Kingdom
5,0
20
Memverifikasi Metode pembayaran
Anggota sejak Jan 20, 2012

Verifikasi Klien

Terima kasih! Kami telah mengirim Anda email untuk mengklaim kredit gratis Anda.
Anda sesuatu yang salah saat mengirimkan Anda email. Silakan coba lagi.
Pengguna Terdaftar Total Pekerjaan Terpasang
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Memuat pratinjau
Izin diberikan untuk Geolokasi.
Sesi login Anda telah kedaluwarsa dan Anda sudah keluar. Silakan login kembali.