How to Deploy D3 in Heroku (Django App)? - django

Question

I'm trying to create a data visualization for yahoo finances, which I've successfully done locally using Django 1.9.2. It scrapes yahoo finances and then uses D3 to create bubble charts with tooltips.
However, the bubbles don't show up:
https://pure-woodland-72284.herokuapp.com/
This is what appears in Heroku logs.
Heroku Log Error Messages
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'rest_framework_swagger',
'mysite'
)
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
# insert your TEMPLATE_DIRS here
os.path.join(os.path.dirname(__file__), 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
# Insert your TEMPLATE_CONTEXT_PROCESSORS here or use this
# list if you haven't customized them:
'django.contrib.auth.context_processors.auth',
'django.template.context_processors.debug',
'django.template.context_processors.i18n',
'django.template.context_processors.media',
'django.template.context_processors.static',
'django.template.context_processors.tz',
'django.contrib.messages.context_processors.messages',
],
},
},
]
REST_FRAMEWORK={
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
]
}
MIDDLEWARE_CLASSES = (
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.security.SecurityMiddleware',
)

Answer 1

Your console have the following errors:
Mixed Content: The page at 'https://pure-woodland-72284.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lobster+Two:400,700italic'. This request has been blocked; the content must be served over HTTPS.
Hence you are getting 'Uncaught ReferenceError: $ is not defined' error since you did not really imported your libraries
So I'm guessing that you have imported your scripts (jquery,d3.tip,cssfonts) from their cdn and used http while importing. Try importing them with https and see if that solves your problem