I am building a simple animated nav element with use of d3 (for practice).
However my code is horribly verbose because I am creating the same arc (with a few exceptions) 3 times and hard coding each one. As a beginner I am struggling to clean this up with javascript. Working verbose code here: http://tributary.io/inlet/7919286
In order to do so I created JSON object to represent the characteristics unique to each arc.
var data = {
"arcs": [
{
"id": 1,
"innerRadius": 100,
"outerRadius": 150,
"x": 45,
"dy": 45,
"text": "About"
},
{
"id": 2,
"innerRadius": 160,
"outerRadius": 210,
"x": 45,
"dy": -15,
"text": "Github"
},
{
"id": 3,
"innerRadius": 220,
"outerRadius": 270,
"x": 45,
"dy": -75,
"text": "Contact"
}
]
}
I have tried unsuccessfully to call data with here: http://tributary.io/inlet/8408617 , but it's broken and I need help. Thank you.
The idea is to, instead of appending elements explicitly, use the .selectAll(...).data(...).enter().append(...) pattern to do that. That means that you need to replace all the code where you're currently explicitly appending elements with this. For the paths, that would look like this:
canvas.selectAll("path.arc").data(data.arcs)
.enter().append("path")
.attr("class", "arc")
.attr("id", function(d, i) { return "path" + (i+1); });
The rest is a bit tedious, but not too difficult -- simply repeat for everything else. The result is here.
Related
I wanted to know if it is possible to make highcharts tick lines point inwards rather than outwards? I didn't see any obvious setting in the API.
But this is quite typical in scientific plots.
So I would like that the tick markers should go upwards instead of downwards?
Thanks
You can achieve it by setting xAxis.tickPosition = 'inside':
Highcharts.chart('container', {
xAxis: {
tickPosition: 'inside'
},
series: [{
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/8earkyLp/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPosition
Using python I am trying to build a map with markers using Folium. This is working fine, however now I've started to try and add plot.ly graphs into the map which doesn't work well. Is it impossible to have javascript inside leaflets (Folium) popups?
The js code which is in the html file is shown below:
var marker_7ecf53df703f455c9b8e9342784a4fde = L.marker([-30.0,31.25], {
icon: new L.Icon.Default()
}
).addTo(map_698b07e412264d16ab4a7628d18d6a7a);
var popup_d63d578364d04568bda1b68bc0a870d7 = L.popup({maxWidth: '300'});
var html_deaec1fcc80d483faff605dcfa6691ff = $('<div id="html_deaec1fcc80d483faff605dcfa6691ff" style="width: 100.0%; height: 100.0%;"><div id="5be3c360-6f61-47fc-af22-c43d8a2c16ed" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("5be3c360-6f61-47fc-af22-c43d8a2c16ed", [{"marker": {"color": "rgb(106,81,163)"}, "r": [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5], "type": "area", "name": "11-14 m/s", "t": [0, 45, 90, 135, 180, 225, 270, 315]}], {"radialaxis": {"ticksuffix": "%"}, "title": "Wind Speed Distribution in Laurel, NE", "font": {"size": 16}, "orientation": 270, "legend": {"font": {"size": 16}}}, {"linkText": "Export to plot.ly", "showLink": true})</script></div>')[0];
popup_d63d578364d04568bda1b68bc0a870d7.setContent(html_deaec1fcc80d483faff605dcfa6691ff);
marker_7ecf53df703f455c9b8e9342784a4fde.bindPopup(popup_d63d578364d04568bda1b68bc0a870d7);
I include the popups like such:
for rowNum, rowValues in data.iterrows():
popup = folium.Html(polarHtml, script=True) # polarHtml is the html
folium.Marker([rowValues['latitude'], rowValues['longitude']], popup=folium.Popup(popup)).add_to(map_osm)
The map works fine if I just use simple HTML inside the popups. Does anybody know where this goes wrong?
I did "solve" it in the end. Although I am not a big fan of IFrames I ended up combining folium.HTML and folium.IFrame like so:
folium.Popup(folium.Html('aa<br>'+folium.IFrame(polarHtml, width='410px', height='410px').render(), script=True), max_width=2650)
Using C3.js, I am trying to generate a graph whose x-axis is a linear list of kilometres, and y-axis is the corresponding time - in format MM:SS.
The best I have been able to generate is the result of the below, which is the reverse of what I'm looking for. This produces a graph with times on the x-axis and kilometres on the y-axis. Could anyone advise how I could convert the below to a generate a graph with the x-axis KMs, and y-axis times. Thank you.
var km_chart = c3.generate({
"data": {
"x": "time",
"y": "kms",
"columns": [
["time", "04:00", "04:00", "04:15", "04:30", "04:15"],
["kms", 1, 2, 3, 4, 5]
]
},
"axis": {
"x": {
"type": "category"
}
},
"bindto": "#km_chart"
});
The simpliest solution would be to rotate your graph with:
"axis":{
<your stuff>
rotate: true
}
The y-axis is only accepting values, so you can switch your x/y-axis with rotate or you have to convert your time into some value. You could use 1234 as 12:34 for example.
I was wondering if there is a way to have css styling inside of this chart title.
chart.allLabels = [{
'text': "<strong style='color:#666;font-size:18px'>80</strong>",
'align': 'center',
'y': '100'
}];
This just shows as the literal string instead of styling the <strong> tag.
Is this possible?
Since labels on the chart are SVG nodes, they do not support HTML and related CSS.
Looking at your example, it seems that you need to apply the following to the whole label:
Make it bold
Set color to #666
Set font size to 18
All this is doable with label's properties:
chart.allLabels = [ {
"text": "80",
"align": "center",
"y": "100",
"bold": true,
"size": 18,
"color": "#666"
} ];
Another option is to use CSS, as #gerric suggested in a comment.
I am working on extending the example found here. I have a data source that will pull in data for different periods of time. The data is as expected and draws well individually. I added a timer to iterate through the result set. The following code is in the original example. There are three calls points, flyers, arcLines (only flyers is shown below)
svg.append("g").attr("class","flyers")
.selectAll("path").data(links)
.enter().append("path")
.attr("class","flyer")
.attr("d", function(d) { return swoosh(flying_arc(d)) })
I changed the code to this to allow updates and they kind of work. The lines/points/flyers are removed and only the data from the time interval are displayed.
var flyer_data = svg_flyers
.selectAll("path").data(links);
flyer_data
.exit().remove();
flyer_data
.enter().append("path")
.attr("class", "flyer")
.attr("d", function(d) {
return swoosh(flying_arc(d))
});
Now the data isn't displayed correctly when the points and lines are supposedly in focus. Only data that is right on the horizon is displayed before its clipped. There is another side effect of the above code. The bound data structure is changed correctly but the SVG gets more and more points/lines/arcs which are not displayed. This last observation is particular baffling with the ever growing SVG definitions. It slows down the browser after a few minutes.
I have created a gist with enough code to demonstrate the issue. The Gist can be found here.
Your link to gist isn't working.
However, depending on your situation you can select your object (in this case your path) by class or id. In the example I've provided you can give your path an id and refer to it.
var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
var lineData2 = [ { "x": 5, "y": 1}, { "x": 20, "y": 20},
{ "x": 10, "y": 40}, { "x": 40, "y": 60},
{ "x": 5, "y": 80}, { "x": 60, "y": 100}];
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
d3.select("svg")
.append("path")
.attr("id", "MyUniqueId")
.attr("d", lineFunction(lineData));
d3.select("#MyUniqueId")
.transition()
.duration(5000)
.attr("d", lineFunction(lineData2));
See js fiddle:
http://jsfiddle.net/3M54q/3/