Skip to content

Commit

Permalink
Merge pull request #16 from caocscar/master
Browse files Browse the repository at this point in the history
Fixed icon display issue
  • Loading branch information
choisteph authored Sep 23, 2019
2 parents 3ce2403 + 556e56a commit e594cea
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 48 deletions.
21 changes: 16 additions & 5 deletions static/js/dashboard.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// creates all charts
async function makeDashboard(fileName, placename, placetype, src) {
async function makeDashboard(fileName, placename, placetype) {
previous = "";
neutral = "fa-sort";
ascending = "fa-sort-asc";
Expand All @@ -10,7 +10,7 @@ async function makeDashboard(fileName, placename, placetype, src) {
DATA = await d3.csv(fileName, type);
CF = crossfilter(DATA);
srcDim = CF.dimension(d => d.src)
changeDataSource(src)
changeSrc()
if (placetype == 'county') {
countyDim = CF.dimension(d => d.county);
countyDim.filter(d => d === placename)
Expand Down Expand Up @@ -101,12 +101,23 @@ function resetAll() {
updateAll();
};

function changeDataSource(src) {
function changeSrc() {
const svgIcon = src === 'EMS' ? 'ambulance_icon_blues.svg' : 'morguetable_5.svg'
const txtIcon = src === 'EMS' ? 'ambulance' : 'morgue table'
tableIcon = L.icon({
iconUrl: '/static/markers/' + svgIcon,
iconSize: [25,25], // size of the icon
iconAnchor: [15,15], // point of the icon which will correspond to marker's location
});
d3.select('#datasource').text(`${src} - SIMULATED`)
d3.select('#dataicon')
.attr('src',`/static/markers/${svgIcon}`)
.attr('alt',`${txtIcon} represents ${src} data`)
srcDim.filter(d => d === src)
}

function updateDataSource(src) {
changeDataSource(src)
function updateSrc(source) {
src = source
changeSrc()
updateAll()
}
10 changes: 5 additions & 5 deletions static/js/htmlTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ function makeHtmlTable() {
table = d3.select("#sosTable")
thead = table.append('thead').append('tr')
.selectAll('th')
.data(d => headers)
.data(headers)
.join('th')
.text((d,i) => i = 1 ? formatHTMLthings(d): d)
.attr('class', (d,i) => headers[i] + " sortable")
Expand All @@ -20,11 +20,11 @@ function makeHtmlTable() {
// updates HTML table
function updateHtmlTable(data) {
row = tbody.selectAll('tr')
.data(data)
.join('tr')
.data(data)
.join('tr')
row.selectAll('td')
.data((d) => d3.values(d).slice(0,-3))
.join('td')
.data(d => d3.values(d).slice(0,-3))
.join('td')
.text((d,i) => i == 0 ? formatHTMLthings(d) : d)
};
function formatHTMLthings(d){
Expand Down
4 changes: 2 additions & 2 deletions static/js/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
function createMap() {// Mapbox section
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RjaG9pIiwiYSI6ImNqd2pkNWN0NzAyNnE0YW8xeTl5a3VqMXQifQ.Rq3qT82-ysDHcMsHGTBiQg';
layers = {
// 'main': L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'),
'Light': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10'),
'Dark': L.mapbox.styleLayer('mapbox://styles/mapbox/dark-v10'),
'Main': L.mapbox.styleLayer('mapbox://styles/stchoi/cjwky60dk0toy1cm8fnhngzrv')
Expand All @@ -25,7 +24,7 @@ function createMap() {// Mapbox section
color: '#72add4',
fillOpacity: 0.30
};
}
}

L.control.layers(layers).addTo(map); // add basemap control
featureLayer = L.mapbox.featureLayer().addTo(map);
Expand Down Expand Up @@ -54,6 +53,7 @@ function drawMarkers() {
.bindPopup(`<p>${formatDate(pt.date)}<br>${pt.county}<br>${pt.Age} ${pt.Race} ${pt.Gender}</p>`))
};
};

function updateMap(bounds) {
latDim.filter([bounds.getSouth(), bounds.getNorth()])
lngDim.filter([bounds.getWest(), bounds.getEast()])
Expand Down
41 changes: 5 additions & 36 deletions templates/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<div>
<button class="srcbutton" onclick="updateDataSource('EMS')"> EMS </button>
<button class="srcbutton" onclick="updateDataSource('ME')"> ME </button>
<button class="srcbutton" onclick="updateSrc('EMS')"> EMS </button>
<button class="srcbutton" onclick="updateSrc('ME')"> ME </button>
</div>
</li>
</ul>
Expand Down Expand Up @@ -119,11 +119,7 @@
<div class= "col-sm-4 text-left">
<h2 id="place">{{ data.titlename }}</h2>
<h4 id="datasource"></h4>
{% if data.src == 'EMS' %}
<img src = "/static/markers/ambulance_icon_blues.svg" alt = "ambulance represents EMS data">
{% elif data.src == 'ME' %}
<img src = "/static/markers/morguetable_5.svg" alt = "morgue table represents ME data">
{% endif %}
<img id='dataicon'>
<!-- {% if data.src == "ED" %}
<img src = "/static/markers/hospital_icon_blues.svg" alt = "hospital represents ED data">
{% endif %} -->
Expand Down Expand Up @@ -260,42 +256,15 @@ <h4>{{ thing }}</h4>
</div>
</div>
</footer>
<!-- setting leaflet-mapbox icons through Flask -->
{% if data.src == "EMS" %}
<script>
var tableIcon = L.icon({
iconUrl: '/static/markers/ambulance_icon_blues.svg',
iconSize: [25,25], // size of the icon
iconAnchor: [15,15], // point of the icon which will correspond to marker's location
});
</script>
<!-- {% if data.src == "ED" %}
<script>
var tableIcon = L.icon({
iconUrl: '/static/markers/hospital_icon_blues.svg',
iconSize: [25,25], // size of the icon
iconAnchor: [15,15], // point of the icon which will correspond to marker's location
});
</script>
{% endif %} -->
{% elif data.src == "ME" %}
<script>
var tableIcon = L.icon({
iconUrl: '/static/markers/morguetable_5.svg',
iconSize: [25,25], // size of the icon
iconAnchor: [15,15], // point of the icon which will correspond to marker's location
});
</script>
{% endif %}

<script>
// Mapbox - Flask variables
centerMapbox = {{ data.center }};
county_geojson = "{{ url_for('static',filename=data.f_geojson) }}";
zoomMapbox = {{ data.zoom }};

src = "{{ data.src }}";
// populate data graphics
makeDashboard("/static/data/map_fake.csv", "{{ data.placename }}", "{{ data.placetype }}", "{{ data.src }}");
makeDashboard("/static/data/map_fake.csv", "{{ data.placename }}", "{{ data.placetype }}");
</script>
</body>
</html>

0 comments on commit e594cea

Please sign in to comment.