Dan Paul Smith

Interface and visualisation developer.

Showing posts with label Hack. Show all posts
Showing posts with label Hack. Show all posts

Friday, 19 April 2013

Wiki-read-easier

Have been using Wikipedia a lot recently, the text ran too wide. Fixed it up a little bit with some CSS:




You'll need to create a Wikipedia account, then go to Preferences > Appearance > Shared CSS for all themes (common.css) and paste this in.

You might want to adjust the height for the #toc (table of contents). 500px suits my screen.


div#content { font-family: Helvetica; font-size: 18px; background-color: white; border: 1px solid #A7D7F9; color: black; direction: ltr; margin-left: 30% !important; margin-top: -1px; padding: 1em; width: 40%; } #mw-panel { padding-left: 0.5em; visibility: hidden; } #toc, .toc, .mw-warning { left: 10px; position: fixed; top: 80px; } #left-navigation { left: 10px; } #right-navigation { left: 30%; margin-top: 2.5em; position: absolute; } #p-personal ul { list-style-image: none; list-style-type: none; margin: 0; padding-left: 29%; } table#toc.toc tbody tr td > ul { height:500px; overflow-y:auto; }

This guy spent a bit more time than me on his skin, much nicer:

/*
 * Style by Lupurus
 */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("wikipedia.org") {

}

@-moz-document regexp("(.*wikipedia.org/wiki/(?!.*:)(?!Main_Page).*)|(.*secure.wikimedia.org/wikipedia/../wiki/(?!.*:)(?!Main_Page).*)") {

#firstHeading {
    width: 800px !important;
    text-align: center !important;
    font-size: 4em !important;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: bold !important;
    text-shadow: 4px 4px 0 #DDD;
}
#firstHeading i:first-child {
    font-style: normal !important;
}
#firstHeading, h1, h2, h3, h4 {
    font-family: Palatino !important;
}

#bodyContent {
    width: 800px !important;
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-family: Palatino !important;
    font-size: 12pt !important;
}

/*
 * border around the article
 */
#content {
    -moz-box-shadow: 0px -10px 30px #BBB;
    -webkit-box-shadow: 0px -10px 30px #BBB;
    box-shadow: 0px -10px 30px #BBB;
    margin: auto !important; 
    width: 800px !important;
    padding: 80px !important; 
    padding-top: 20px !important;
}

body {
    background: #FFFFFF !important;
}

#content {
    background: #FFF !important;    /* removes the border of the menu */
}

/* margins */
.infobox, .tright, .vertical-navbox {
    margin: 0 0 0.5em 2em !important;
}
.tleft {
    margin: 0 2em 0.5em 0 !important;
}

/*
 * hide things
 */
#mw-head, #mw-head-base, #mw-page-base, #footer, .editsection {
    display: none !important;
}

#mw-panel {
    opacity: 0;
}

#mw-panel:hover {
    opacity: 1;
}

/*
 * numbering of the headings
 */
 body {
    counter-reset: headingOne;
 }
#toctitle h2:before {
    content: "" !important;
    counter-reset: headingOne;
}
h2 {
 counter-reset: headingTwo;
}
h2:before {
 counter-increment: headingOne;
 content: counter(headingOne) ".";
}
h3 {
    counter-reset: headingThree;
}
h3:before {
    counter-increment: headingTwo;  
 content: counter(headingOne) "." counter(headingTwo) ".";
}
h4 {
    counter-reset: headingFour;
}
h4:before {
    counter-increment: headingThree;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) ".";
}
h5:before {
    counter-increment: headingFour;
    content: counter(headingOne) "." counter(headingTwo) "." counter(headingThree) "." counter(headingFour) ".";
}

} 

Monday, 23 April 2012

Bathing Water Quality visualisation

Using the Environment Agency's bathing water quality data provided by DEFRA and UK Location, I've whipped up a very quick visualisation of my own - showing off indicators for faecal bacteria at the bathing sites.

The data source:

http://environment.data.gov.uk/doc/bathing-water.html?_view=basic&_properties=samplingPoint.lat,samplingPoint.long,latestSampleAssessment.faecalColiformCount,latestSampleAssessment.faecalStreptococciCount,latestSampleAssessment.totalColiformCount&_page=0&_sort=-latestSampleAssessment.faecalStreptococciCount

Notable parameters I used:
  • view = "basic" view
  • properties = lat, long, total coliform count, faecal coliform count, faecal streptococci count
  • page size = 500
  • sort = by faecal streptococci count (descending)
The steps to create the visualisation:
  • Realised I was quite interested in seeing where the bathing sites were that contained the most faecal bacteria (Blackpool area by the looks of it)
  • Tailored my own API call using instructions from the API documentation.
  • Tried using Yahoo Pipes and other connecting API thingys to see what I could do within about 5-10 minutes.
  • Decided to use Googles Fusion Tables as it can create maps from spreadsheet data
  • The Enviroment API offers several formats, so I just changed my API call to include ".csv" intsead of ".html".
  • Then, after spending the last half year developing the LinkedGov extension for Google Refine - I immediately thought of it as the first go-to tool to shape the data and make it fit for importing into some sort of mapping API.
  • I used Google Refine's faceting & number range features to decide how to split the bacteria counts into low, medium and high.
  • I exported the data from Refine as CSV to my computer.
  • I uploaded the CSV into Fusion Tables - and all the hard work was done for me!
  • Time taken = 15 minutes (I have experience with the Linked Data API - otherwise it would have taken me a little while longer to tailor the API call I wanted)
Please note: I have manually adjusted the banding points for the levels of bacteria so the visualisation showed a visually pleasing number of red, yellow and green markers. While a site may have a red marker - it could actually be of quite high water quality.

Total Coliform Count
Low-temperature electron micrograph of a clust...
Low-temperature electron micrograph of a cluster of E. coli bacteria, magnified 10,000 times. Each individual bacterium is oblong shaped. (Photo credit: Wikipedia)

Faecal Coliform Count



Faecal Streptococci Count
Gram-stained smear of streptococci
Gram-stained smear of streptococci (Photo credit: Wikipedia)

Thursday, 30 June 2011

MAudio Audiophile - An ongoing saga

I'm not sure how long I've had this piece of kit, but damn it's been a nightmare. It's literally a matter of luck whether it works and I've always spent just long enough for me to hit a lucky setting or switch that seems to touch it's sweet spot.

I'm documenting what I've done incase anyone else out there is Googling away while pulling their hair out.