Public
Edited
Nov 28, 2023
Importers
G2Plot = require("@antv/g2plot")
G2 = require("@antv/g2@4.0.2");
ex_data=FileAttachment("data_viz_dreadlocks - experience (1).csv").csv({typed:true})
both_groups_data=FileAttachment("grouped_bar.csv").csv({typed:true})
group2=FileAttachment("data_viz_dreadlocks - trust_hire.csv").csv({typed:true})
subjective_data=FileAttachment("subjective.csv").csv({typed:true})
stima_data=FileAttachment("data_viz_dreadlocks - perception.csv").csv({typed:true})
bar_width=700
// bar_group={
// const wrapper = html`
// <div style="display: flex; flex-direction: column; align-items: left; width:${bar_width}px; height: 450px;">
// <h3 style="text-align: left; padding-bottom:7px">I would trust someone withdreadlocks</h3>
// <div style="height: 340px; width:600px;"></div>
// </div>
// `;
// // <p style="text-align: left; font-size:12px"></p>
// const container = wrapper.querySelector('div');
// const logoWidth = 150; // Adjust based on how much space you want for the data source
// const logoHeight = (130 / 910) * logoWidth;
// const data_source = html`
// <div style="display: flex; justify-content: space-between; width: 600px; align-items: center; padding: 0 10px;">
// <p style="font-size:10px; text-align: left; flex: 1;">Data Source: Survey Conducted by CCIJ</p>
// <div style="flex-shrink: 0;"><img src=${await ccijImageCredit.src} alt="CCIJ Image Credit" style="width: ${logoWidth}px; height: ${logoHeight}px;" /></div>
// </div>
// `;
// wrapper.appendChild(data_source);
// yield wrapper;
// const bar = new G2Plot.Column(container, {
// title: {
// visible: true,
// },
// height: 340,
// data: sort_group,
// padding: 'auto',
// margin: 'auto',
// appendPadding:10,
// limitInPlot:false,
// xField: 'group',
// yField: "Number",
// seriesField:'Opinion',
// isPercent: true,
// isStack: true,
// smooth: true,
// renderer:'svg',
// columnWidthRatio: 0.3,
// color: (d) => {
// switch (d.Opinion) {
// case 'Strongly disagree': return '#e8694a';
// case 'Disagree': return '#f7ae9c';
// case 'Neutral': return '#e0e3ea';
// case 'Agree': return '#94b2f2';
// case 'Strongly agree': return '#5b8ef8';
// default: return '#000000'; // Default color if no match
// }
// },
// legend: {
// position: 'top', // Set the legend position to top
// },
// yAxis: {
// label: {
// formatter: (text, item, index) => `${text*100}%`
// }
// },
// });
// bar.render();
// }
wordCloud2
import {wordCloud2, s, s2} from "@anndawn/d3-wordcolud"
style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light.css`
)}">`
style2 = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/animations/scale.css`
)}">`
ccijImageCredit = FileAttachment("CCIJ-image-credit (1).svg").image()
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.
