MIME Type Error with Framework div usage.

Community Help
1

Hi. I am trying to port a pannable chart visualization from an observable cell to a framework context. The chart works fine in a regular observable notebook, but fails in framework with an error “your_module.js failed was blocked because of a disallowed MIME type (“text/plain”)…”.
My chart is nothing but a re-tread of this one: Pannable chart / D3 | Observable .

Based on commenting out code progressively trying to isolate the error, the offending line seems to be the use of a div:

const parent = d3.create("div");

Does this problem ring a bell with anyone? Googling indicates that you get the error because you have module that doesn’t end in .js, but I’m not seeing that so far in the list of required modules. I am using the “run npm dev” route exactly as detailed in Getting started | Observable Framework .

Below is more detail. Thanks for any advice!

More detail:

As shown in the example above, a parent div is created:
const parent = d3.create("div");

An SVG object and a stationary y axis are affixed to this parent div, and then a scrollable chart and x axis are attached to a body div and a corresponding svg object. Finally, the whole thing is yielded in the last lines of the class as:

yield parent.node();.

If you progressively comment out code, this use of a parent div is the first time the MIME type error is triggered.

END DETAIL

2

The error doesn’t sound related to the chart. There’s probably something else going on. Maybe you should share more of your code and details of your setup?

Here’s a working example (and source) of the D3 pannable chart example ported to Framework:

https://observablehq.observablehq.cloud/pangea/d3/pannable-chart

1 Like
3

Thanks so much for the assist. Below please find the relevant .js component, where I believe the error originates, the .md file that calls it, and the .tsv file of dummy data. I noticed that you used display(parent.node()); instead of “yielding” the parent node, so I tried that. As a result, the console error changed to “Uncaught (in promise) ReferenceError: display is not defined”.

Can I ask: what technical topics related to these errors should I master to become more self-sustaining, and less reliant on the forum?

.md code:

---
theme: [light, wide]
---


# New, Repeat and Churn Users by Month

```js
import {repeat_churn_users} from "./components/repeat_churn_users.js";
const new_repeat_users = FileAttachment("data/new_repeat_users.tsv").tsv({typed: true});

```

<div class="grid grid-cols-1">
  <div class="card grid-rowspan-1">
    ${resize(width => repeat_churn_users(new_repeat_users, {width}))}
  </div>
</div>

repeat_churn_users.js code:

import * as d3 from "npm:d3";

export function repeat_churn_users(data, {width}) {
  
  
  const totalWidth = width * 6;
  const height = width/3;
  const marginTop = 10;
  const marginRight = 10;
  const marginBottom = 60;
  const marginLeft = 40;
  const formatStringtoDate = d3.utcParse("%m-%d-%Y");
  const formatMon = d3.utcFormat("%b");
  const formatYear = d3.utcFormat("%Y");
  
  // Prepare the scales for positional and color encodings.
  // Fx encodes the user type.

  const fx = d3.scaleBand()
      .domain(new Set(data.map(d => d.rev_rec_month)))
      .rangeRound([marginLeft, totalWidth - marginRight])
      .paddingInner(0.1);

  // Both x and color encode the age class.
  const user_types = new Set(data.map(d => d.user_type));

  const x = d3.scaleBand()
      .domain(user_types)
      .rangeRound([0, fx.bandwidth()])
      .padding(0.05);

  const color = d3.scaleOrdinal()
      .domain(user_types)
      .range(d3.schemeCategory10.slice(0,user_types.size))
      .unknown("#ccc");
  
  // Y encodes the height of the bar.
  const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.uusers)]).nice()
      .rangeRound([height - marginBottom, marginTop]);

  // A function to format the value in the tooltip.
  // const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")

  const parent = d3.create("div");

  // Create the svg with the vertical axis. 
  parent.append("svg")
      .attr("width", width)
      .attr("height", height)
      .style("position", "absolute")
      .style("pointer-events", "none")
      .style("z-index", 1)
    .append("g")
      .attr("transform", `translate(${marginLeft},0)`)
      .call(d3.axisLeft(y).ticks(6))
      .call(g => g.select(".domain").remove())
      .call(g => g.select(".tick:last-of-type text").clone()
          .attr("x", 3)
          .attr("text-anchor", "start")
          .attr("font-weight", "bold")
          .text("$ Close"))
      ;

  
  // // Create a scrolling div containing the area shape and the horizontal axis. 
  const body = parent.append("div")
      .style("overflow-x", "scroll")
      .style("-webkit-overflow-scrolling", "touch");

  const svg = body.append("svg")
      .attr("width", totalWidth)
      .attr("height", height)
      .style("display", "block");  
  
  // // Append the horizontal axis.
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom})`)
      .call(d3.axisBottom(fx).ticks().tickFormat(function(d) {return formatMon(formatStringtoDate(d));}).tickSizeOuter(0))
      .call(g => g.selectAll(".domain").remove());

  const cond_tick = function (d) { 
    if (formatMon(formatStringtoDate(d))=='Jan') {return 5;}
    return 0;
    }
  
  svg.append("g")
      .attr("transform", `translate(0,${height - marginBottom*2/3})`)
      .call(d3.axisBottom(fx)
            .tickFormat(function(d) {
              if (formatMon(formatStringtoDate(d))=='Jan')
              {return formatYear(formatStringtoDate(d));}
                                    })
            .tickSize(cond_tick()))
      .call(g => g.selectAll(".domain").remove());
  
  // Append a group for each state, and a rect for each age.
  svg.append("g")
    .selectAll()
    .data(d3.group(data, d => d.rev_rec_month))
    .join("g")
      .attr("transform", ([rev_rec_month]) => `translate(${fx(rev_rec_month)},0)`)
    .selectAll()
    .data(([, d]) => d)
    .join("rect")
      .attr("x", d => x(d.user_type))
      .attr("y", d => y(d.uusers))
      .attr("width", x.bandwidth())
      .attr("height", d => y(0) - y(d.uusers))
      .attr("fill", d => color(d.user_type))
      ;


  display(parent.node());

  // Return the chart with the color scale as a property (for the legend).
  // return Object.assign(svg.node(), {scales: {color}});

  body.node().scrollBy(totalWidth, 0);
  
}

Dummy Data:

|rev_rec_month|user_type|uusers|
|---|---|---|
|01-01-2013|New User|1329|
|02-01-2013|Churning Out User|9|
|02-01-2013|New User|565|
|02-01-2013|Repeat User|36|
|03-01-2013|Churning Out User|22|
|03-01-2013|New User|118|
|03-01-2013|Repeat User|560|
|04-01-2013|Churning Out User|13|
|04-01-2013|New User|1489|
|04-01-2013|Repeat User|612|
|05-01-2013|Churning Out User|15|
|05-01-2013|New User|969|
|05-01-2013|Repeat User|1421|
|06-01-2013|Churning Out User|24|
|06-01-2013|New User|739|
|06-01-2013|Repeat User|821|
|07-01-2013|Churning Out User|22|
|07-01-2013|New User|1104|
|07-01-2013|Repeat User|121|
|08-01-2013|Churning Out User|23|
|08-01-2013|New User|674|
|08-01-2013|Repeat User|1926|
|09-01-2013|Churning Out User|12|
|09-01-2013|New User|132|
|09-01-2013|Repeat User|658|
|10-01-2013|Churning Out User|66|
|10-01-2013|New User|437|
|10-01-2013|Repeat User|3636|
|11-01-2013|Churning Out User|207|
|11-01-2013|New User|4155|
|11-01-2013|Repeat User|489|
|12-01-2013|Churning Out User|76|
|12-01-2013|New User|1865|
|12-01-2013|Repeat User|5511|
|01-01-2014|Churning Out User|6|
|01-01-2014|New User|135|
|01-01-2014|Repeat User|1152|
|02-01-2014|Churning Out User|41|
|02-01-2014|New User|352|
|02-01-2014|Repeat User|710|
|03-01-2014|Churning Out User|12|
|03-01-2014|New User|10|
|03-01-2014|Repeat User|1965|
|04-01-2014|Churning Out User|112|
|04-01-2014|New User|639|
|04-01-2014|Repeat User|1455|
|05-01-2014|Churning Out User|48|
|05-01-2014|New User|885|
|05-01-2014|Repeat User|548|
|06-01-2014|Churning Out User|87|
|06-01-2014|New User|110|
|06-01-2014|Repeat User|26|
|07-01-2014|Churning Out User|46|
|07-01-2014|New User|67|
|07-01-2014|Repeat User|1629|
|08-01-2014|Churning Out User|98|
|08-01-2014|New User|13|
|08-01-2014|Repeat User|3775|
|09-01-2014|Churning Out User|15|
|09-01-2014|New User|160|
|09-01-2014|Repeat User|2744|
|10-01-2014|Churning Out User|173|
|10-01-2014|New User|843|
|10-01-2014|Repeat User|3071|
|11-01-2014|Churning Out User|723|
|11-01-2014|New User|470|
|11-01-2014|Repeat User|4770|
|12-01-2014|Churning Out User|1282|
|12-01-2014|New User|5591|
|12-01-2014|Repeat User|7121|
|01-01-2015|Churning Out User|15|
|01-01-2015|New User|610|
|01-01-2015|Repeat User|2164|
|02-01-2015|Churning Out User|22|
|02-01-2015|New User|103|
|02-01-2015|Repeat User|799|
|03-01-2015|Churning Out User|35|
|03-01-2015|New User|33|
|03-01-2015|Repeat User|1707|
|04-01-2015|Churning Out User|24|
|04-01-2015|New User|208|
|04-01-2015|Repeat User|2345|
|05-01-2015|Churning Out User|12|
|05-01-2015|New User|39|
|05-01-2015|Repeat User|9|
|06-01-2015|Churning Out User|31|
|06-01-2015|New User|214|
|06-01-2015|Repeat User|2340|
|07-01-2015|Churning Out User|153|
|07-01-2015|New User|174|
|07-01-2015|Repeat User|335|
|08-01-2015|Churning Out User|3|
|08-01-2015|New User|23|
|08-01-2015|Repeat User|2956|
|09-01-2015|Churning Out User|21|
|09-01-2015|New User|35|
|09-01-2015|Repeat User|100|
|10-01-2015|Churning Out User|349|
|10-01-2015|New User|1610|
|10-01-2015|Repeat User|4061|
|11-01-2015|Churning Out User|1055|
|11-01-2015|New User|600|
|11-01-2015|Repeat User|1671|
|12-01-2015|Churning Out User|101|
|12-01-2015|New User|1237|
|12-01-2015|Repeat User|9642|
|01-01-2016|Churning Out User|84|
|01-01-2016|New User|54|
|01-01-2016|Repeat User|2640|
|02-01-2016|Churning Out User|111|
|02-01-2016|New User|32|
|02-01-2016|Repeat User|2760|
|03-01-2016|Churning Out User|121|
|03-01-2016|New User|8|
|03-01-2016|Repeat User|1925|
|04-01-2016|Churning Out User|24|
|04-01-2016|New User|76|
|04-01-2016|Repeat User|24|
|05-01-2016|Churning Out User|204|
|05-01-2016|New User|120|
|05-01-2016|Repeat User|3488|
|06-01-2016|Churning Out User|6|
|06-01-2016|New User|189|
|06-01-2016|Repeat User|2322|
|07-01-2016|Churning Out User|87|
|07-01-2016|New User|65|
|07-01-2016|Repeat User|560|
|08-01-2016|Churning Out User|92|
|08-01-2016|New User|48|
|08-01-2016|Repeat User|2929|
|09-01-2016|Churning Out User|135|
|09-01-2016|New User|21|
|09-01-2016|Repeat User|1083|
|10-01-2016|Churning Out User|196|
|10-01-2016|New User|1063|
|10-01-2016|Repeat User|1969|
|11-01-2016|Churning Out User|515|
|11-01-2016|New User|2935|
|11-01-2016|Repeat User|2800|
|12-01-2016|Churning Out User|1314|
|12-01-2016|New User|3642|
|12-01-2016|Repeat User|12108|
|01-01-2017|Churning Out User|37|
|01-01-2017|New User|241|
|01-01-2017|Repeat User|753|
|02-01-2017|Churning Out User|158|
|02-01-2017|New User|288|
|02-01-2017|Repeat User|3215|
|03-01-2017|Churning Out User|120|
|03-01-2017|New User|74|
|03-01-2017|Repeat User|3239|
|04-01-2017|Churning Out User|25|
|04-01-2017|New User|44|
|04-01-2017|Repeat User|3116|
|05-01-2017|Churning Out User|72|
|05-01-2017|New User|154|
|05-01-2017|Repeat User|1728|
|06-01-2017|Churning Out User|108|
|06-01-2017|New User|73|
|06-01-2017|Repeat User|170|
|07-01-2017|Churning Out User|18|
|07-01-2017|New User|82|
|07-01-2017|Repeat User|790|
|08-01-2017|Churning Out User|21|
|08-01-2017|New User|65|
|08-01-2017|Repeat User|1935|
|09-01-2017|Churning Out User|20|
|09-01-2017|New User|56|
|09-01-2017|Repeat User|2460|
|10-01-2017|Churning Out User|191|
|10-01-2017|New User|639|
|10-01-2017|Repeat User|992|
|11-01-2017|Churning Out User|356|
|11-01-2017|New User|1282|
|11-01-2017|Repeat User|2088|
|12-01-2017|Churning Out User|22|
|12-01-2017|New User|2325|
|12-01-2017|Repeat User|4154|
|01-01-2018|Churning Out User|86|
|01-01-2018|New User|7|
|01-01-2018|Repeat User|1903|
|02-01-2018|Churning Out User|69|
|02-01-2018|New User|60|
|02-01-2018|Repeat User|2333|
|03-01-2018|Churning Out User|10|
|03-01-2018|New User|77|
|03-01-2018|Repeat User|24|
|04-01-2018|Churning Out User|36|
|04-01-2018|New User|5|
|04-01-2018|Repeat User|3129|
|05-01-2018|Churning Out User|147|
|05-01-2018|New User|60|
|05-01-2018|Repeat User|985|
|06-01-2018|Churning Out User|17|
|06-01-2018|New User|258|
|06-01-2018|Repeat User|1718|
|07-01-2018|Churning Out User|93|
|07-01-2018|New User|19|
|07-01-2018|Repeat User|1808|
|08-01-2018|Churning Out User|42|
|08-01-2018|New User|118|
|08-01-2018|Repeat User|1436|
|09-01-2018|Churning Out User|78|
|09-01-2018|New User|246|
|09-01-2018|Repeat User|236|
|10-01-2018|Churning Out User|151|
|10-01-2018|New User|1402|
|10-01-2018|Repeat User|5659|
|11-01-2018|Churning Out User|1117|
|11-01-2018|New User|3411|
|11-01-2018|Repeat User|8095|
|12-01-2018|Churning Out User|1212|
|12-01-2018|New User|1131|
|12-01-2018|Repeat User|1922|
|01-01-2019|Churning Out User|35|
|01-01-2019|New User|126|
|01-01-2019|Repeat User|3502|
|02-01-2019|Churning Out User|71|
|02-01-2019|New User|156|
|02-01-2019|Repeat User|1758|
|03-01-2019|Churning Out User|91|
|03-01-2019|New User|157|
|03-01-2019|Repeat User|3021|
|04-01-2019|Churning Out User|102|
|04-01-2019|New User|17|
|04-01-2019|Repeat User|4402|
|05-01-2019|Churning Out User|112|
|05-01-2019|New User|21|
|05-01-2019|Repeat User|4851|
|06-01-2019|Churning Out User|56|
|06-01-2019|New User|138|
|06-01-2019|Repeat User|2112|
|07-01-2019|Churning Out User|26|
|07-01-2019|New User|574|
|07-01-2019|Repeat User|1766|
|08-01-2019|Churning Out User|107|
|08-01-2019|New User|107|
|08-01-2019|Repeat User|922|
|09-01-2019|Churning Out User|76|
|09-01-2019|New User|363|
|09-01-2019|Repeat User|3628|
|10-01-2019|Churning Out User|37|
|10-01-2019|New User|389|
|10-01-2019|Repeat User|5031|
|11-01-2019|Churning Out User|644|
|11-01-2019|New User|2240|
|11-01-2019|Repeat User|6678|
|12-01-2019|Churning Out User|443|
|12-01-2019|New User|2557|
|12-01-2019|Repeat User|7973|
|01-01-2020|Churning Out User|290|
|01-01-2020|New User|360|
|01-01-2020|Repeat User|3584|
|02-01-2020|Churning Out User|67|
|02-01-2020|New User|106|
|02-01-2020|Repeat User|104|
|03-01-2020|Churning Out User|705|
|03-01-2020|New User|1216|
|03-01-2020|Repeat User|861|
|04-01-2020|Churning Out User|347|
|04-01-2020|New User|3344|
|04-01-2020|Repeat User|8177|
|05-01-2020|Churning Out User|907|
|05-01-2020|New User|3741|
|05-01-2020|Repeat User|6751|
|06-01-2020|Churning Out User|606|
|06-01-2020|New User|296|
|06-01-2020|Repeat User|1505|
|07-01-2020|Churning Out User|634|
|07-01-2020|New User|1920|
|07-01-2020|Repeat User|6577|
|08-01-2020|Churning Out User|51|
|08-01-2020|New User|1226|
|08-01-2020|Repeat User|7216|
|09-01-2020|Churning Out User|210|
|09-01-2020|New User|41|
|09-01-2020|Repeat User|4050|
|10-01-2020|Churning Out User|259|
|10-01-2020|New User|1891|
|10-01-2020|Repeat User|8547|
|11-01-2020|Churning Out User|118|
|11-01-2020|New User|2086|
|11-01-2020|Repeat User|205|
|12-01-2020|Churning Out User|1799|
|12-01-2020|New User|12984|
|12-01-2020|Repeat User|14642|
|01-01-2021|Churning Out User|115|
|01-01-2021|New User|524|
|01-01-2021|Repeat User|1989|
|02-01-2021|Churning Out User|682|
|02-01-2021|New User|1077|
|02-01-2021|Repeat User|6585|
|03-01-2021|Churning Out User|56|
|03-01-2021|New User|752|
|03-01-2021|Repeat User|242|
|04-01-2021|Churning Out User|821|
|04-01-2021|New User|803|
|04-01-2021|Repeat User|4837|
|05-01-2021|Churning Out User|418|
|05-01-2021|New User|335|
|05-01-2021|Repeat User|2807|
|06-01-2021|Churning Out User|361|
|06-01-2021|New User|138|
|06-01-2021|Repeat User|6279|
|07-01-2021|Churning Out User|194|
|07-01-2021|New User|193|
|07-01-2021|Repeat User|4528|
|08-01-2021|Churning Out User|165|
|08-01-2021|New User|31|
|08-01-2021|Repeat User|626|
|09-01-2021|Churning Out User|184|
|09-01-2021|New User|218|
|09-01-2021|Repeat User|440|
|10-01-2021|Churning Out User|575|
|10-01-2021|New User|264|
|10-01-2021|Repeat User|7518|
|11-01-2021|Churning Out User|2133|
|11-01-2021|New User|3591|
|11-01-2021|Repeat User|11309|
|12-01-2021|Churning Out User|2624|
|12-01-2021|New User|691|
|12-01-2021|Repeat User|9281|
|01-01-2022|Churning Out User|192|
|01-01-2022|New User|524|
|01-01-2022|Repeat User|5079|
|02-01-2022|Churning Out User|93|
|02-01-2022|New User|20|
|02-01-2022|Repeat User|1260|
|03-01-2022|Churning Out User|244|
|03-01-2022|New User|11|
|03-01-2022|Repeat User|5063|
|04-01-2022|Churning Out User|135|
|04-01-2022|New User|188|
|04-01-2022|Repeat User|4516|
|05-01-2022|Churning Out User|370|
|05-01-2022|New User|256|
|05-01-2022|Repeat User|2130|
|06-01-2022|Churning Out User|221|
|06-01-2022|New User|127|
|06-01-2022|Repeat User|2890|
|07-01-2022|Churning Out User|373|
|07-01-2022|New User|157|
|07-01-2022|Repeat User|6087|
|08-01-2022|Churning Out User|272|
|08-01-2022|New User|140|
|08-01-2022|Repeat User|6579|
|09-01-2022|Churning Out User|169|
|09-01-2022|New User|35|
|09-01-2022|Repeat User|5564|
|10-01-2022|Churning Out User|431|
|10-01-2022|New User|38|
|10-01-2022|Repeat User|1759|
|11-01-2022|Churning Out User|3007|
|11-01-2022|New User|1819|
|11-01-2022|Repeat User|5786|
|12-01-2022|Churning Out User|2206|
|12-01-2022|New User|749|
|12-01-2022|Repeat User|11601|
|01-01-2023|Churning Out User|71|
|01-01-2023|New User|1024|
|01-01-2023|Repeat User|2046|
|02-01-2023|Churning Out User|342|
|02-01-2023|New User|246|
|02-01-2023|Repeat User|5840|
|03-01-2023|Churning Out User|435|
|03-01-2023|New User|229|
|03-01-2023|Repeat User|4558|
|04-01-2023|Churning Out User|517|
|04-01-2023|New User|22|
|04-01-2023|Repeat User|1594|
|05-01-2023|Churning Out User|214|
|05-01-2023|New User|9|
|05-01-2023|Repeat User|7549|
|06-01-2023|Churning Out User|487|
|06-01-2023|New User|66|
|06-01-2023|Repeat User|4847|
|07-01-2023|Churning Out User|171|
|07-01-2023|New User|213|
|07-01-2023|Repeat User|2106|
|08-01-2023|Churning Out User|416|
|08-01-2023|New User|454|
|08-01-2023|Repeat User|2421|
|09-01-2023|Churning Out User|978|
|09-01-2023|New User|434|
|09-01-2023|Repeat User|3536|
|10-01-2023|Churning Out User|741|
|10-01-2023|New User|456|
|10-01-2023|Repeat User|4234|
|11-01-2023|Churning Out User|3332|
|11-01-2023|New User|2870|
|11-01-2023|Repeat User|5877|
|12-01-2023|Churning Out User|1813|
|12-01-2023|New User|913|
|12-01-2023|Repeat User|1893|
|01-01-2024|Churning Out User|1618|
|01-01-2024|New User|814|
|01-01-2024|Repeat User|3177|
|02-01-2024|Churning Out User|204|
|02-01-2024|New User|133|
|02-01-2024|Repeat User|3986|
|03-01-2024|Churning Out User|1749|
|03-01-2024|New User|392|
|03-01-2024|Repeat User|2028|
|04-01-2024|Churning Out User|4299|
|04-01-2024|New User|132|
|04-01-2024|Repeat User|1089|
|05-01-2024|Churning Out User|497|
|05-01-2024|New User|5|
|01-01-2013|Churning Out User|0|
|05-01-2024|Repeat User|0|
|01-01-2013|Repeat User|0|