Published
Edited
May 10, 2020
1 fork
md`# videos`
d3 = require("d3@5", "d3-textwrap")
graphData = FileAttachment("topic_test@6.json").json()
allNodesNames = graphData.nodes.map(function(d){return d.tag});
margin = ({top: 20, bottom: 20, left: 30, right: 30});
height = 1000 - margin.top - margin.bottom;
width = 3000
yScale = d3.scalePoint()
.domain(allNodesNames)
.range([0,height])
xScale_vids_ufo = d3.scalePoint()
.domain(videonames_ufo)
.range([0, width])
xScale_vids_aliens = d3.scalePoint()
.domain(videonames_aliens)
.range([0, width])
xScale_vids_space = d3.scalePoint()
.domain(videonames_space)
.range([0, width])
ufo_vids = graphData.nodes[0].top_vids_conspi
aliens_vids = graphData.nodes[1].top_vids_conspi
space_vids = graphData.nodes[2].top_vids_conspi
videos = d3.merge([ufo_vids, aliens_vids, space_vids])
videonames_ufo = ufo_vids.map(function(d){return d.title});
videonames_aliens = aliens_vids.map(function(d){return d.title});
videonames_space = space_vids.map(function(d){return d.title});
videos.title
topic1 = {
const container = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+margin.bottom))
const wrap = d3.textwrap()
.bounds({height:250, width:450});
wrap.padding(10);
const arcGroup = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("font-family", "Montserrat")
const nodes = arcGroup.selectAll("nodes")
.data(graphData.nodes)
.enter().append("circle")
.attr("cx", margin.left+450)
.attr("cy", d => (yScale(d.tag)+50)/1.5)
.attr("r", function(d) {return d.frequency/8;})
.attr("fill", "darkgrey")
.attr("id", d => d.id)
.attr("font-size", 14)
const nodeLabels = arcGroup.selectAll("nodeLabels")
.data(graphData.nodes)
.enter().append("text")
.attr("x",margin.left+450)
.attr("y", d => (yScale(d.tag)+50)/1.5)
.attr("fill","white")
.style("text-anchor","middle")
.style("alignment-baseline","central")
.text(d => d.tag)
const frequency = arcGroup.selectAll("frequency")
.data(graphData.nodes)
.enter().append("text")
.attr("x",margin.left+570)
.attr("y", d => (yScale(d.tag)+50)/1.5)
.attr("fill","firebrick")
.style("text-anchor","middle")
.style("alignment-baseline","central")
.text(d => "# of tags: "+d.frequency)
const ufo_image = arcGroup.selectAll("thumbnails_ufo")
.data(ufo_vids)
.enter().append("image")
.attr("xlink:href", function(d) {return d.thumbnail})
.attr('width', 0)
.attr('height', 150)
.attr("x", d => (xScale_vids_ufo(d.title)/4))
.attr("y", 100)
const ufo_title = arcGroup.selectAll("title_ufo")
.data(ufo_vids)
.enter().append("text")
.attr("x",d => (xScale_vids_ufo(d.title)/4 + 100))
.attr("y", 270)
.style("font", "7px montserrat")
.attr("fill","none")
.style("text-anchor","middle")
.style("alignment-baseline","central")
.text(d => d.title)
// .call(wrap)
const aliens_image = arcGroup.selectAll("thumbnails_aliens")
.data(aliens_vids)
.enter().append("image")
.attr("xlink:href", function(d) {return d.thumbnail})
.attr('width', 0)
.attr('height', 770)
.attr("x", d => (xScale_vids_aliens(d.title)/4))
.attr("y", 100)
const aliens_title = arcGroup.selectAll("title_aliens")
.data(aliens_vids)
.enter().append("text")
.attr("x",d => (xScale_vids_aliens(d.title)/4 + 100))
.attr("y", 580)
.style("font", "7px montserrat")
.attr("fill","none")
.style("text-anchor","middle")
.style("alignment-baseline","central")
.text(d => d.title)
// .call(wrap)
const space_image = arcGroup.selectAll("thumbnails_space")
.data(space_vids)
.enter().append("image")
.attr("xlink:href", function(d) {return d.thumbnail})
.attr('width', 0)
.attr('height', 1400)
.attr("x", d => (xScale_vids_space(d.title)/4))
.attr("y", 100)
const space_title = arcGroup.selectAll("title_space")
.data(space_vids)
.enter().append("text")
.attr("x",d => (xScale_vids_space(d.title)/4 + 100))
.attr("y", 900)
.style("font", "7px montserrat")
.attr("fill","none")
.style("text-anchor","middle")
.style("alignment-baseline","central")
.text(d => d.title)
// .call(wrap)
// When the user mouses over a node,
// add interactive highlighting to see connections between nodes
nodes.on('mouseover', function(d, i) {
// highlight only the selected node
d3.select(this).style("fill", "black");
ufo_image
.attr('width', function (ufo_imaged) {
return d.tag == "ufo"? 200 : 0;})
ufo_title
.attr('fill', function (ufo_textd) {
return d.tag == "ufo"? 'black' : 'none';})
aliens_image
.attr('width', function (aliens_imaged) {
return d.tag == "aliens"? 200 : 0;})
aliens_title
.attr('fill', function (aliens_textd) {
return d.tag == "aliens"? 'black' : 'none';})
space_image
.attr('width', function (space_imaged) {
return d.tag == "space"? 200 : 0;})
space_title
.attr('fill', function (aliens_textd) {
return d.tag == "space"? 'black' : 'none';})
// do the animation; see the posts on arc animation for explanation
});
// remove highlighting when user mouse moves out of node by restoring default colors and thickness
nodes.on('mouseout', function (d, i) {
nodes.style("fill", "darkgrey");
ufo_image.attr('width', 0);
ufo_title.attr("fill", "none");
aliens_image.attr('width', 0);
aliens_title.attr("fill", "none");
space_image.attr('width', 0);
space_title.attr("fill", "none");
});
return container.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.