OpenData.dc.gov site Code Snippets

What is Here

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.

Get Organized

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

Gather Your Toolbox

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

How to Use

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.

Start by copying the code samples into a text, hmtl text editor or prefered staging area

Follow the stepped comments identified by the exclamation marks

Replace dummy image links with your image links

Look for text that are in ALL CAPS and replace those with your text - including titles, paragraphs, web links, emails, etc.

Paste your final edited code sample into a Text Card in the open data Row.

Shared Values

Data visualized is data downloadable. If the data isn't available, let's not have our users "window shop" here.

Increase the use of existing content with links, narratives, agency sites, other open data sites, colleague web apps.

Create opportunities for engagement. Create citizen buy-in to your story – “how is, has been or will… my say be used?”

Author impactful narratives to story tell the data and illuminate the problem follow by resolution. It's okay to use pronouns.

No kitchen sink apps or pages with overloaded content. Rather, focused stories and supporting app.

There are 900+ data layers in opendata.dc.gov. Consider it as a source.

Must Haves

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,

All app cards need a data download link

The third column in footer element needs to remain, linking to important dc.gov resources

On homepage, the Tools for Building & Development row needs to remain however we can work with placement and coloring

Glossary

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

Tips for Usage

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.

Contributing

See CONTRIBUTING.md

License

See LICENSE.md"# opendatadc-opendataSiteSamples"