Temporal data / Visualization for Transparency Foundation (Fundació ViT)

Visualization for Transparency Foundation (Fundació ViT)

Visualization can transform the reach of open data and revolutionize transparency and accountability.

Workspace

Public

2022-23 MVTEC Data Visualization Programming module

Edited

Feb 14, 2023

date1 = new Date(); //returns the current date/time

date2 = new Date("10/25/2022");

date2.toDateString()

strDate = "20221025";

date3wrong = new Date(strDate); //Date("20221025")

dt2 = strDate.substring(6,8);

dt2 + 1;

dt1 = parseInt(strDate.substring(6,8));

dt1 + 1;

date3init = {

var dt1 = parseInt(strDate.substring(6,8));

var mon1 = parseInt(strDate.substring(4,6));

var yr1 = parseInt(strDate.substring(0,4));

var date = new Date(yr1, mon1-1, dt1); //Warning with the month!!!!

return date;

}

dateCreator = function(str){

var dt1 = parseInt(str.substring(6,8));

var mon1 = parseInt(str.substring(4,6));

var yr1 = parseInt(str.substring(0,4));

var date = new Date(yr1, mon1-1, dt1);

return date;

};

date3 = dateCreator(strDate);

date3.toDateString()

weather= await FileAttachment("GironaWeatherData.csv").csv();

desiredData = weather.map(d => {

var newd = {

date : new Date(d["Date time"]),

maxTemp : +d["Maximum Temperature"],

minTemp : +d["Minimum Temperature"],

condition : d["Conditions"], //d.Conditions

precipitation : +d["Precipitation"]

}

return newd;

});

xScale = d3.scaleUtc()

.domain(d3.extent(desiredData, d => d.date))

.range([margin.left, width - margin.right])

xScale2 = d3.scaleTime()

.domain(d3.extent(desiredData, d => d.date))

.range([margin.left, width - margin.right])

p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]]);

lineMaxTemp = d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d.maxTemp))

.x(d => xScale(d.date))

.y(d => yScale(d.maxTemp))

lineMinTemp = d3.line()

.defined(d => !isNaN(d.date))

.x(d => xScale(d.date))

.y(d => yScale(d.minTemp))

yScale = d3.scaleLinear()

.domain([d3.min(desiredData, d => d.minTemp), d3.max(desiredData, d => d.maxTemp)]).nice()

.range([height - margin.bottom, margin.top])

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(xScale))

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(yScale))

temporalchart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox",[0, 0, width, height]);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", lineMaxTemp);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", lineMinTemp);

return svg.node();

}

line = key => {return d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d[key]) )

.x(d => xScale(d.date))

.y(d => yScale(d[key]))}

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox",[0, 0, width, height]);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('maxTemp'));

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('minTemp'));

return svg.node();

}

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox",[0, 0, width, height]);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

const lineMissingMaxTemp = d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d.maxTemp) && d.maxTemp !== -300)

.x(d => xScale(d.date))

.y(d => yScale(d.maxTemp));

svg.append("path")

.datum(missingWeather)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

// .attr("d", lineMissingMaxTemp);

.attr("d", line('maxTemp'));

return svg.node();

}

curvedline = key => {return d3.line()

.curve(d3[curve]) //Curve function defines which strategy is used

//Usually you have something similar to .curve(d3.curveCardinal)

.defined(d => !isNaN(d.date) && !isNaN(d[key]) )

.x(d => xScale(d.date))

.y(d => yScale(d[key]))}

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox",[0, 0, width, height]);

const yScale = d3.scaleLinear()

.domain([d3.min(desiredData, d => d.minTemp), d3.max(desiredData, d => d.maxTemp)]).nice()

.range([height - margin.bottom, margin.top]);

const xScale = d3.scaleUtc()

.domain(d3.extent(desiredData2, d => d.date))

.range([margin.left, width - margin.right]);

const curvedline = key => {return d3.line()

.curve(d3[curve])

//.curve(d3.curveCardinal)

.defined(d => !isNaN(d.date) && !isNaN(d[key]) )

.x(d => xScale(d.date))

.y(d => yScale(d[key]))};

const xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(xScale))

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData2)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", curvedline('maxTemp'));

svg.selectAll("circle")

.data(desiredData2)

.join("circle")

.attr("cx", d => xScale(d.date))

.attr("cy", d => yScale(d.maxTemp))

.attr("r", 3)

.style("fill", "steelblue");

return svg.node();

}

desiredData2 = desiredData.filter(d => {const newdate = new Date("09/01/2020"); return d.date < newdate;});

area = d3.area()

.x(d => xScale(d.date))

.y0(d => yScale(0))

.y1(d => yScale(d.maxTemp))

area(desiredData)

areachart = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", 'steelblue')

.attr("d", area)

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line('minTemp'));

return svg.node();

}

area2 = d3.area()

.x(d => xScale(d.date))

.y0(d => yScale(d.minTemp))

.y1(d => yScale(d.maxTemp))

meanline = d3.line()

.defined(d => !isNaN(d.date) && !isNaN(d.maxTemp) && !isNaN(d.minTemp) )

.x(d => xScale(d.date))

.y(d => yScale((d.maxTemp + d.minTemp)/2));

areachart2 = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(xAxis);

svg.append("g")

.call(yAxis);

svg.append("path")

.datum(desiredData)

.attr("fill", 'steelblue')

.attr("d", area2)

svg.append("path")

.datum(desiredData)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", meanline);

return svg.node();

}

stockValues = (await require('vega-datasets@1'))['stocks.csv']()

niceStockValues = stockValues.map(d => {return {

name : d.symbol,

date : new Date (d.date),

price : +d.price};});

groupedData = d3.groups(niceStockValues, d => d.name);

stockxScale = d3.scaleTime()

.domain(d3.extent(niceStockValues, d => d.date))

.range([margin.left, width - margin.right])

stockyScale = d3.scaleLinear()

.domain([0, d3.max(niceStockValues, d => d.price)]).nice()

.range([height - margin.bottom, margin.top]);

groupedData.map(d=> d[0])

stockColorScale = d3.scaleOrdinal()

.domain(groupedData.map(d=> d[0]))

.range(d3.schemeCategory10);

d3.schemeCategory10

stockxAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(stockxScale).ticks(width / 80).tickSizeOuter(0))

stockyAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(stockyScale))

.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("Stock price"))

stockLine = d3.line()

.defined(d => !isNaN(d.date))

.x(d => stockxScale(d.date))

.y(d => stockyScale(d.price))

multilinechart2 = {

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.call(stockxAxis);

svg.append("g")

.call(stockyAxis);

svg.selectAll('.line')

.data(groupedData) //Now is data instead of datum! Because there are multiple lines

.join('path')

.attr("class", "line")

.attr("d", d => stockLine(d[1]))

.attr("stroke", d => stockColorScale(d[0]))

.style("fill", "none")

.style("stroke-width", 1.5);

return svg.node();

}

weatherVega = (await require('vega-datasets@1'))['weather.csv']()

cities = [...new Set(weatherVega.map(d=>d.location))];

weatherVega[2000]

margin = ({top: 20, right: 30, bottom: 30, left: 60})

d3 = require("d3@7");

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more