javascript - D3: ¿se requiere el formato de datos para el mapa de calor del calendario cal-heatmap?

json d3.js

Question

Estoy tratando de trazar calendar-heatmap desde este enlace .

Busqué en toda la documentación, pero no pude encontrar ningún archivo de muestra para el data-format .

Aquí hay un enlace para la documentación, pero no hay un archivo de muestra para ello.

En la documentación, encuentro que estos datos se están importando datas-years.json . Pero no tengo ni idea de cómo es el formato. Alguien por favor ayúdame en esto.

Answer 1

Cal-Heatmap espera datos en un objeto JSON en el siguiente formato:

{
    "timestamp1": value1,
    "timestamp2": value2,
    "timestamp3": value3,
    ...
}

El valor puede ser cualquier número (entero o flotante).

Todas las marcas de tiempo están en segundos. Los segundos son ''segundos UTC'' (a veces también llamados ''segundos de época'' o ''segundos de Unix'') como el número de segundos desde 01-01-1970 00:00:00 para la fecha / hora GMT proporcionada. Aquí está la segunda calculadora UTC .

Hoy estamos alrededor de 1.388.000.000 UTC segundos. La muestra en el sitio muestra datos del año 2000, es por eso que sus segundos UTC son alrededor de 946.000.000 como vimos en el ejemplo del archivo JSON.

Lo bueno es que puede encontrar fácilmente en Internet cómo obtener segundos UTC de otros formatos de hora, y que podrá crear un archivo de datos que Cal-Heatmap espera. :)

Answer 2

Puede recuperar el archivo JSON directamente e inspeccionarlo en http://kamisama.github.io/cal-heatmap/datas-years.json .

Answer 3

Cal-heatmap espera datos en formato JSON

{
    "timestamp1": value1,
    "timestamp2": value2,
    "timestamp3": value3,
    ...
}

Como ya se dijo, las indicaciones de fecha y hora siempre deben estar en segundos y no en milisegundos (valor predeterminado de JavaScript).

O coloque sus datos en un archivo, luego pase ese archivo en la opción de data o pase directamente una variable de JavaScript:

var d = {946705035: 25};
var cal = new CalHeatMap();
cal.init({data: d}); // For variable
cal.init({data: "path/to/file.json"}) // For file, or URI

Cal-heatmap también puede entender el archivo en CSV y TSV.

En el caso cal-heatmap no comprende / no puede entender sus datos:

Si los datos son de una variable

Convierta sus datos en javascript en un objeto JSON antes de pasarlo a Cal-heatmap

Si los datos provienen de un archivo / uri

Establezca el datatype correcto, luego utilice la devolución de llamada afterLoadData() para leer el archivo y convertir el texto a un objeto json.

datatype especifica el motor del analizador utilizado para leer el archivo. Si su archivo está json, csv o tsv formateado, json en json , etc ... else, txt en txt para leer el archivo como texto sin formato.

Puede estudiar el ejemplo de Google Analytics , ilustra el uso de data devolución de llamada de data , datatype y afterLoadData() .

Answer 4

Aquí hay un programa de prueba aleatorio para generar aleatoriamente el archivo json.

Escenario: Mostrar presentación dentro de 12 meses incluyendo el mes actual. Si ha definido inicio -> apúntelo al mes 11 meses antes del mes actual y el archivo json debería funcionar perfectamente.

var data = generateRandomData();

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }


            function generateRandomData(){
                var date = new Date();

                var mind = date.valueOf();
                var maxd = date.setMonth(date.getMonth() - 11);

                var mins = 0;
                var maxs = 40;

                var retobj = {};

                for(var i=0;i<100;i++){
                    retobj[getRandomInt(mind,maxd)/1000] = getRandomInt(mins,maxs);
                }

                return retobj;
            }