yuridrcosta

@yuridrcosta·5 public vizzes

Double Bar Chart in D3.js

A double bar chart displays the frequency of words and entities extracted from text data, with quantities plotted along the x-axis and labels along the y-axis. The visualization uses d3.scaleLinear and d3.scaleBand to map the data, rendering SVG rectangles and text labels for each value. It loads data from a CSV file using d3.csv, converting numeric strings to floats before rendering. The chart includes axes generated with d3.axisLeft and d3.axisBottom, with an interactive hover effect that changes the bar color via CSS.

Oct 27, 2020

Loading thumbnail…

Bar Chart in D3.js

This example visualizes the frequency of words extracted from news texts as a horizontal bar chart. The bars are colored orange and display their numeric quantity at the end of each bar. The chart is rendered using D3.js v6 with an SVG approach, utilizing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. The data is loaded from a CSV file using `d3.csv`.

Oct 16, 2020

Loading thumbnail…

Scatter Plot usando D3.js

This scatter plot displays the relationship between horsepower and acceleration for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js v6 to create an SVG-based chart, employing `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file using `d3.csv` and parsed into numeric values. The circles are semi-transparent teal, with hover effects that increase opacity and add a stroke.

Sep 15, 2020

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population by country, using SVG rendered through React. The chart maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale, displaying tick labels formatted in billions. It constructs axes manually with React components and the d3-scale API, while formatting tick values using d3.format. The data is loaded asynchronously with the d3.csv function.

Sep 15, 2020

Loading thumbnail…

Cars Report

This dashboard displays a car report with a static “Hello World” message rendered as text. It initializes a React application using React and ReactDOM production builds, targeting a pre-element in the HTML body. The code directly updates the element’s text content via `document.getElementById` without using React state or rendering. The page includes a large styled heading but does not yet present any car-related data or visualizations.

Jul 26, 2020