Skip to main content
Log in
J

juanandressr97

@juanandressr97·8 public vizzes

Loading thumbnail…

Lab07, Gráfico de Barras.

A bar chart displays daily maximum values from a CSV file across seven dates, rendered with Victory Charts and React hooks. The code loads data via `d3.csv`, transforms it with a row accessor, and feeds it into `VictoryBar` within a `VictoryChart`. Additionally, it imports `useState` and `useEffect` from React to manage asynchronous data fetching. Styling applies a custom fill color and adjusts chart dimensions, padding, and tick label font sizes through Victory’s style props.

May 24, 2019
Loading thumbnail…

Lab07, Gráfico de Barras.

This example displays a bar chart of daily maximum values from a CSV file, with dates on the x-axis and numeric values on the y-axis. It loads the data using the `d3.csv` method within a React component’s `useEffect` hook, storing the parsed rows in state. The visualization is rendered with Victory Charts, specifically `VictoryBar` and `VictoryChart`, which handle the bar layout and axes. The chart uses padding, domain padding, and custom tick label styling, with a green fill color applied to the bars.

May 24, 2019
Loading thumbnail…

Lab07, Gráfico de Barras.

This example renders a bar chart of monthly population counts using React hooks and Victory Charts. It loads data from a CSV file via the `d3.csv` method inside a `useEffect` hook, then displays the result with `VictoryBar` and `VictoryChart`. The chart maps the "country" column to the x-axis and "population" to the y-axis, with custom styling applied through Victory’s style props. The visualization demonstrates asynchronous data fetching and declarative chart composition in a React component.

May 24, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

May 24, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, along with `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file and processed by multiplying population values by 1000. The chart includes an accompanying video tutorial linked in the README.

May 24, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The code loads data from a CSV file and renders rectangular bars with an SVG, using d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for the axes. The chart is built with D3 v5 and styled with steelblue rectangles.

May 24, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to create an animated smiley face with moving eyebrows using D3.js. The visualization uses SVG rendering within an HTML page, with D3’s selection methods to build and manipulate facial elements. It relies on `d3.scaleLinear` and `d3.scaleBand` to map data from a hardcoded array of telescope observations, drawing bars and axes, then repurposes the same SVG canvas for the face. The face itself is constructed from basic shapes, with eyebrows animated through D3 transitions, showing fundamental DOM manipulation and data-binding techniques.

May 24, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

May 24, 2019