Trying to build scatter plot custom visualization in google data studio. Stuck with creating scales and axes.Help me in creating the scales and axes to the plot.
Please note:- have removed the d3.min.js, dscc.min.js library from the myViz.js file to make it readable
I have created the below files in google cloud platform and have been referring to http://bl.ocks.org/weiglemc/6185069 for building the scatter plot.
files on the google cloud platform
manifest.json, myViz.css, myViz.json, myViz.js
https://imgur.com/fJyh71C (Please refer to the following image on how the graph looks)
The problem with data studio custom visualization is i am not able to use the tradition d3 code in the file and have to rely on the pure vanilla java script to do the coding.
I have been able to pull the data(Cereal Name, calaories and proteins) from the following file
https://docs.google.com/spreadsheets/d/1daWp7XM7PJbDLjkXxdVAeVtPem6HJfFEIYRSesQKbpI/edit?usp=sharing
however m not sure how to do the scaling on the chart. The below code helps me in ploting the scale and axes but i will need the vanilla javascript equivalent of the code.
// setup x
var xValue = function(d) { return d.Calories;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d["Protein (g)"];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
can you guys help in getting the code. iam pasting the working code which reulted in scatter plot as shown in the pic above.
manifest.json
{
"name": "My Visualizations",
"organization": "MyOrg",
"description": "My first visualization package.",
"logoUrl": "https://logo",
"organizationUrl": "https://url",
"supportUrl": "https://url",
"privacyPolicyUrl": "https://url",
"termsOfServiceUrl": "https://url",
"packageUrl": "https://url",
"supportUrl": "https://url",
"devMode": true,
"components": [
{
"name": "myViz",
"description": "My first Community Visualization",
"iconUrl": "https://url",
"resource": {
"js": "gs://peekri/myViz.js",
"config": "gs://peekri/myViz.json",
"css": "gs://peekri/myViz.css"
}
}
]
}
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 2
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}
myViz.js
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = {
top: 10,
bottom: 50,
right: 10,
left: 10
};
const padding = {
top: 15,
bottom: 15
};
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value ?
data.style.barColor.value.color :
data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let xlargestMetric = 0;
let ylargestMetric = 0;
rowData.forEach(function(row) {
xlargestMetric = Math.max(xlargestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row) {
ylargestMetric = Math.max(ylargestMetric, row["barMetric"][1]);
});
console.log(xlargestMetric);
console.log(ylargestMetric);
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
met2: row["barMetric"][1],
dimId: data.fields["barDimension"][0].id
};
/*// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;*/
// create the "circle"
let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", 3.5);
circle.setAttribute("cx", barData["met"]);
circle.setAttribute("cy", barData["met2"]);
circle.style.fill = fillColor;
/*rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;*/
svg.appendChild(circle);
/* // add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);*/
});
document.body.appendChild(svg);
}
dscc.subscribeToData(drawViz, {
transform: dscc.objectTransform
});
