The District of Columbia government has created its open data site using the Esri ArcGIS open data platform. This provides several widget and card elements for easy drag, drop and configuration provided users have a mature ArcGIS Online organization containing data and web apps. In addition to these, DC government has created a collection of its own custom elements. Here you will find code samples for DC open data elements along with helpful steps to begin.
We are excited that you have chosen to lead and build a DC open data site. Just remember, your site's primary purpose is to be an open data site - explore, engage, educate and enrichment via data. Begin by working with a smaller focus. You can always grow the site and its pages.
Identify an Open Data Team
Administrator - one admin who will build and manage the site
Content Editors - group who will author written narratives, create web apps, quality check
Data Curators - group who will act as data owners, quality check and work with OCTO to publish
IT Leads - some agencies have developers or IT leads who may want to participate
Inventory Agency Content
Data on http://opendata.dc.gov
Apps by agency employees
New data to curate
Open data sites use Bootstrap to create custom elements. We recommend familiarizing yourself with Bootstrap concepts. Edits to these code samples can be done in a standard text document editor such as Notepad in Windows, or in Microsoft Word. We however recommend using an html editor. Here are some easy to use,
Visual Studio Code
Atom
Pycharm
We use PNG files for images. Use these sizes for images,
480 x 270 for Card Thumbnails
102 x 102 for Medallions
800 x 500 for Featured Image
Row banner images are subjective, but larger is better. Sites are responsive so we've used 5300 x 1800 and 2100 x 400.
Esri shares content to help you get moving so take a look at these. Find more at http://resources.esri.com or http://www.esri.com/videos.
Designing Your Site
Customizing Open Data
Create a Cascade Story Map
Create a Story Map Journal
This collection of elements is designed for use with Esri's opendata site Layout Builder. Elements are created within Text Cards and organized into Rows.
We are one DC government. Let's do our best to provide cohesive open data sites. Please make sure these are included in your site,
| Term | Use |
|---|---|
| div | Defines elements; does not have any defined style of its own |
| br | Inserts a break between elements |
| a | Used to define text that links to a url or resource; text between the open and closing tag will be linked; see href |
| p | A standard tag used for text, not always necessary but can help with code readability |
| ul | An unordered list; the opening tag that contains li elements |
| li | List items contained within ul or ol elements |
| img | Used to place an image; must be paired with a 'scr' tag to link file |
| span | allows for the insertion of style elements within another element |
| h# | This tag applies a header style to the text within; 1 being the largest and 6 being the smallest |
| href="" | Used in conjunction with 'a' tag; place url or source link in opening tag to make related text linked |
| src="" | Used in conjunction with 'img' tag; place url for img link in opening tag to add linked image |
| alt="" | Allows for 'alt' text to be included; important to readability of pages for page readers |
| col-'size'-'value' | The way Bootstrap defines the page behavior; 'size' defines the screen size where the behavior occurs; 'value' defines how much of the page the object fills |
| Tip | and Why |
|---|---|
| Create a staging page | the layout builder does not have an undo feature or auto-save, we recommend testing out new elements on a staging page and only adding them to your main page when they are ready. |
| Think small | be careful not to overcrowd the home page and consider instead using pages for initiatives and other more in depth content. |
| Saving images | store images on a dc.gov content manager or other approved source. |
| Keep the comments | comment text, between <-- and -->, allows for instruction and explanation in the code. Make sure to include the commented text for future admin. |
| Testing | preview the site on multiple browsers, across different screen sizes, operating systems, and devices to help insure that content doesn't break for certain groups of users. |
| Ask for peer review | we are a team, and no one is as smart as all of us. |
See CONTRIBUTING.md
See LICENSE.md"# opendatadc-opendataSiteSamples"