Return to How to:

Embedding a D3 based visualisation

This one is a little more complicated (sort of), although if you’ve created a D3 visualization you know how to code, so probably not 🙂

Step 1: switch to text
Step 2: past in your custom HTML, CSS, and script
Step 3: add any text you think supports your visualization
Step 4: publish.

To save on having to transport from a remote location, if you would like to have your JS hosted locally on this server, email the admin and it’ll be uploaded.

The visualization enabled by the contents of the block quote below follows. Note this visualisation has NOT been updated to reflect the 2013 election result 🙂

Visualization

This visualisation builds on the information used in previous visualisations. Here you can look at the electorate data along multiple axis. Enjoy.

Size of Bubble
State
Party
Info:



Information used to build this visualisation.

Licences

This product (Electorates Three Ways) incorporates data that is:

© Commonwealth of Australia (Australian Electoral Commission) 2011

The Data (Commonwealth Electoral Boundaries (various years)) has been used in Electorates Three Ways with the permission of the Australian Electoral Commission. The Australian Electoral Commission has not evaluated the Data as altered and incorporated within Electorates Three Ways, and therefore gives no warranty regarding its accuracy, completeness, currency or suitability for any particular purpose.

Limited End-user licence provided by the Australian Electoral Commission: You may use Electorates Three Ways to load, display, print and reproduce views obtained from the Data, retaining this notice, for your personal use, or use within your organisation only.

Code

<style>
.hangLeft { 
float: left;
height: 50px;
}
.areaY{
position: absolute;
left:0px;
height: 470px;
width: 10px;
background-color: rgba(255, 255, 255, 0.1);
z-index: 2;
}
.areaX{
position: absolute;
left:50px;
top: 650px;
height: 10px;
width: 640px;
background-color: rgba(255, 255, 255, 0.1);
z-index: 2;
}
.chooseY{
position: absolute;
left: 50px;
height: 20px;
width: 180px;
z-index: 2;
display: none;
}
.chooseX{
position: absolute;
top: 620px;
height: 20px;
width: 180px;
z-index: 2;
display: none;
}
.filters {
  position: relative;
  left: 100px;
  width: 200px;
  height: 200px;
  background-color: lightgreen;
  border: 1px solid;
  display: none;
}
.graphMenus {
 border: 1px solid;
  width: 900px;
 z-index: 2;
}
#nodeHover { 
position: absolute;
left: 450px;
width: 150px;
height: 50px;
float: right;
  background-color: lightyellow;
display: none;
}
#V3 {
float: left;
border:1px solid black;
}
.bubble {
stroke: #000;
}
.vAxis path,
.vAxis line {
  fill: none;
  stroke: black;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.vAxis text {
    font-family: sans-serif;
    font-size: 8px;
}
.vYAxis path,
.vYAxis line {
  fill: none;
  stroke: black;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.vYAxis text {
    font-family: sans-serif;
    font-size: 8px;
}
</style>
This visualisation builds on the information used in previous visualisations. Here you can look at the electorate data along multiple axis. Enjoy.

<div class="hangLeft">
<div>Size of Bubble</div>
<div>
<select id='zAxisChoice'>
  <option selected>Margin (%)</option>
  <option>Land Area (SqKM) (%)</option>
  <option>Income Tax FY 2010-11 ($)</option>
</select>
</div>
</div>
<div class="hangLeft">
<div>State</div>
<div>
<select id='dFilter'>
    <option selected value="All">All</option>
    <option value="ACT">ACT</option>
    <option value="NSW">NSW</option>
    <option value="NT">NT</option>
    <option value="QLD">QLD</option>
    <option value="SA">SA</option>
    <option value="TAS">TAS</option>
    <option value="VIC">VIC</option>
    <option value="WA">WA</option>
</select>
</div>
</div>
<div class="hangLeft">
<div>Party</div>
<div>
<select id='pFilter'>
    <option selected value="All">All</option>
    <option value="ALP">Labor</option>
    <option value="CLP">Country Liberal</option>
    <option value="LP">Liberal</option>
    <option value="LNP">Liberal National (QLD)</option>
    <option value="NP">National</option>    
    <option value="GRN">Greens</option>
    <option value="IND">Independent</option>
</select>
</div>
</div>
</div>
<div id="V3">
<div class="areaY" id="areaYAxis">
</div>
<div class="chooseY" id="areaYAxisChoice">
<select id='yAxisChoice'>
  <option>Margin (%)</option>
  <option>Land Area (SqKM) (%)</option>
  <option selected>Income Tax FY 2010-11 ($)</option>
</select>
</div>
<div class="areaX" id="areaXAxis">
</div>
<div class="chooseX" id="areaXAxisChoice">
<select id='xAxisChoice'>
  <option>Margin (%)</option>
  <option selected>Land Area (SqKM) (%)</option>
  <option>Income Tax FY 2010-11 ($)</option>
</select>
</div>
<div id="nodeHover">Info:</div>
</div>
<script src="http://ausviz.com/sitelib/jquery-2.0.2.min.js"></script>
<script src="http://ausviz.com/sitelib/d3.v3.js" charset="utf-8"></script>
<script>
window.onorientationchange = function() {
  window.location.reload();
}
$.getScript("http://ausviz.com/sitelib/threeaxis.js", function(){
   // here you can use anything you defined in the loaded script
   renderV3('#V3');
});</script>