D3.js TopoJSON: state borders on county zoom

I have a D3 TopoJSON design to instantiate U.S. counties paths and then state paths (these are transparent, just to thicken the borders between the states). I am trying to add zoom and pan functionality, and have successfully gotten zoom on click. I have to hide the state objects when I zoom in, however, when […]

By OJT
Published
Categorized as angular, d3.js, javascript, topojson, types Tagged , , , ,

Angular D3 TopoJSON: Zoom Functionality

I have been struggling with making a functional choropleth map in D3 on Angular, and thus far have managed to piece together a tooltip and zoom-to-county-on-click functionality. I am currently trying to figure out: How to get the zoom to reset upon second click, but most examples online seem to use a different zoom functionality […]

By OJT
Published
Categorized as angular, d3.js, html, topojson, typescript Tagged , , , ,

Angular D3 TopoJSON functionality

I have an Angular app with a service to fetch the base data from here: https://cdn.jsdelivr.net/npm/[email protected]/counties-albers-10m.json I can successfully make my counties and borders appear, but I cannot create an interactivity (click zoom to counties, pan, zoom reset, tooltip, etc.). A lot of code below, hopefully someone out there can help me understand the Angular […]

By OJT
Published
Categorized as angular, d3.js, javascript, topojson, typescript Tagged , , , ,

Angular + C3.js — multiline time series chart from array of arrays

I have an Angular page with a C3 time series chart specified as follows: let chart = c3.generate({ bindto: "#chart", data: { x: ‘x’, columns: [ [‘x’, …this.aggregatedData.map(function (el) { return el["Date"]; })], [‘data1’, …this.aggregatedData.map(function (el) { return Math.ceil(el["Population"]); })] ] }, axis: { x: { type: ‘timeseries’, tick: { format: ‘%Y-%m-%d’ } } } […]

By OJT
Published
Categorized as angular, arrays, c3.js, javascript, typescript Tagged , , , ,

Angular: scaling element of component to remaining viewport height without scroll

I have an Angular single-page application with a shell component that contains a <router-outlet>, and a <mat-toolbar> header with height defined at 7vh. Within a child component, I want to include a JavaScript D3 map that automatically scales to the remaining height of the viewport without requiring vertical scroll. I have included a <div> wrapper […]

By OJT
Published
Categorized as angular, css, html, single-page-application Tagged , , ,

Angular Material: transition custom sidenav from long-form to icons without specifying widths

I have a <sidenav> that toggles between text-plus-icons and just icons effectively using a menu button, with <sidenav-content> auto-resizing with a transition. The <sidenav> itself does not transition. I have its width adjusting based on its contents at the moment, and prefer not to specify widths for each state, but when I try to call […]

By OJT
Published
Categorized as angular, angular-material, html, transition Tagged , , ,

How can I get image to resize to parent element in toolbar without stretch?

I am trying to add an image from a link to a button in a <mat-toolbar> and have it resize based on its parent span element. I have the following code, and I have tried a variety of different max-height, height, etc. methods, to no avail (the image winds up stretching well beyond the intended […]

By OJT
Published
Categorized as angular-material, css, html, image Tagged , , ,

Get image to resize to parent element in toolbar without stretch

I’m trying to add an image from a link to a button in a <mat-toolbar> and have it resize based on its parent span element. I have the following code, and I have tried a variety of different max-height, height, etc. methods, to no avail (the image winds up stretching well beyond the intended containing […]

By OJT
Published
Categorized as angular-material, css, html, image Tagged , , ,

Get <img> to resize parent element in toolbar

I am trying to add an <img> from a link to a button in a <mat-toolbar> and have it resize based on its parent <span>. I have the following code, and I have tried a variety of different max-height, height, etc. methods, to no avail (the image winds up stretching well beyond the intended containing […]

By OJT
Published
Categorized as angular-material, css, html, image Tagged , , ,

Angular Material: automatically scaling height of elements

I am looking for the best current method of automatically rescaling elements within an Angular (13.0.x) Material page framework. I have a static <mat-toolbar> as header, and a <mat-sidenav-container> with <mat-sidenav> of listed elements and <mat-sidenav-content>, like the following: <mat-toolbar> … </mat-toolbar> <mat-sidenav-container> <mat-sidenav> <mat-nav-list> <mat-list-item> … </mat-list-item> … </mat-nav-list> </mat-sidenav> <mat-sidenav-content> <mat-card> <router-outlet></router-outlet> </mat-card> […]

By OJT
Published
Categorized as angular, angular-material, css, html, mat-sidenav Tagged , , , ,

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq