With vida.io, you can quickly create new data visualizations. But how would you collect the data? There are now powerful and easy to use tools for this task. In this article, I will show you how to use import.io to extract web data and create d3 map visualization.
- Download import.io app.
- Register your account and and login.
- Create a new dataset. This will open a new tab.
- Click Add Data menu and select “Create new Source” from drop down.
- Enter wikipedia data source into import.io URL browser: http://en.wikipedia.org/wiki/Obesity_in_the_United_States
- Extract data and upload to import.io. Final data will look like this:
Once we are done with you can download data from import.io to CSV format. It is now ready for visualization on vida.io. Register an account if you don’t have one.
- Open d3-map page.
- Select “US Map States – Choropleth” template and clone to your account.
- Rename visualization (e.g. Obesity in the United States) and add description.
- Go to data tab and import downloaded CSV file above. Click Save to save data.
- Go to properties tab, select state_and_district_of_columbia for Map State field and overweight_incl_obese_adults_number for Map Value field.
- Click Save to refresh visualization. Here’s the final visualization:
That’s it! Check out more templates on Explore section.
Here’s a video tutorial that walks you through all the steps above:
by Phuoc Do
Phuoc (Phu) Do is co-founder of Vida Lab, a software development company in Seattle. His company is building vida.io to make d3.js easier to use. You can quickly clone new visualization with d3 templates. Phuoc is an expert in d3 visualization. He has more than 10 years of experience working with large scale software projects.
Turn the web into data for free
Create your own datasets in minutes, no coding required
Powerful data extraction platform
Point and click interface
Export your data in any format
Unlimited queries and APIs