d3plus / d3plus-react Goto Github PK
View Code? Open in Web Editor NEWReact components for d3plus visualizations.
License: MIT License
React components for d3plus visualizations.
License: MIT License
The current README mentions the possibility of using a global .d3plus.js config file, but it seems this functionality was removed in favor of context based loading
Could be nice to have updated examples in the README of context providers
First let me start by thanking you for creating this amazing package. Literally the best data visualization package for react!
I am trying to add some styling to the legend, like increasing the font size, font family, add margins, font-weight, borders . Would this be done with d3plus-react?
I been able to do add some style with CSS but I don't think is the right way to do it. Also how can I do the same for the tooltips. I been using the docs in d3plus.org but haven't been able to find it.
Thanks!
I noticed the one popular use case for D3Plus missing is the bubbles chart. In particular, the one in which you are able to drill down into individual nodes (nested hierarchy). This is my normal D3 implementation for example: http://selotec.io/prototype/react/#/map. Any plan on implementing something like this?
Hi everyone. Thanks for developing and maintaining this package.
I'm encountering a strange error when trying to use d3plus-react
in a Next.js project.
In particular I'm trying to use the GeoMap
component.
Install d3plus-react
, import GeoMap
in custom component and use with custom data.
The mere fact of importing the GeoMap
throws a build-time error: SyntaxError: Unexpected token 'export'
.
d3plus-react
GeoMap
from d3plus-react
import { useEffect, useState } from "react";
import { Geomap } from "d3plus-react";
import { getJSON } from "../utils";
const PointMap = ({ dataApiUrl }) => {
const [data, setData] = useState(null);
useEffect(() => {
getJSON(dataApiUrl)
.then(res => setData(res))
.catch(console.error);
}, []);
return (
data &&
<Geomap
className="pointmap"
config={{
zoom: true,
ocean: '#fff',
legend: false,
data: data,
groupBy: 'city',
label: d => d.city,
point: d => [d.longitude, d.latitude],
pointSize: d => d.value,
pointSizeMin: 1,
projection: 'geoMercator',
tiles: true,
tilesUrl: 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png',
attribution: false
}}
/>
);
};
export default PointMap;
"d3plus-react": "^1.1.1",
"next": "12.0.10",
"react": "17.0.2",
"react-dom": "17.0.2"
Let me know you I can provide any other information. Thanks a lot.
Francesco
Branch | Build failing π¨ |
---|---|
Dependency | d3plus-plot |
Current Version | 0.5.10 |
Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As d3plus-plot is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you itβs very likely also breaking them.
I recommend you give this issue a very high priority. Iβm sure you can resolve this πͺ
The new version differs by 3 commits .
62577d7
adds explicit x2 and y2 configs
233be0f
fixes discrete axis styling when flipped
6f02185
compiles v0.5.10
See the full diff.
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
Hi,
I'm trying to have a custom treemap tile with the name and the percentage like the stock one but I need to manually modify it because on the data that I have the IDs of the tiles aren't unique.
Here's my mocked dataset:
const newData = [
{ parent: 'Group 1', id: 'alpha', value: 29 },
{ parent: 'Group 1', id: 'beta', value: 10 },
{ parent: 'Group 1', id: 'gamma', value: 2 },
{ parent: 'Group 2', id: 'alpha', value: 29 },
{ parent: 'Group 2', id: 'beta', value: 25 },
];
And here's my treemap config:
const methods = {
data: newData,
groupBy: ['parent', 'id'],
size: 'value',
tooltipConfig: {
title: (d) => `${d.parent} - <span>${d.name}</span>`,
},
shapeConfig: {
label: (d) => {
console.log(d);
return [d.id, **_calculatedShareHere_**];
},
},
};
How can I get the calculated share?
First of all, thank you for making this technology available for free.
I would like to know if it is possible to create a click event and/or a mouseover event that changes the color of the selected element on the map. Here is the code for the events I have captured:
on: {
mouseover: (d, i: any) => { console.log(d, i) },
click: (d: any) => { filterTreemapData(d) }
}
I also provide the image, in this example I would like to color the states on the map above.
Thank you in advance.
Hi everyone!
I'm creating a Treemap and I need to customize it. Following the documentation and making a few attempts, I was able to make all the changes that interested me, with the exception of handling the hover behavior.
I would need to create two separate custom behaviors for hovering over the chart and over the legend. Is this possible?
Up until now, I've tried modifying the hover
and mouseenter
methods, but to no avail.
Thanks a lot for your work.
Michela
Hi Dave,
I tried to change links color using shapeConfig, but it didn't work
shapeConfig: {
Line: {
stroke: "red"
}
}
this is the full config obj
const methods = {
links: this.state.links,
nodes: this.state.nodes,
color: (d: any) => d['color'],
label: (d: any) => d['OccupationTitle'],
hover: (d: any) => d['id'],
zoom: true,
tooltipConfig: {
title: (d: any) => d['OccupationTitle'] + '<br>',
body: (d: any) => {
let info: string = `<p>${d['sector']}</p>
<li> Automation Risk: ${d['AutomationRisk']}</li>
<li> Education Level: ${d['EducationLevel']}</li>
`
return info
},
shapeConfig: {
Line: {
stroke: "red"
}
}
}
}
But, if I changed the path stroke color in CSS, it will work. In my case, I want link color to be based on a function, so CSS will not work.
Hi @davelandry,
I've been using d3plus-react extensively now; I like everything about it. It takes a couple of days to know all the names of the props you need. But, once you know them it's amazing.
So I tried to use the network graph, but for some reason, it only accepts this format for links (index of the node in the nodes array).
const methods = {
links: [
{source: 0, target: 1},
{source: 0, target: 2},
{source: 3, target: 4},
{source: 3, target: 5},
{source: 5, target: 0}
] ,
nodes: [
{id:'alpha', x: 1, y: 1},
{id:'beta', x: 2, y: 1},
{id:'gamma', x: 1, y: 2},
{id:'epsilon', x: 3, y: 2},
{id:'zeta', x: 2.5, y: 1.5},
{id:'theta', x: 2, y: 2}
],
}
let network = <Network config={methods} />
when I try to create the links based on the string value matching the id of the node, it just doesn't work.
const methods = {
links: [
{source: 'alpha', target: 'beta'},
{source: 'alpha', target: 'gamma'},
{source: 'epsilon', target: 'zeta'},
{source: 'epsilon', target: 'theta'},
{source: 'theta', target: 'alpha'}
] ,
nodes: [
{id: 'alpha', x: 1, y: 1},
{id: 'beta', x: 2, y: 1},
{id: 'gamma', x: 1, y: 2},
{id: 'epsilon', x: 3, y: 2},
{id: 'zeta', x: 2.5, y: 1.5},
{id: 'theta', x: 2, y: 2}
],
}
let network = <Network config={methods} />
Hi,
I tried to change the color of the y-axis, but for some reason is not passing the prop.
This's my code:
let methods = {
data: this.state.dataset,
x:'year',
y:'publications',
xConfig:{
title:'Year',
},
yConfig:{
title:'Publications',
},
yAxis: {
barConfig: {
stroke: '#ffffff'
}
},
stacked: true,
}
let stackViz = false
if (this.state.dataset && this.state.dataset.length > 1) {
stackViz = <BarChart config={methods} />
}
Also, how can I pass a new range of colors? I tried a couple of ways, but it didn't work, and I didn't find any example that has a similar case.
Thanks :)!
Hi,
Does d3plus-react currently include the ColorScale component? I tried to import it as a stand-alone component, but it didn't work.
Thanks.
Hi,
Iβm trying to add a search function to search the network nodes based on ids. Is there a way to activate a particular node to have a similar effect to "node click"?
I tried to trigger a click event on the selected node, but it didn't work.
active: d => {
if(d['id'] === node) {
let id = `d3plus-Shape d3plus-Circle d3plus-id-${d['id']}`
let n = document.getElementsByClassName(id)
n.click()
}
I also tried this approach
let node = "914"
Network.config({
active: d => {
if(d['id'] === node) {
return true
}
return false
}
}).render()
Was trying to chase an issue down with some weird styling that broke after an upgrade. Looks like the CSS in the project was relying on having d3plus visualizations like <Geomap>
get wrapped by default in a class with the name viz
. But seems like that is no longer the default behavior.
Possible cause might be even though Viz.js sets defaultProps
with className: "viz"
it looks like other instances e.g. Geomap wipe that out by overwriting the default props on the class: Geomap.defaultProps = {type};
Hi,
I'm trying to change the color of the links, and it's not clear in the documentation how to do so.
const methods = {
links: this.state.nodes,
nodes: this.state.links,
color: (d: any) => d['color'],
label: (d: any) => d['OccupationTitle'],
hover: (d: any) => d['id'],
zoom: true,
}
Thanks
Hi, I'm using treemap in this package. It works well but after I hide the treemap, the tooltip doesn't hide. The .d3plus-tooltip
is still there in the DOM.
Hello guys I'm a noob in d3plus-react. I only want to display a lineplot in my App.js using but I have this bug TypeError: Cannot read property '__transition' of undefined. I'm using Google Chrome and Mac Os X.
:
Chart Component :
import React from 'react';
import './.d3plus';
import "../node_modules/d3";
import { LinePlot } from "d3plus-react";
class Chart extends React.Component {
state = {
data: [
{"year": 1991, "name":"alpha", "value": 17},
{"year": 1992, "name":"alpha", "value": 20},
{"year": 1993, "name":"alpha", "value": 25},
{"year": 1994, "name":"alpha", "value": 33},
{"year": 1995, "name":"alpha", "value": 52},
{"year": 1991, "name":"beta", "value": 36},
{"year": 1992, "name":"beta", "value": 32},
{"year": 1993, "name":"beta", "value": 40},
{"year": 1994, "name":"beta", "value": 58},
{"year": 1995, "name":"beta", "value": 13},
{"year": 1991, "name":"gamma", "value": 24},
{"year": 1992, "name":"gamma", "value": 27},
{"year": 1994, "name":"gamma", "value": 35},
{"year": 1995, "name":"gamma", "value": 40}
]
};
render () {
const {data} = this.state;
const config = {
data,
x: "year",
y: "value",
text: "name"
};
return (
<div>
<h1>Progreso: </h1>
<div>
<LinePlot config={{ config }} />
</div>
</div>
);
}
}
export default Chart;
App.js :
class App extends React.Component {
render() {
return (
<div className="App">
<Router>
<div>
<Breadcrumbs mappedRoutes={routes} />
<switch>
<Route exact path="/" component={Login}/>
<Route exact path="/welcome" component={Welcome}/>
<Route exact path="/welcome/ficha" component={Ficha}/>
<Route exact path="/welcome/horario" component={Horario}/>
<Route exact path="/welcome/progreso" component={Chart}/>
</switch>
</div>
</Router>
</div>
);
}
}
First off , thank you for creating this for react. It's working great except for the tooltips which once they are opened remain open even when the page unloads for another screen.
I am using the GeoMap with points defined. When you hover over the point it displays some information and when you click on the point the user is navigated away from the page. The issue is the information displayed in the tool tip never disappears until you go back to the map and hover over another point.
Any ideas on how to fix this issue would be greatly appreciated since there doesn't not appear to be a handle to the svg objects anywhere.
const methods = {
//status: 0 good, 50 -out of range 100- critical
data: data
,
pointSizeMax: 5,
pointSizeMin: 1,
// hides ColorScale, but still allows coloring shapes
colorScalePosition: false,
colorScale:"status",
colorScaleConfig:{
color: ["blue", "green", "red"],
},
groupBy:["label"],
color:{
value: "status"
},
label:(d)=> {
return d.label ;
},
legend: false,
point:(d)=> {
return [d.lon, d.lat];
},on: {
"click.shape": (d) => this.poolSelectHandler(d),
},
};
geoGraph = <Geomap config={methods} /> ;
////
poolSelectHandler = (d) => {
this.props.onSetCompanyId(d.cId);
this.props.history.push( '/info/');
};
This is happening in all browsers, Chrome, Firefox and Safari on a Mac Desktop.
I installed the version 1.2.0 and that does not have the required packages. The src
folder contains only D3PlusContext module, but not all the others (AreaPlot, BarChart and so on)
Install the library, import the modules as the documentation explains to make it work
Install the library, import modul and get the error ERROR in ./node_modules/d3plus-react/es/index.js 1:0-53 Module not found: Error: Can't resolve './src/AreaPlot' in
(the same for the other modules)
npm install d3plus-react
Hi,
While changing the y-axis domain of a bar chart, bars are overlapping the x-axis. How can i avoid this?
Version: "d3plus-react": "1.0.1'
Reference: d3plus/d3plus#480
Hi @davelandry
I was trying to create a grouped horizontal bar chart, and I wanted my x-axis to be on top as a log scale.
There are two issues; first, the axises overlaps not sure if there's a way to add padding using the react wrapper. Second, since I have a different number of bars in each year, the group padding is not efficient with all cases and as you can see it makes the bars super tiny. Is there a way where I can fix this problem?
let methods = {
data: this.state.dataset,
discrete: 'y',
x: 'citations',
y: 'year',
xConfig:{
orient: 'top',
scale: 'log',
title: 'Citations',
titleConfig: {
fontColor: '#fff',
font: 'Open Sans'
},
barConfig: {
stroke: 'transparent',
},
shapeConfig: {
labelConfig: {
fontColor: '#fff',
font: 'Open Sans'
},
stroke: '#fff'
},
gridConfig: {
stroke: '#transparent',
}
},
yConfig: {
title:'Year',
titleConfig: {
fontColor: '#fff',
font: 'Open Sans'
},
barConfig: {
stroke: '#ffffff'
},
shapeConfig: {
labelConfig: {
fontColor: '#fff',
font: 'Open Sans'
},
stroke: '#fff'
},
gridConfig: {
stroke: 'transparent'
}
},
legend: false,
shapeConfig: {
fill: d => colorScale(d.year),
fontFamily: 'Open Sans'
}
}
timeLine = <BarChart config={methods} />
Thanks!!
dependent on d3plus/d3plus-viz#168
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.